If you are having troubles with your WebPageTest security score – this guide to WordPress Security Headers will help you ace that score.
WordPress has many ways to keep it safe and secure from hackers – and HTTP security headers are one of the best. These bits of code can help prevent browsers from putting your website at risk.
This guide is a very basic intro to help you improve your security code in WebPageTest and improve your website security.
There are other headers available as well – and of course much more to know about each of the items below – but keeping it simple was the goal for this guide.
Getting Your Webpagetest Security Score
I recently noticed WebPageTest.org has a new security score – and honestly it made me feel a little giddy inside. While not a full scope security review – it gives enough information to help you see how your site is doing security wise.
Below are the steps to running a test with webpagetest.org to determine your security score.
- Visit https://www.webpagetest.org/
- Enter your URL (be sure to enter your URL exactly as it is – including www if applicable and trailing slash for example)
- Click start test
The other options are not critical since we are only focusing on how to improve the security score for this post!
When the scan is done, you will see a Security Score block like the one below to help you see how you are doing! If you have an A – CONGRATULATIONS, you can stop reading here and go have a drink.
If you have anything less then an A – you can click on it and see the issues your website has. You may see a screen like the one below if you have an F like our example site number 1 does below.
Security Header Code Snippets
Below are all of the possible issues as shown in webpagetest.org and the code to help improve your security. Each of these bits of code can be placed at the bottom of your .htaccess file on your server.
I highly recommend you add 1 code snippet at a time – clear your cache and retest to be safe.
BACKUP!
Before you add any of the code below – be sure you have a backup of your .htaccess file. Every host and website is different and while these code snippets have been tested on our own websites and clients and have worked – they may not work for everyone.
1 | HTTP Strict Transport Security (HSTS)
HSTS is basically telling a browser that they should only engage with the website using HTTPS as the connection.
If your website is not using HTTPS – you would need to make that happen before using this snippet or your pages will be blocked.
Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" env=HTTPSIf you are using Cloudflare you will need to enable HSTS in your account.
2 | X-Frame-Options
X-Frame-Options keeps your website protected from what is called clickjacking. Implementing this code will prevent the browser from embedding your web page in an iframe.
You can learn more about clickjacking here.
Header always append X-Frame-Options DENY3 | XSS Protection
XSS is also known as cross-site scripting which is a way code can be injected into a browser
Header always set X-XSS-Protection "1; mode=block"4 | X-Content-Type-Options
This bit of code will help prevent what is called MIME sniffing which is a media based attack. This is when a website allows users to upload data to their server and the result is a file that is actually a malicious HTML file disguised as a media file.
Header set X-Content-Type-Options nosniff5 | Content Security Policy
Content security policy helps reduce Cross Site Scripting (XSS) attacks – which are basically injections of code to your website. This code allows you to tell the browsers where resources can safely be loaded from which will help make it much more difficult for attackers to inject their malicious code.
This specific code has many customizable options based on your needs – but the below is a basic snippet that should be enough in most cases. Be sure to review your website in full after adding this code to ensure everything is working as it should.
Header set Content-Security-Policy "script-src 'unsafe-inline' 'unsafe-eval' http: https:"
There are many options for this code based on what you have going on on your website. If you want to learn a but more you can visit this great Content Security Policy guide from Sucuri.
If you are using Cloudflare you can see some additional header lines you will need to add to the code above.
Security Headers Full Code
To make your life easier – below is the full code from above in one snippet of code. While I do recommend you add them one at a time and test – if you are confident enough and have a backup of your .htaccess file – then copy and paste this into your file and give it a go.
Header always append X-Frame-Options DENY
Header set X-Content-Type-Options nosniff
Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" env=HTTPS
Header always set X-XSS-Protection "1; mode=block"
Header set Content-Security-Policy "script-src 'unsafe-inline' 'unsafe-eval' http: https:"If you really do not want to mess with code, you can also use the HTTP Headers plugin which includes the above and a lot more.
Security Optimization Example
This is a website on a multi-site network hosted on WPEngine. Their security was at an F level and after applying the code above they managed to check in at an A+
Where Is My .Htaccess File?
Your .htaccess file is located on our server in the root directory. You will need to access this via an FTP or your cPanel. On some hosts you can also access it via Yoast or RankMath as well.
Below is how it will look on your server.
Ready to secure your website?
We can’t wait to talk about your project. Let’s set up a call.
