Do you want to protect your website as effectively as possible against common attacks such as cross-site scripting and clickjacking? Then we recommend using HTTP security headers. In this article, we’ll show you how these headers work and how to integrate them into your website.
Introduction
When you open a website in your browser, the relevant server sends the content of the page to your device along with various metadata about the website, including the HTTP security headers. These tell a visitor’s browser how to access the website.
Security headers help ensure websites are better protected against different types of attacks, which in turn increases security.
Types of security headers
There are a whole range of different security headers, each designed for a specific type of attack. Read on to find out about the most important security-relevant headers.
Content-Security-Policy (CSP)
This header determines which dynamic content (e.g. JavaScript, images, CSS) can be loaded on your website and which URL it can come from. The Content-Security-Policy header helps defend against cross-site scripting (XSS) attacks, in which insecure or malicious code is executed on a website.
The following Content-Security-Policy header stipulates that only content originating from the same server as the website itself may be fetched:
Content-Security-Policy: default-src 'self'X-Content-Type-Options
This header determines whether a browser can automatically guess file formats if your website server does not explicitly specify them. Setting this header prevents the browser from interpreting unexpected and potentially harmful file formats.
The following header stipulates that file formats must not be guessed:
X-Content-Type-Options: nosniffReferrer-Policy
This header determines what information about the origin of a request is transmitted from your website. For outgoing links on your website, the target website saves your domain as the origin of the request by default. The Referrer-Policy header allows you to control which information is passed to external servers. It is therefore primarily used for data protection purposes.
With the following header, information is not disclosed about the origin of a request:
Referrer-Policy: no-referrerHTTP Strict-Transport-Security (HSTS)
This header informs a browser that your website may only be accessed using an encrypted connection (HTTPS). This ensures that communication between the browser and server cannot be intercepted.
The following header states that your website, including all subdomains, should only be accessed using HTTPS. This rule applies for one year (31,536,000 seconds) and the domain is included in the preload list (see section Adding a site to the preload list).
Strict-Transport-Security: max-age=31536000; includeSubDomains; preloadX-Frame-Options
This header prevents pages of your website from being loaded into another website in the form of an iframe. This defends against clickjacking attacks, in which your content is embedded in a malicious website.
The following header specifies that your content may only be embedded on pages within your website:
X-Frame-Options: SAMEORIGINPermissions-Policy
This header allows you to set access to certain features and APIs within your website. This includes, for example, the use of the camera (camera) or microphone (microphone) and the ability to go fullscreen (fullscreen) or access the location (geolocation). This helps avoid XSS, clickjacking and other such attacks while strengthening data protection for your visitors.
The Permissions-Policy header is always structured along the following lines:
Permissions-Policy: <directive>=(<allowlist>), <directive>=(<allowlist>)Adding security headers to your website
Integrating security headers
HTTP security headers are integrated via the .htaccess file. If you use a CMS such as WordPress, you can use a plugin (e.g. Yoast SEO or w3 Total Cache) for this. However, you can also edit the file directly, for example using Explorer in the Hostpoint Control Panel or via an FTP or SSH connection.
Add your HTTP security headers to the file following this structure:
<IfModule mod_headers.c>
Header set [header name and value]
</IfModule> The following is an example of security headers for a WordPress website:
<IfModule mod_headers.c>
Header set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" env=HTTPS
Header set X-Content-Type-Options nosniff
Header set X-Frame-Options DENY
Header set Referrer-Policy no-referrer
Header set Content-Security-Policy "base-uri 'self';form-action 'self';frame-ancestors 'self';font-src 'self';"
</IfModule>Tools for checking
You can view the security headers for your website using the following tools:
- Webbkoll: https://webbkoll.5july.net/en
- Security Headers by Snyk: https://securityheaders.co
Adding a site to the preload list
If you include the HTTP Strict-Transport-Security (HSTS) header, we recommend that you add your website to the preload list as well. This way, you can ensure that any communication with your website is encrypted right from the first visit.
The preload list managed by Google Chrome is used by most major web browsers (e.g. Firefox, Edge, Safari). There is no charge for adding a website.
Additional information
You will also find helpful information on this topic at:
- https://en.wikipedia.org/wiki/HTTP_Strict_Transport_Security
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers
For support requests please use this form instead.
