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.
Comments
Article is closed for comments.