In the world of Internet, new threats that can harm our online information and systems keep appearing. One such threat is called “clickjacking” attack, also known as “UI redressing.” This kind of attack is often underestimated, and that’s a huge mistake. To shield ourselves against it, we can use a great tool known as the X-Frame-Options header.
Thanks to this article you will learn about the X-Frame-Options in detail, how it works, and how to use it on your website to make it more secure. You’ll see how this simple but powerful tool can help you fight against online threats and make users feel safer.
Contents
What is the X-Frame-Options header?
Clickjacking is a tactic that bad guys use to hide harmful stuff inside real web pages. They trick users into clicking on things that seem harmless, like buttons or links. These attacks can lead to serious problems, like spreading malware or stealing important information.
The solution to this problem is something known as X-Frame-Options, which is a security setting for websites. It lets website owners control how their content is shown on other websites. By setting up this header correctly, we can effectively stop clickjacking attempts, making online experiences safer, and keeping our data protected.
Mozilla docs tell us that “The X-Frame-Options HTTP response header can be used to indicate whether a browser should be allowed to render a page in a <frame>, <iframe>, <embed> or <object>.”
The role of the X-Frame-Options header
This header is an important security tool for websites. Its main role is to defend websites against clickjacking attacks. When a web server uses this header in its response, it instructs web browsers on how to handle situations where the website is embedded in a frame or iframe.
This header can have three main settings: “DENY,” which means that no framing is allowed; “SAMEORIGIN,” which means that only frames from the same domain are allowed; and “ALLOW-FROM,” which allows framing only from a specific domain.
By using these settings, the header stops bad guys from displaying the website in frames, reducing the risk of users being fooled into doing things they shouldn’t. It’s an essential security feature that adds an extra layer of protection to keep websites safe and secure.
Statistics provided by BuiltWith indicate that it’s used by 187.500 of the top 1 million websites.
What happens if X-Frame-Options is not set?
If you don’t set this header, it opens up a security vulnerability called clickjacking attack. This header is like a security rule for websites, and it decides whether other websites can put your web page inside their own frames. When you don’t set this header on your website, it means other people can put your site on their web page without any restrictions.
The main issue here is that someone could use this lack of rules to hide your site in an invisible frame and then trick users by adding fake buttons or forms on top of it. Users might end up clicking on things they shouldn’t or sharing confidential information. To prevent this, it’s crucial to properly configure the X-Frame-Options header on your web server.
The X-Frame-Options header in Chrome
This header in Chrome works as a security rule against clickjacking attacks. Clickjacking involves a malicious website trying to display another site’s content within a concealed frame or iframe to deceive users and steal sensitive data. This HTTP header allows website owners to determine whether their content is allowed to be embedded in external websites.
Within Chrome, the X-Frame-Options header plays a role in deciding whether a site can be integrated into an iframe. When configured correctly, this header helps website owners protect their sites and maintain user privacy when accessed through the Chrome browser.
X-Frame-Options in HTML
The X-Frame-Options header is not a part of HTML but is instead an HTTP response header employed to manage the inclusion of a web page within an iframe on a different website. It functions as a security measure aimed at stopping clickjacking attacks, which occur when a malicious website places your web page inside an iframe to deceive users into engaging with it without their awareness.
X-Frame-Options browser compatibility
The majority of contemporary web browsers support this feature and its directives. This implies that when a website sets particular limitations, such as prohibiting its content from loading within a frame, the majority of browsers will respect these restrictions. Consequently, they will refrain from displaying the website’s content within an iframe if it is not permitted.
Popular browsers like Chrome, Firefox, Safari, and Edge are compatible with it.
X-Frame-Options vs Content-Security-Policy
Both X-Frame-Options and Content-Security-Policy (CSP) are two web security measures designed to prevent unwanted or harmful external content from being added to a web page. While they share similar goals, they have different ways of achieving them.
X-Frame-Options is an HTTP header that lets websites specify if they can be shown in an iframe on another site. Common choices are “DENY” (completely disallow being in iframes) and “SAMEORIGIN” (only allowed if the domain matches the one including it). This helps stop clickjacking attacks where a malicious site can trick users by hiding a legitimate site.
CSP, on the other hand, is a more comprehensive security policy that controls many aspects of script execution and resource loading on a webpage. CSP allows website owners to say which domains can load resources, run scripts, and more. It can also reduce the risk of XSS attacks and other security issues by restricting where content can come from.
X-Frame-Options header directives
Let’s take a look at the directives of this header, there are three of them:
- DENY: this directive says that no other website can put our webpage inside a frame, no matter what. It’s the safest choice and stops anyone from trying to trick or attack our page.
- SAMEORIGIN: by using this directive, our page can only be put inside frames on websites with the same domain name as ours. For example, if our website is “example.com,” only other “example.com” sites can use our page in a frame. This is good if we want to allow our content on our own related sites but not on other sites.
- ALLOW-FROM: this lets us pick a specific web address (like “https://example.com”) where our page can be put inside a frame. This option is not used as much anymore in modern web browsers, and the first two options are more common.
X-Frame-Options header syntax
The X-Frame-Options header is set in an HTTP response sent by the web server to the client’s browser. The general syntax of the header is the following:
X-Frame-Options: <directive>
Where <directive> can take one of the values previously mentioned: DENY, SAMEORIGIN, and ALLOW-FROM.
X-Frame-Options header examples
Let’s see a few examples of the “X-Frame-Options” header:
Disallow All: this setup prevents a webpage from being displayed in an iframe on any website, offering the highest level of protection against clickjacking.
X-Frame-Options: DENY
Allow Same-Origin Only: this permits a web page to be shown in an iframe exclusively when the embedding website shares the same origin (base URL). It’s useful when you want to restrict embedding to your own website.
X-Frame-Options: SAMEORIGIN
Specific Domain Authorization: you can authorize your webpage to be displayed in an iframe only on a particular domain. This is handy when you want trusted sites to use iframes to display your content.
X-Frame-Options: ALLOW-FROM https://example.com
Remember that the choice of configuration depends on your specific security requirements and how you want your content to be embedded on other websites.
How to configure the X-Frame-Options header
Setting up the X-Frame-Options headers is pretty easy, so let’s see how it’s done in the most popular web servers.
In the following examples we’re going to use the SAMEORIGIN directive, so remember to change it to meet your needs.
Enabling the X-Frame-Options header in Apache
To set it up on Apache, you can add this line to your settings file (usually called httpd.conf, apache2.conf or in your site’s .htaccess):
Header always set X-Frame-Options "SAMEORIGIN"
If you’re editing Apache’s config file don’t forget to restart the service to apply changes:
systemctl restart apache2
Setting up the X-Frame-Options header in Nginx
If you’re using Nginx, add this line to your settings file (usually nginx.conf or your site’s settings in Nginx’s conf.d directory):
add_header X-Frame-Options SAMEORIGIN always;
Make sure to add the line in one of the following blocks: server, http, or location.
Now test Nginx’s config:
nginx -t
And restart it:
systemctl restart nginx
Enabling the X-Frame-Options header in IIS
On an IIS server, you can do this in a few steps:
- Open the IIS Manager.
- Find your site on the left panel and double-click on it.
- Go to the “HTTP Response Headers” section.
- Click “Add…” and choose “X-Frame-Options” as the new header’s name.
- Set it to “SAMEORIGIN” and save.
Testing if X-Frame-Options is enabled on my site
Let’s see a fast (and free!) way to do this.
- Start by opening our web misconfiguration scanner.
- Input your domain in the scan box.
- Tick the two boxes below, named ‘Clear cache’ and ‘Follow redirects’.
- Click the Scan button.
- Scroll down to the section named ‘HTTP Security Headers’ and check the results for ‘X-Frame-Options’: if you get a ‘Passed’ in green it means your header is set properly, however, getting a ‘Failed’ in red means that you must update your current header settings.
X-Frame-Options FAQ
Let’s see what are some of the most common questions related to this topic.
What is X-Frame-Options?
X-Frame-Options is a security feature for websites. It helps protect against clickjacking attacks, where a malicious site attempts to trick users into interacting with a different site than they believe.
Is X-Frame-Options a vulnerability?
No, X-Frame-Options is not a vulnerability. It’s a tool to make websites safer, however, it’s not set up right or used in the wrong way, it might not protect your website well. When used correctly, it helps keep your site secure.
Should X-Frame-Options be used instead of CSP?
They do different jobs. The first one is mainly used for stopping attacks like clickjacking. CSP, on the other hand, is a broader security mechanism that helps prevent various types of attacks, including cross-site scripting (XSS). Usually, it’s better to use CSP for better overall security, but sometimes using both X-Frame-Options and CSP together can be even safer.
Summary
Online security evolves continuously, and the X-Frame-Options header plays a huge role in defending us against clickjacking. X-Frame-Options lets website owners decide how their content appears on other websites, and there are three basic choices: “DENY” to completely block framing, “SAMEORIGIN” to allow only the same-domain framing, and “ALLOW-FROM” to permit specific trusted domains.
Not using it can be risky. Without it, the bad guys can hide your site in an invisible frame and trick users into doing harmful things. It’s crucial to configure the header correctly to prevent these risks and protect your website.