4

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?

4

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:

enter image description here

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.

enter image description here enter image description here enter image description here enter image description here enter image description here enter image description here

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.

enter image description here

  • Does WYSIWYG Filter work with BUEditor too? – alfish May 22 '14 at 7:20
  • @alfish, yes it works independent of any editor. Like all Drupal text filters, it filters the text after it leaves the editor. – Free Radical May 22 '14 at 8:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.