Increase Website Security with X-Security Headers

Here are three techniques to increase your website’s security posture.

This tutorial explains how to add X-Security Headers to protect against cross-site scripting (XSS), page-framing, and content-sniffing by adding extra security headers to your sites’ resources.

 

Protect Against XSS Attacks

First up, we want to add an X-Security Header to help protect against cross-site scripting (XSS). To do so, add the following directive to your .htaccess file located within the root of your server:

# X-XSS-Protection
<IfModule mod_headers.c>
Header set X-XSS-Protection “1; mode=block”
</IfModule>

No modifications are required, simply copy and paste. This code works by adding the X-XSS-Protection header to your server responses. Most modern web browsers understand this header and will use it to help protect your site against cross-site scripting attacks.

 

Protect Against Page-Framing, Click-Jacking

Next, we want to add an X-Security Header to help protect against page-framing and click-jacking. To do so, add the following directive to your site’s .htaccess file located within the root of your server:

# X-Frame-Options
<IfModule mod_headers.c>
Header always append X-Frame-Options SAMEORIGIN
</IfModule>

No modifications are required, simply copy and paste. This code works by adding the X-Frame-Options header to your server responses. Most modern web browsers understand this header and will use it to ensure that your page can be displayed in a frame only if the frame is on the same domain.

 

Protect Against Content-Sniffing

Last but not least, we want to add an X-Security Header to help protect against content-sniffing. To do so, add the following directive to your site’s .htaccess file located within the root of your server:

# X-Content-Type nosniff
<IfModule mod_headers.c>
Header set X-Content-Type-Options nosniff
</IfModule>

No modifications are required, simply copy and paste. This code works by adding the X-Content-Type-Options header to your server responses. Most modern web browsers understand this header and will use it to ensure proper MIME types for all loaded resources (e.g., CSS, JavaScript, fonts, images, video, etc.).

 

Combine All X-Security Headers

Now that we’ve seen the X-Security Headers that we want to add, let’s combine them into a single, plug-&-play code snippet:

# Extra Security Headers
<IfModule mod_headers.c>
Header set X-XSS-Protection “1; mode=block”
Header always append X-Frame-Options SAMEORIGIN
Header set X-Content-Type-Options nosniff
</IfModule>

Add that to your site’s root .htaccess and call it a day. No editing is required.

Note for WordPress users

Just a word of caution for any WordPress sites.

It was reported that the following line may cause the Theme Customizer site preview to go blank/not work.

Header always append X-Frame-Options SAMEORIGIN

So to avoid any possible issue, it is safe to comment out that line in the previous “Extra Security Headers” example.

Won’t be as secure, but certainly won’t hurt anything by excluding it.

Understand that probably a vast majority of websites have not yet implemented any of these security headers and they’re all doing just fine. It’s about adding layers of protection.

 

Verifying X-Security Headers

Once you’ve implemented these new X-Security Headers, you can verify proper functionality by using a browser extension such as Live HTTP Headers (for Firefox), or similar extensions for other browsers.

Once the extension is enabled, simply visit your site and request a few pages. The View Headers screen will display all headers sent by your server.

 

Conclusion

I welcome your thoughts, questions or suggestions on my article on how to increase your website security with X-Security Headers.

You may support my work by sending me a tip using your Brave browser or by sending me a one time donation using your credit card.

Let me know if you found any errors within my article or if I may further assist you by answering any additional questions you may have.