How safely allow untrusted users to use img tag?

Question

Following this question, I'm wondering how can I allow users of a social site (which obviously are not all trusted) to upload images while avoiding XSS threats?

Answer 1

The default "Filtered HTML" text filter that ships with Drupal do not allow the <img> tag because image tags can contain attributes that allow for XSS attacks.

If you want to allow images, but also want to prevent untrusted users from using images as a vector for XSS attacks, you need to install and enable the WYSIWYG Filter and configure it to allow images, but disallow all unsafe image attributes. You use this filter instead of the "Filtered HTML" text filter, not in addition to it.

To create a new text format, navigate to Configuration → Content authoring → Text format and click on Add text format. Select a name for the format (e.g. call it «Wysiwyg»). Enable it for all user roles. Below, I am going to show you how to fine tune the attributes allowed for this text format. It may be a good idea to also enable the filters Convert URLs into links and Correct faulty and chopped off HTML.

If you use all three filters, make sure the filter processing order is the following:

1. WYSIWYG Filter
2. Convert URLs into links
3. Correct faulty and chopped off HTML

Now configure the WYSYWYG filter:

To make sure that no insecure markup emerges from your editor, you must create a white-list for the Wysiwyg text format. My recommended white-list for HTML elements and attributes is below:

a[!href|target<_blank|title],
div[align<center?justify?left?right],
p[align<center?justify?left?right],
img[src|alt|title|width|height], @[class|style],
h2,h3,h4,h5,h6,
br,span,em,i,strong,b,
u,s,strike,
blockquote,pre,address,sub,sup,
ul,ol,li,hr,br,
table,tbody,caption,tr,td

Creating a white-list of HTML elements and attributes and inserting it into the HTML elements and attributes in the Filter settings for the WYSIWYG Filter is not sufficient. You also need to whitelist the properties that is going to be allowed. By default, all properties are disallowed. To allow images and text to be styled and scaled, check the following properties:

The screen shot above shows (the part of) the WYSIWYG filter configuration screen with tick boxes that allows the img attributes it is safe to allow untrusted users to use.

Disallow all other attributes. Attributes that is disallowed will be stripped from the renderable version of the entity by the filter when the entity is saved after editing.

The screen dump below show the entire configuration screen I've used for my setup of the WYSIWYG filter.The text is too tiny to be readable, but I hope it gives you a rough idea about of it is configured.

After configuring the WYSIWYG filter, press Save configuration.

After creating the Wysiwyg text format, allow non-trusted users to access it, and make it the default by moving it to the top of the list of text formats, as shown in the screen shot below.