If you have a WordPress website you must be strict about the security of your site. To successfully run a blog, a business, or an online store, you must make sure your site is totally secure.

Customers visit your site, buy products, and pass on sensitive information such as passwords, credit card data, etc. If there is a place to infiltrate your website, then hackers can steal your customers data.

When it comes to website security, there are many things you can do to strengthen the security of WordPress.

A good place to improve your website security is to add HTTP security headers to your WordPress website to ensure that you stay actualized with the best security practices.

HTTP security headers add another layer of security helping to reduce attacks and security vulnerabilities.

In this article, we will look at what HTTP response headers are and how to add HTTP security headers in WordPress.

Table of Contents

What are HTTP security headers?

When a user visits a website through a browser, the server reacts with HTTP response headers. These headers inform the web browser how to act during its interaction with the website.

These headers generally consist of metadata such as cache control, status error codes, content encryption, etc.

By using HTTP response headers, you can strengthen the security of your website and also prevent/mitigate attacks.

For example, by adding strict transport security, you can force the latest web browsers such as Google Chrome, Firefox and Safari to communicate with your website only over HTTPS.

Let’s take a look at the 6 HTTP security headers we will see:

HTTP Strict Transport Security (HSTS)
X-Frame-Options
X-XSS-Protection
X-Content-Type-Options
Referrer-Policy
Feature-Policy
Content-Security-Policy (CSP)

HTTP Strict Transport Security (HSTS)

Let’s say you have a site sample.com, and you set up an SSL/TLS certificate to go from HTTP to HTTPS.

Now you know that your website is accessible only with HTTPS.

What if I told you that your website is still accessible via HTTP? Yes, you have heard it correctly. There are several scripts available that hackers use to access a website via HTTP.

Using strict transport security (HSTS), you can force the latest web browsers such as Google Chrome, Firefox and Safari to communicate with your website over HTTPS only. So if an attacker tries to open your WordPress site via HTTP, the web browser will not load the page.

Parameters

max-age – will set the time, in seconds, when the browser will remember that this site is only accessible using HTTPS
includeSubDomains – is an additional parameter that can be used to apply this rule also to all subdomains of the site

X-XSS Protection

X-XSS, also known as cross-site scripting, is a security header that protects sites against cross-site scripting.

By default, this security header is integrated and active in modern web browsers. When implemented, the browser will be forced to load it. This security header will not let a page load if it detects a cross-site scripting attack.

Parameters

0 – disable the filter
1 activates the filter
1; mode=block activates the filter with parameter 1 and also blocks the web from loading with mode=block
1; report=https://form-url/ activates the filter with parameter 1 and then changes the request and sends the report to the URL defined with parameter report=

X-Content-Type-Options

The X-Content-Type-Options is a kind of security header that prevents Google Chrome, Internet Explorer and Firefox from MIME-Sniffing a response other than the type of content declared.

This security header protects the content and reduces the risk of unauthorized downloads.

It has lots of configuration options and settings possible but the most common setting is nosniff.

X-Frame Options

The x-frame-options header protects websites against click theft by not allowing them to fill in the iframes on your website. It is compatible with IE 8+, Chrome 4.1+, Firefox 3.6.9+, Opera 10.5+ and Safari 4+.

In this method, an attacker tricks the user into clicking on something that is not there. A user may believe they are on the main site; however, there is something else running in the background. This way, hackers can steal information from your web browser.

Parameters

deny – will completely deny the display of the iframe.
sameorigin – will deny if the source does not match the site.
allow-from: DOMAIN – this parameter allows iframe display if it is loaded from a specific domain

Content Security Policy (CSP)

The content security policy helps reduce the risk of XSS attacks in modern browsers by declaring which dynamic resources are allowed to load and from where.

As with X-Content-Type-Options, the Content-Security-Policy header has a lot of configuration options and potential parameters, so I will mention the most recommended and used ones.

Parameters

default-src – is the default policy for loading content such as JavaScript, images, CSS, fonts, AJAX requests, Frames, HTML5 media
script-src – defines valid origins for loading JavaScript
connect-src – applies to XMLHttpRequest (AJAX), WebSocket or EventSource. If not allowed, the browser emulates an HTTP 400 status code
img-src – defines the valid origins for loading images
style-src – defines valid origins for loading style sheets

Referrer-Policy

When a user visits a website, it immediately includes a “Referrer” header that informs the server where the visitor comes from. This header is used for statistical purposes.

As you can see, this presents a personal privacy problem. This can be avoided by adding the referrer-policy to your WordPress site.

Feature-Policy

The feature-policy is a kind of security header that allows web owners to allow and deny certain functions of the web platform on their own pages and on those they embed.

Using the feature-policy header, as a site owner you can restrict browser features.

For each of the features, you must specify what is allowed and what is not. These are the possibilities:

geolocation
midi
notifications
push
sync-xhr
microphone
camera
magnetometer
gyroscope
speaker
vibrate
fullscreen
payment

For example, if you want to disable geolocation and camera on your WordPress site, you have to define a feature-policy like this:

Feature-Policy: geolocation ‘none’ ; camera ‘none’Code language: HTTP (http)

Specifying the parameter ‘none‘ in the source list will disable this functionality.

Adding HTTP response headers in WordPress

You can add HTTP security headers to your WordPress site in several ways. You can edit the .htaccess file on an Apache server or the nginx.conf file in NGINX, you can create a function, or you can use plugins.

Important notes
Before adding HTTP security headers to your WordPress site, make sure you have an SSL certificate installed and active, otherwise your site will no longer be accesible.
Before editing any file, make sure you make a backup copy.

How to add WordPress HTTP security headers to the .htaccess file

If your server is Apache then you must add at the end of this file some headers like the ones in this example, applying the parameters we have seen before that you want to incorporate into your site.

Header set Strict-Transport-Security "max-age=31536000" env=HTTPS
Header set X-XSS-Protection "1; mode=block"
Header set X-Content-Type-Options nosniff
Header always append X-Frame-Options SAMEORIGIN
Header Referrer-Policy: no-referrer-when-downgrade
Header set Content-Security-Policy default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self';Code language: PHP (php)

If you prefer, you can add these headers from a function that you can load by adding it to the end of functions.php file of the active theme or your utility plugin, like this:

function agregar_cabeceras_seguridad() {
header( 'Strict-Transport-Security: "max-age=31536000" env=HTTPS' );
header( 'X-XSS-Protection: 1;mode=block' );
header( 'X-Content-Type-Options: nosniff' );
header( 'X-Frame-Options: SAMEORIGIN' );
header( 'Referrer-Policy: no-referrer-when-downgrade' );
header( "Content-Security-Policy default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self';" ); 
}
add_action( 'send_headers', 'add_security_headers' );Code language: JavaScript (javascript)

How to add WordPress HTTP security headers to the nginx.conf file

If your server is NGINX then you should add the HTTP security headers to the nginx.conf configuration file, as in this example:

add_header Strict-Transport-Security max-age=31536000;
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Xss-Protection "1; mode=block" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Content-Security-Policy "default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self';";Code language: JavaScript (javascript)