WP-Mix

Working on WordPress development and testing HTML forms in Chrome browser, I ran into the following error:

This page isn't working

Chrome detected unusual code on this page and blocked it to protect your personal information (for example, passwords, phone numbers, and credit cards).

ERR_BLOCKED_BY_XSS_AUDITOR

As explained here, the XSS error happens when Chrome detects a possible cross-site scripting attack. So it blocks the request and displays the error. This strategy probably helps more than hurts, but whatever. I just need to test some forms in Chrome, so here’s how to do it.

Solution

The solution is to add the following HTTP header to the page request:

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

For WordPress users, this can be achieved by adding the following code snippet via functions.php:

// Add HTTP XSS Header
function shapeSpace_add_xss_header() {
	
	header('X-XSS-Protection: 0');
	
}
add_action('init', 'shapeSpace_add_xss_header');

Thanks to JanWillem for his help with this function :)

Done! Of course you should use this technique with caution, only on development environments and so forth. Never disable Chrome’s or any other browser’s XSS-protection is the best advice here. If you need to disable for your own testing/development purposes fine. Otherwise, don’t.

Bonus Example

Asked how/why this is necessary, here is an example showing how to implement the “add XSS headers” technique conditionally. Observe the following WordPress function:

// Conditionally Disable Chrome XSS Auditor
function shapeSpace_add_xss_header() {
	
	// this is to enable saving of custom code options that include <script> and other tags.
	// this is needed because the chrome browser blocks requests that include <script> et al.
	// no other pages or requests are affected by this function.
	// more info @ https://wp-mix.com/disable-chrome-xss-auditor/
	
	if (!is_admin()) return;
	
	$screen = get_current_screen();
	
	if (!property_exists($screen, 'id')) return;
	
	if ($screen->id === 'settings_page_my-plugin') {
		
		header('X-XSS-Protection: 0');
		
	}
	
}
add_action('init', 'shapeSpace_add_xss_header');

You can read the inline comments for an explanation of what’s happening, etc. Basically this code disables Chrome XSS protection on a conditional basis, such that it only happens for admin users who are viewing a specific plugin screen in the WordPress Admin Area.