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.