X-Frame-Options is an HTTP response header that tells a browser whether it can display a webpage inside a frame or iframe. It prevents other websites from embedding your content without permission. Implementing this header is a primary defense against clickjacking and other interface-based attacks.
What is X-Frame-Options?
The X-Frame-Options header (XFO) allows site owners to control whether their pages are rendered in elements like <frame>, <iframe>, <embed>, or <object>. Its main purpose is to ensure that a site’s content is not hidden or layered under another site's interface. [This helps sites avoid clickjacking attacks and some cross-site leaks] (MDN).
Why X-Frame-Options matters
Using this header protects your site and your users from several specific security threats:
- Clickjacking protection: Prevents attackers from overlaying a transparent iframe over your page to trick users into clicking buttons or links they cannot see.
- UI Redress Attack prevention: Stops malicious actors from manipulating your site's interface to mislead users into performing unintended actions.
- Data security: [It mitigates framesniffing, a technique used to steal data by hosting content in a cross-domain IFRAME] (Microsoft).
- Phishing reduction: Ensures your content only appears on authorized domains, making it harder for attackers to mimic your site for credential theft.
How X-Frame-Options works
When a browser receives a request to load a page, it looks for the X-Frame-Options header in the HTTP response. If the header is present, the browser compares the framing request against the site's policy. If the request violates the policy, the browser will not render the framed content.
Available Directives
| Directive | Description | Use Case |
|---|---|---|
| DENY | [Blocks the document from being loaded in any frame, regardless of the origin] (MDN). | Use when the page should never be embedded. |
| SAMEORIGIN | Allows the page to be framed only if the parent site has the same origin as the page itself. | Use when you need to embed your own pages. |
| ALLOW-FROM | [This directive is obsolete and ignored by modern browsers] (MDN). | Avoid using for modern security. |
Best practices
- Choose SAMEORIGIN for general use: This provides a balance between security and functionality, allowing you to use iframes for your own internal site features.
- Use DENY for sensitive pages: For login pages or administrative dashboards that never need embedding, DENY offers the strongest protection.
- Move to Content Security Policy (CSP): [Modern architectures should use the frame-ancestors directive in CSP instead of X-Frame-Options] (Indusface) for more flexibility.
- Test after deployment: Check that legitimate framing needs, such as third-party integrations or internal tools, are not accidentally blocked.
- Configure at the server level: Apply the header globally through your server configuration (Nginx, Apache, or IIS) to ensure it covers every page.
Common mistakes
Mistake: Putting X-Frame-Options in a <meta> tag.
Fix: [The header must be sent as an HTTP response header, as meta tags are ignored] (MDN).
Mistake: Relying on ALLOW-FROM.
Fix: Because many browsers no longer support this, use CSP frame-ancestors to permit specific third-party domains.
Mistake: Setting DENY while needing internal iframes.
Fix: [If the header is set to DENY, attempts to load the page in a frame will fail even for the same site] (Ewon). Change the directive to SAMEORIGIN.
Examples
Apache Configuration
To set the header to SAMEORIGIN for all pages in Apache, add this line to your configuration:
Header always set X-Frame-Options "SAMEORIGIN"
Nginx Configuration
To block all framing in Nginx, add this to your server or location block:
add_header X-Frame-Options DENY always;
IIS Configuration
In IIS, you can add the header through the Web.config file:
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="X-Frame-Options" value="SAMEORIGIN" />
</customHeaders>
</httpProtocol>
</system.webServer>
FAQ
What is the difference between DENY and SAMEORIGIN?
DENY stops all framing attempts from any site, including your own. SAMEORIGIN allow you to frame your own pages as long as the parent site and the framed page share the same domain and origin.
Why is my X-Frame-Options header not working?
It is likely because you are attempting to set it via a <meta> tag in the HTML. Browsers only respect this instruction when it is sent as part of the HTTP response header from the server. Additionally, older browsers may not support the header at all.
Does X-Frame-Options affect SEO?
While not a direct ranking factor, it affects how content is shared and viewed. By preventing unauthorized embedding, you ensure that traffic remains on your own domain rather than being siphoned through third-party frames.
Can I allow multiple specific domains?
The standard X-Frame-Options header does not support multiple domains. To allow a specific list of external sites to frame your content, you must use the Content Security Policy (CSP) frame-ancestors directive.
What happens if a browser doesn't support XFO?
If a browser does not support the header, it will ignore the instruction and render the frame anyway. This is why security should include multiple layers, such as CSP.
