Recently, from a post sent by Peter-Paul Koch to css-discuss, I discovered a security flaw using <input type="file"> controls, CSS and JavaScript. Peter’s explained a techniqe that allows authors to have more control over the style of file upload controls. For those of you who don’t know, browser vendors limit the amount of styling and DOM access to file upload controls for security reasons. This technique can be used to make the user think they are simply entering text into an ordinary text box, when infact they are entering it into a file upload control.
It works by positioning an ordinary text box underneath a file upload control and then setting opacity for the file upload control to 0:
input.file {
/* Assumes the file upload control has a
* class="file" attribute
*/
-moz-opacity: 0; /* For Mozilla */
opacity: 0; /* For CSS3 compliant UAs including
* recent Mozilla builds */
filter:alpha(opacity: 0); /* For IE */
}JavaScript is used to copy the text from the file upload control to the text box behind, as it’s entered by the user. This security hole applies to Mozilla, Firefox and Internet Explorer.
I created some demonstrations to show how this could potentially be used. Combine that with the security holes discussed in bug 57770, and that’s quite a serious exploit. I reported it on bugzilla, and to Microsoft. Although Microsoft’s feedback mechanism was not very easy to find, I eventually found an e-mail address and actually recieved a prompt reply thanking me for taking the time to contact them with my constructive feedback (It was not just an automated response). I’m yet to hear anything from Bugzilla, nor a reply to my post to the WHAT-WG mailing list. Let me know how serious you think this is, or if you feel like putting it to some practical use. ?
PS. I still have 2 GMail invites available. e-mail me if you want one.
There’s something in this post that screws up the display in Opera and (to a lesser extent) IE. (Observed with O7.54 and IE6, both on WinXp).
In both browsers the orange side bar appears beneath the main content and in Opera the white background appears momentarily and then vanishes.
The validator spots a missing lt;/span> (the one with the title explaining why you don’t link to IE’s home page) and putting that back in fixes things. Strange.
PS I know spelling corrections are a pain, but, ahem, Anonymous vs Anonamous.
The sidebar problem in Opera was caused by the missing tag and everything is fine now.
I’d only ever visited your site in Opera before so didn’t realise that this was deliberate degradation in IE.
It must be just a coincidence that this particular problem triggered the same display in Opera.
Thanks Steve. I thought I had fixed that error with the span, but must have forgot to publish the changes. I don’t know why the side bar is displaying incorrectly in Opera for you, it isn’t for me. Though, I didn’t check until I fixed the span, so maybe that was the problem. Let me know if it still doesn’t work, and I’ll investigate a little more. I’m aware that the sidebar shows at the bottom in IE. That was a concious decision to allow the site to degrade a lot in IE, which allowed me to use CSS that’s not supported by IE, such as display: table-cell.