The X-Frame-Options header is a security header that helps protect websites against clickjacking attacks by controlling whether a web page can be displayed within an iframe.
Clickjacking is a technique where an attacker tricks a user into clicking on something different from what the user perceives, potentially leading to unintended actions.
Purpose of X-Frame-Options
The primary purpose of the X-Frame-Options header is to prevent a web page from being embedded within an iframe by a different domain. This helps mitigate the risk of clickjacking, where an attacker might attempt to overlay a malicious page or elements over a legitimate website to deceive users.
How X-Frame-Options Works
The X-Frame-Options header can have three different directives:
DENY | This directive instructs the browser to deny any framing of the content, regardless of the origin. |
SAMEORIGIN | This directive allows the content to be framed only by pages from the same origin (i.e., the same domain and protocol). |
ALLOW-FROM uri | This directive allows the content to be framed by a specific URI. It specifies the URI of the page that is permitted to frame the content. |
When a web server includes the X-Frame-Options header in its HTTP response, it informs the browser about the framing policy to be applied for the specific page. The browser then adheres to this policy when rendering the page.
Scenario Without X-Frame-Options
Here is a scenario that shows how this works when a bad actors performs an attack and the X-Frame-Options is not set:
| 1 | An attacker creates a malicious website and embeds a target website in an iframe. |
| 2 | The attacker tricks a user into visiting the malicious site, where the target site is invisibly overlaid. |
| 3 | The user interacts with the seemingly legitimate content, unaware of the underlying malicious actions. |
Scenario With X-Frame-Options
Here is a scenario that shows how this works when a bad actors performs an attack and the X-Frame-Options is set:
| 1 | The target website includes the X-Frame-Options header in its HTTP response. |
| 2 | The browser receives the header and follows the specified framing policy. |
| 3 | If the policy is DENY or SAMEORIGIN, the browser prevents the target site from being framed by an external domain. |
| 4 | This mitigates the risk of clickjacking attacks, as the attacker cannot embed the target site in an iframe. |
Example Configuration of X-Frame-Options
DENY
X-Frame-Options: DENY
SAMEORIGIN
X-Frame-Options: SAMEORIGIN
ALLOW-FROM
X-Frame-Options: ALLOW-FROM https://trusted-site.com
Configure X-Frame-Options via Web Servers
More detailed instructions on how to configure security headers available here. Below assumes you know where to configure the headers relative to web server type:
Apache
<IfModule mod_headers.c>
Header always append X-Frame-Options SAMEORIGIN
</IfModule>NGINX
add_header X-Frame-Options SAMEORIGIN;