How to set X-XSS-Protection Header

How to implement the X-XSS-Protection Header

You can set this header by adding a rule to your web server’s configuration file. We will focus on the two (2) common configurations which protect against Cross Site Scripting Attacks using the built-in filter in most browsers. They are:

X-XSS-Protection: 1; mode=block

X-XSS-Protection: 1

Note: Different web servers have different configuration files. Choose the one below that applies to your website.

Apache web server:

Using .htaccess configuration file.

If you’re on a shared hosting plan, you’ll only have access to create rules in the .htaccess configuration file. Follow these steps:

Go to your website’s root folder, open the .htaccess file. Note: You should be able to do this using either an FTP application such as Filezilla or your hosting provider’s online File manager.
Copy one (1)of the following lines into the .htaccess (after any existing rules) and save it. The header should now be set.

X-XSS-Protection: 1; mode=block

X-XSS-Protection: 1

Using httpd.conf configuration file

If you’re on a dedicated hosting plan that gives you access to the web server’s root configuration file httpd.conf, then:

Go to your website’s root folder, open the conf. Note: You should be able to do this using either an FTP application such as Filezilla or your hosting provider’s online File manager.
Copy one (1)of the following lines into the conf file (after any existing rules) and save it. The header should now be set.

X-XSS-Protection: 1; mode=block

X-XSS-Protection: 1

Microsoft IIS web server

<httpProtocol>
    <customHeaders>
        <add name=" X-XSS-Protection" value="1; mode=block" />
    </customHeaders>
</httpProtocol>

<httpProtocol>
    <customHeaders>
        <add name=" X-XSS-Protection" value="1" />
    </customHeaders>
</httpProtocol>

NGINX web server

Copy one(1) of the following lines into server block configuration.

add_header X-XSS-Protection "1; mode=block" always;

add_header X-XSS-Protection "1" always;

NOTE: Some CMSs such as WordPress offer plugins you can use to set headers using a point and click type interface, in case you feel uncomfortable modifying the configuration file directly.

How to verify the X-XSS-Protection header is set

Use your browser’s built-in function to view HTTP Headers as below:

Using Google Chrome and Firefox browser:

Open the web page
Right-click anywhere on the page and select “Inspect element”
Go to the “Network Tab”
Refresh the page and select the page’s URL from the list of loaded resources
Look under the panel for “Response Headers” to see if the X-XSS-Protection header is set as you configured.

Why implement the X-XSS-Protection Header

This header should be used when you want to use the built-in filter of browsers to protect a website or web application against Cross-Site Scripting (XSS) attacks.

Link(s) for additional information on this topic