How do I add security headers using Cloudflare?

Este post também está disponível em: Português (Portuguese (Brazil))

What are security headers?

Whenever a browser requests a page from a web server, the server responds with the content along with “headers”. Some headers contain content metadata, such as when the page was last modified. Others include the name and version of the web server, cookies, whether the browser should cache the content, etc. Security headers are headers that allow you to tell your client’s browser how to behave when manipulating your site’s content. For example, a header might specify “don’t open me inside an iframe” or “only talk to me over HTTPS”. There are several types of security headers with different functions.

Why are security headers so important?

Preventing attacks: Security headers help prevent a number of common attacks.
XSS (Cross-Site Scripting): Prevents malicious scripts from being executed in the user’s browser.
Clickjacking: Prevents one site from being embedded in another in a deceptive way, forcing the user to carry out unwanted actions.
Injection: Make it difficult to inject malicious code into forms and other entry points.
Data protection: By configuring security headers correctly, you can ensure that your users’ sensitive data is transmitted securely, using encrypted protocols such as HTTPS.
Improved site reputation: Secure sites tend to rank better in search results and generate more trust among users.

Types of security headers

Below are the security headers that we will cover in this post and function.

X-Content-Type-Options

The X-Content-Type-Options header is an HTTP security setting that helps protect against attacks based on misinterpretation of the content type, such as MIME sniffing.
It instructs the browser not to try to guess the content type of files, but only to use the MIME type declared by the server.

Why is MIME sniffing dangerous?

  • MIME sniffing occurs when the browser tries to determine the type of file by analyzing its content, ignoring what has been specified by the server in the Content-Type header.
  • This can lead to security problems.
  • Execution of malicious scripts: A file sent as text can be misinterpreted as HTML or JavaScript, allowing Cross-Site Scripting (XSS) attacks.
  • Unsafe file downloads: Malicious files can be executed automatically in the browser if the MIME type is interpreted incorrectly.
X-Frame-Options

The X-Frame-Options header is an HTTP security setting that helps protect websites against clickjacking attacks. It controls whether or not a page can be displayed within an iframe on other sites, preventing legitimate content from being loaded in malicious contexts.

X-XSS-Protection

The X-XSS-Protection HTTP response header is a security measure designed to mitigate XSS (Cross-Site Scripting) attacks. XSS attacks involve the injection of malicious scripts into web pages, which can then be executed by unsuspecting users.

Strict-Transport-Security

Strict-Transport-Security Strict-Transport-Security The header Strict-Transport-Security (also known as HSTS – HTTP Strict Transport Security) is an HTTP security setting that forces browsers to only access a website via secure connections (HTTPS). It helps prevent downgrade and man-in-the-middle (MITM) attacks by protecting communication between users and the server.

Referrer-Policy

Referrer-Policy Referrer-Policy is essential to protect user privacy and avoid exposing sensitive information through the Referer. Choosing the right policy depends on the level of privacy and the needs of the application. Configuring this header correctly is a security best practice for any modern website.

Content Security Policy

The Content Security Policy (CSP) header is an advanced security mechanism that helps to mitigate a wide range of web application vulnerabilities, mainly XSS (Cross-Site Scripting) attacks. It works by defining a whitelist of trusted sources from which the browser can load resources such as scripts, style sheets and images.

Note: If we weren’t using cloudflare, it would be necessary to create instructions on the server’s Web Server (NGINX, Apache, Litespeed…)

1- Log in to your cloudflare account, click on the domain where we will implement the security headers.

2- In DNS, make sure that the type A entry with your domain name has an orange cloud (do the same with www).

3 – In the left-hand column, click on the Rules menu to display the options and select Transform Rules

4 – Click on Modify Response Header and then on the Create rule button.

5 – Under Rule name, give your rule a name to identify it. Under If incoming requests match…, select All incoming requests and under Then… select Set static

Below is the name of the header and the value we will use.

Header nameValue
x-content-type-optionsnosniff
x-frame-optionsSAMEORIGIN
x-xss-protection1; mode=block
strict-transport-securitymax-age=31536000; includeSubDomains; preload
referrer-policyno-referrer-when-downgrade
content-security-policyupgrade-insecure-requests; block-all-mixed-content
permissions-policyaccelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), midi=()

Following the table above, fill in the Header name and value. At the end, click deploy to activate the headers.

When you have finished, you will have this result.

Now let’s test whether the security headers are OK on your site. Go to https://securityheaders.com/ , type in your domain and then click on scan. You will get this result: