Configuring website security headers

Why Are Security Headers Critical for Your Site?

Every time a user's browser sends a request to your server, the server sends a set of HTTP headers along with the main content. These headers tell the browser how to process the content. However, many of these headers play a security role and instruct the browser to block risky behaviors, such as executing scripts from unknown sources or displaying your site in an external iframe.

Unfortunately, the default configuration of WordPress and many shared hosting providers does not enable these security headers. As a result, your site remains vulnerable to common attacks such as XSS (Cross-Site Scripting), Clickjacking, and MIME Sniffing. In this article, you will learn step by step how to enable the most important security headers without breaking your site's functionality.

The Most Important Security Headers You Should Configure

The following three headers have the greatest impact on your site's security, but if configured incorrectly, they can also take your site down. So follow the steps carefully.

1. Content-Security-Policy (CSP) Header

The Content-Security-Policy header tells the browser which sources are allowed to load scripts, styles, images, or fonts. If an attacker can inject a malicious script into your site (for example, through a form without validation), CSP will block its execution.

A simple and secure example to start with:

Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' https://code.jquery.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' https://fonts.gstatic.com; connect-src 'self'

In this example:

• default-src 'self' means all resources should only be loaded from your own domain.
• script-src allows inline scripts and jQuery scripts from the CDN.
• 'unsafe-inline' is necessary for inline styles and some WordPress scripts, but try to remove it in the future.
• img-src allows loading images from any HTTPS source.

Common mistake: If your WordPress plugins use inline scripts (many slider and page builder plugins do), removing 'unsafe-inline' will completely break your site. Always test in a trial mode first.

2. Strict-Transport-Security (HSTS) Header

The Strict-Transport-Security header tells the browser that your site is only accessible via HTTPS and should never use HTTP. This header prevents Man-in-the-Middle attacks.

Example configuration:

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

• max-age=31536000 means the browser will remember this rule for one year.
• includeSubDomains means subdomains must also use HTTPS.
• preload tells modern browsers to include this domain in their HSTS preload list.

Important note: Before enabling includeSubDomains, make sure all your subdomains (such as mail.example.com or blog.example.com) have valid SSL certificates. Otherwise, users will no longer be able to access those subdomains.

3. X-Frame-Options Header

The X-Frame-Options header prevents Clickjacking attacks. In this attack, the attacker places your site in a transparent iframe, and the user thinks they are clicking on their own site's buttons, when in fact they are clicking on the attacker's site buttons.

Secure configuration:

X-Frame-Options: SAMEORIGIN

This value tells the browser that only pages from the same domain can display your site in an iframe. If you need your site to be displayed on another domain (such as a payment panel), you can use ALLOW-FROM https://example.com, but this value is not supported in modern browsers, and it's better to use frame-ancestors in CSP instead.

How to Enable Security Headers in WordPress

There are three main methods to enable security headers. Depending on your level of server access, choose one of these methods.

Method 1: Using the .htaccess File (Simplest Method)

If you are using Apache, add the following code to the end of the .htaccess file in your site's root directory:

<IfModule mod_headers.c>
  Header set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' https://code.jquery.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' https://fonts.gstatic.com; connect-src 'self'"
  Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
  Header always set X-Frame-Options "SAMEORIGIN"
  Header set X-Content-Type-Options "nosniff"
  Header set Referrer-Policy "strict-origin-when-cross-origin"
</IfModule>

After applying the changes, open your site in an incognito browser and use online tools like securityheaders.com to verify that the headers are being sent correctly.

Method 2: Using a WordPress Plugin

If you don't have access to server files or don't want to write code, you can use security plugins like Wordfence or Really Simple SSL. These plugins usually have an option in their security settings to enable security headers.

However, be aware that plugins sometimes apply CSP settings too strictly and may break your site. Always test all pages of your site after enabling them.

Method 3: Server-Level Configuration (Nginx)

If you are using Nginx, add the following code to the server block in your configuration file:

add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' https://code.jquery.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' https://fonts.gstatic.com; connect-src 'self'";
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;

After applying the changes, restart Nginx:

sudo systemctl reload nginx

Additional Security Headers You Shouldn't Forget

In addition to the three main headers, there are several other headers that can significantly enhance your site's security.

X-Content-Type-Options

This header prevents MIME Sniffing attacks. In this attack, the browser tries to guess the file type based on its content rather than the Content-Type header. This can lead to the execution of malicious files.

X-Content-Type-Options: nosniff

Referrer-Policy

This header controls what information from your page's URL is sent to the destination site when users click on links. The strict-origin-when-cross-origin setting provides the best balance between privacy and usability.

Referrer-Policy: strict-origin-when-cross-origin

Permissions-Policy

This header allows you to restrict browser features such as camera, microphone, and GPS on your site. This prevents malicious scripts from abusing these features.

Permissions-Policy: camera=(), microphone=(), geolocation=()

Common Mistakes in Configuring Security Headers

In this section, we'll review the most common mistakes that occur when configuring security headers so you can avoid them.

Mistake 1: Enabling HSTS Before Ensuring Full HTTPS

If your site is still running on HTTP or your SSL certificate is not valid for all subdomains, enabling HSTS will prevent users from accessing your site. The browser will block HTTP connections to your site for one year (or whatever duration you set in max-age).

Mistake 2: Setting CSP Too Strictly

Many WordPress sites use inline scripts and dynamic styles. If you set CSP too strictly, your site won't display correctly. The solution is to start with the Content-Security-Policy-Report-Only value, which only reports errors without breaking the site:

Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self' 'unsafe-inline'; report-uri /csp-violation-endpoint

After reviewing the reports for a few days, you can add the required sources to the allowed list and then change the header to the normal mode.

Mistake 3: Forgetting Headers on Cached Pages

If you use a caching plugin like W3 Total Cache, security headers may not be applied to cached pages. After configuring the headers, be sure to clear your site's cache and check again.

Summary and Next Steps

Configuring security headers is one of the simplest and most effective ways to enhance your site's security. By applying the three main headers (CSP, HSTS, and X-Frame-Options) along with several additional headers, you can protect your site against the most common web attacks.

To ensure your settings are correct, use online tools like securityheaders.com and Mozilla Observatory. These tools give you a score and provide specific recommendations for improvement.

If you're looking for a more comprehensive solution for your site's security, ServerNet offers web hosting services with advanced security configurations that can help you implement these headers at the server level. But remember, even on a simple shared hosting plan, you can significantly enhance your site's security using the methods described in this article.

Finally, remember that security is a process, not a destination. Configure security headers, regularly test your site, and stay up to date with the latest WordPress security updates and your plugins.