Table of contents

Intro

Security headers are directives used by web applications to configure security defenses in web browsers. Based on these directives, browsers can make it harder to exploit client-side vulnerabilities such as Cross-Site Scripting or Clickjacking. Headers can also be used to configure the browser to only allow valid TLS communication and enforce valid certificates, or even enforce using a specific server certificate. Deep Security Help Center

As you can see from the definition above, the Security Headers play an important role in making the client interaction via the browser to your website more secure. Browsers can be used to exploit client-side vulnerabilities that result in hijacking a session, stealing information, tracking the user, and more.

By implementing the Security Headers you instruct the browser to have a stricter approach and a more secure communication with the server.

Most common Security Headers

Below you will find a list of the most common and important of the Security Headers directives. I will link them to MDN web docs where you can find a more in-depth explanation for all of them.

How to check Security Headers

  • Using your browser inspector

Open the Inspector, load your site, go to the Network tab, and click on the first request. In there on the Headers you should be able to see if you have any Security Headers set and what values they use.

Security Headers in browser inspector network
Security Headers in browser inspector network

 

  • Using an online tool

One tool that I use is Security Headers by Probely. It works really well and gives you a lot of details. All you have to do is add your domain and scan it, in a matter of seconds you will get a result and feedback on what can be improved.

Security Headers by Probely result
Security Headers by Probely result

Another one is Observatory by Mozilla.

How to add Security Headers

The Security Headers that you’ll find below will give an A+ score when testing your site.
Note: these settings might not be right for you. Make sure you understand what each Security Header does and decide on your own the correct value. 

One such example is Content-Security-Policy, which might require a stricter approach in some cases compared to my suggestion below.

Apache

If you’re using Apache, go into your .htaccess file and add the following code.

This will cover all the Security Headers mentioned above. Feel free to change them based on your needs (for example Content-Security-Policy).

Copy Code 


<IfModule mod_headers.c>
  Header always set X-Content-Type-Options "nosniff"
  Header set X-Frame-Options "SAMEORIGIN"
  Header set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" env=HTTPS
  Header set Content-Security-Policy "upgrade-insecure-requests"
  Header set Cross-Origin-Resource-Policy "same-site"
  Header set Cross-Origin-Embedder-Policy "unsafe-none"
  Header set Cross-Origin-Opener-Policy "same-origin"
  Header set Permissions-Policy "camera=(), geolocation=(), interest-cohort=(), microphone=()"
  Header set X-XSS-Protection "1; mode=block"
  Header set Referrer-Policy "no-referrer-when-downgrade"
</IfModule>

You’ll need to restart Apache after this change is done.

Copy Code 


sudo service httpd restart

Note: you can also add the header values in the httpd.conf file located here /etc/httpd/conf/httpd.conf.

Nginx

On Nginx, you will need to find the .conf file that is used, most likely nginx.conf, and add the following code.

Copy Code 


server {
   listen 80;

   add_header X-Content-Type-Options nosniff
   add_header X-Frame-Options SAMEORIGIN
   add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" env=HTTPS
   add_header Content-Security-Policy "upgrade-insecure-requests"
   add_header Cross-Origin-Resource-Policy "same-site"
   add_header Cross-Origin-Embedder-Policy "unsafe-none"
   add_header Cross-Origin-Opener-Policy "same-origin"
   add_header Permissions-Policy "camera=(), geolocation=(), interest-cohort=(), microphone=()"
   add_header X-DNS-Prefetch-Control "on"
   add_header X-XSS-Protection "1; mode=block"
   add_header Referrer-Policy "no-referrer-when-downgrade"
}

Make sure to restart Nginx after you save the file

Copy Code 


nginx -s reload

Security Headers on WordPress

There are a few plugins that will allow you to set the HTTP Security Headers in WordPress without too much trouble.

One of them is HTTP Headers, it has a pretty simple interface from where you can select the Headers you want to enable and what values to assign to those directives. This plugin will edit the .htaccess file and update it with the correct values.

You can also use the methods from above if you’re a little more technical and don’t want to have an extra plugin on the site.

Conclusion

Security Headers (HTTP) is a simple way to improve your site security and it doesn’t require changing the application itself (in most cases at least). I see no reason why you shouldn’t take your time and implement them.

Make sure you use the most recent headers because you will notice that some are deprecated or not recommended anymore (if you follow the links from MDN). This will require you to scan the site from time to time, just to see if anything changed and some HTTP headers might need to be updated.