CSS input opacity exploit


Peter-Paul Koch recently published an article on Quirksmode.org explaining how to use the CSS3 "opacity" style (or equivalent proprietary opacity styles) to change the appearance of file input form fields. While the technique presented in the article might appeal to designers, it also demonstrates a security vulnerability which apparently exists in most modern browsers and which should be fixed.

The article explains how the text box and browse button elements of a <input type="file"> form element can be replaced with similar graphics. The problem is that a malicious webpage could easily replace the input with a different kind of graphic, one which could deceive the user into unknowingly uploading a file.

A simple example of an exploit of this feature would be to make the input element seem to be a simple text box. This page demonstrates this method. The input element is made transparent and a text box graphic is used as a background image giving the appearance that the form field is a simple text box. The text presented asks the user to type in the path to a sensitive file, which will be uploaded when the user clicks the "Next" button.

I believe that this exploit demonstrates why file input elements need to be treated special, and that granting the ability to "style" them needs to be very carefully considered to eliminate possibilities like this. The second proposal given here (essentially, prompting the user to confirm a list of files to be uploaded prior to performing the upload) is one possible way to work around this type of situation. However, I would still recommend disallowing the opacity style to be applied to file input elements.

I have submitted a bug to mozilla.org for this issue (I can't link to it since it is currently restricted because it is a security issue, though not a very secret one anymore) but hopefully the other browser manufacturers will come to the same conclusion that I have.