Using SafeCracker in ExpressionEngine Strips HTML and CSS Inline Styles

I have a form built with SafeCracker in ExpressionEngine. One of the textarea fields is used to allow users to submit HTML code.

Here's an example of the type of code they will be providing:

<div style="left: 385px; top: 137px;" class="aaa"></div>.

When the form is submitted and the entry is saved to the database, SafeCracker strips out the inline CSS style. The result of what is actually saved to the database is:

<div class="aaa"></div>.

As you can see, the inline CSS style(s) are being removed but the rest of the HTML is maintained.

I want to allow users to be able to submit HTML code and not have SafeCracker strip out th开发者_如何学Goe inline CSS style(s). How can I accomplish this?

SafeCracker uses the built-in ExpressionEngine XSS Sanitization Method to clean user submitted input from Cross Site Scripting (XSS) and SQL Injection vulnerabilities.

Any front-side user input is sanitized by using $this->EE->security->xss_clean() before being inserted into the database or output to the screen.

Thankfully for us, the Engineers at EllisLab have provided a secret, undocumented way of "whitelisting" fieldtypes and field_ids used in SafeCracker and exempting them from XSS filtering.

To stop SafeCracker from stripping all HTML from a given field, open up the following file, depending on which version of ExpressionEngine you're running:

EE 2.1.3 or Earlier (SafeCracker installed as Third-Party Add-On) /system/expressionengine/third_party/safecracker/libraries/safecracker_lib.php

EE 2.2.0 or Later (SafeCracker installed as First-Party Module) /system/expressionengine/modules/safecracker/libraries/safecracker_lib.php

Note: ExpressionEngine 2.2.0 bundles SafeCracker as a first-party module, so your installation location will depend on what version you're running or have upgraded from.

Scroll down to around Line 2371 (for EE 2.1.3) or Line 2516 (for EE 2.2) and look for the following:

$this->skip_xss_fieldtypes = array();
$this->skip_xss_field_ids = array();

Here's where the fun begins. To "whitelist" a field from having the XSS Filter applied, simply add the fieldtype or field_id to either array.

Here's an example:

$this->skip_xss_fieldtypes = array(
    // This is the fieldtype as specified in the Control Panel
    // Channel Fields, not what you use in your SafeCracker template
    'textarea'
);
$this->skip_xss_field_ids = array(
    // This is the field_id from the exp_channel_data MySQL Table
    'field_id_1'
);

You can either specify a certain type of fieldtype (textarea, input, etc.), or the field_id if you'd rather be more explicit. The former way is more general, while the latter is absolute and is more flexible if a custom field would to ever change its type.

With these changes, any field(s) you exempt from the XSS Sanitization Method will no longer have any filtering applied, and allow any arbitrary HTML to be submitted into the database!

Keep in mind, that any upgrades to ExpressionEngine may overwrite this file, so you may want to change the permissions on the file or keep a backup handy.

Cross Site Scripting should be taken very seriously as you would never want your site to be the source of an attack vector. Always err on the side of caution.