How to Handle Chrome HTML Editor Form Submission Block Due to Bogus XSS Detection Causing ERR_BLOCKED_BY_XSS_AUDITOR Error - Secure HTML parser and filter package blog

Contents

What is a XSS Security Exploit?

The Chrome Form Submission Error ERR_BLOCKED_BY_XSS_AUDITOR

Using the X-XSS-Protection Header asTemporary Workaround to Avoid the ERR_BLOCKED_BY_XSS_AUDITOR Block Error

Make it Safer by Filtering Harmful HTML on the Server Side using PHP

Download the Secure HTML Filter and Parser PHP Class package

What is a XSS Security Exploit?

XSS is the abbreviation of Cross-Site Scripting. This a security attack that consists in submitting HTML with malicious JavaScript to a site.

If the site displays that HTML with JavaScript without having filtered the malicious JavaScript code, the cookies sent by the site can be stollen and sent to an attacker site, so he can use to forge user sessions and access the user site account without permissions.

The Chrome Form Submission Error ERR_BLOCKED_BY_XSS_AUDITOR

The Chrome (and Chromium) browser has a XSS security audit feature that analyzes HTML submitted via form values and blocks those requests XSS, so the forms are never submitted and eventual XSS exploits are avoided.

The problem is that since Chrome version 57 it started blocking form POST submissions with certain HTML structures. So it shows an error message named ERR_BLOCKED_BY_XSS_AUDITOR and the form is not submitted at all.

The XSS auditor feature of Chrome is a good idea because it protects users from having their accounts in certain sites exploited.

The problem is that this auditor is not very reliable under version of Chrome 57. There are some cases that it is blocking the submission of HTML that does not contain malicious JavaScript, or even any JavaScript at all.

This the case when a site uses a HTML content editor. In reality HTML content editors are parts of a HTML pages with the contenteditable attribute.

<div contenteditable="true">Some HTML goes here</div>

This attribute tells the browser that the use can enter content in there for instance by typing text or pasting part of a page in there. Then some JavaScript code in the page extracts the edited HTML and puts it in a hidden form input, so it can be submitted to the server when the form is submitted.

Usually HTML editors show edit areas inside an iframe so the select, cut, copy and paste operations are contained inside the iframe. Then some JavaScript code pulls the edited HTML from the iframe into the form hidden input.

The problem is happening with Chrome 57 apparently because it is detecting the HTML pulled from the contenteditable element as insecure, even when it does not contain any JavaScript code.

It is hard to detect what exactly is the HTML code that is being detected as malicious because the problem does not happen with all sorts of HTML code being edited.

Using the X-XSS-Protection Header asTemporary Workaround to Avoid the ERR_BLOCKED_BY_XSS_AUDITOR Block Error

Unfortunately this affects thousands of Web sites that use HTML editors to let their legitimate users edit HTML content. This is the case of this blog system I am using now to edit this article.

The problem has been reported to the Google Chrome team but it has not been fixed. It is not even clear if they will fix for future Chrome versions.

One temporary workaround until Chrome stops filtering form submission with HTML is to use the X-XSS-Protection header. You can set that header before sending the current page HTML to the browser in PHP like this:

Header('X-XSS-Protection: 0');

Keep in mind that the XSS protection is a good thing when it works and does not block harmless HTML. So it is recommended that you only use this header while Chrome is blocking submission HTML in the current versions.

Make it Safer by Filtering Harmful HTML on the Server Side using PHP

Secure applications should always validate and filter insecure HTML that is received on the server side, precisely to avoid XSS attacks performed by attackers that forge form submissions.

One way to proper filtering is to use a full HTML parser that will discard malformed HTML and filter insecure JavaScript. That is one of the capabilities Secure HTML parser and filter package .

This is a a modular markup parser that parses HTML, ignored malformed HTML tags and text sequences. It provides several module classes that can be chained to perform different filtering operations.

It uses a white list to determine which HTML tag attributes and CSS style attributes are safe. This way JavaScript code and any unknown tag attributes or CSS properties and ignored.

The package can rewrite the HTML as result of the HTML filtering operation, as you may see using the following example script.

$html = 'some HTML code here';

$filter = new markup_filter_safe_html_class;

/* Add here the proprietary CSS properties that you know that are 
 * safe to allow.
 */
$filter->safe_proprietary_css_properties = array(
    '-moz-border-radius'=>array(),
    '-moz-border-radius-topleft'=>array(),
    '-moz-border-radius-topright'=>array(),
    '-moz-border-radius-bottomleft'=>array(),
    '-moz-border-radius-bottomright'=>array(),
    '-webkit-border-radius'=>array(),
    '-webkit-border-top-left-radius'=>array(),
    '-webkit-border-top-right-radius'=>array(),
    '-webkit-border-bottom-left-radius'=>array(),
    '-webkit-border-bottom-right-radius'=>array(),
);
    
/* Add here the CSS property function names properties that you know
 * that are safe to allow.
 */
$filter->safe_css_property_functions = array(
    'alpha'=>array()
);

$parameters=array(
    'Data'=>$html,
    /* Set to 1 if want to filter HTML that only contains the body
       part of a page */
    'OnlyBody'=>0,
);

if(($success = $filter->StartParsing($parameters)))
{
    $output = '';
    do
    {
        if(!($success = $filter->Parse($end, $elements)))
            break;
        $te = count($elements);
        for($e = 0; $e < $te; ++$e)
        {
            if(!($success = $filter->RewriteElement( $elements[$e], $markup)))
                break;
            $output.= $markup;
        }
    }
    while(!$end);
    if($success)
        $success = $filter->FinishParsing();
    if($success)
        echo $output;
}

Download the Secure HTML Filter and Parser PHP Class package

You can download and install the secure HTML filter and parser package ZIP archive or install it using the composer PHP tool using instructions from the package download page.

If you liked this article share it with your friends using the share buttons above. If you have questions or remarks, post a comment below.