X-Frame-Options
Learn how X-Frame-Options prevents clickjacking attacks by controlling iframe embedding.
X-Frame-Options is a HTTP response header that controls whether your website can be embedded in frames, iframes, or objects. This simple but effective security measure helps prevent clickjacking attacks where malicious sites trick users into clicking on hidden elements.
What is Clickjacking?#
Clickjacking (also known as UI redress attack) is a technique where an attacker embeds your website in a transparent or opaque iframe on a malicious page. The attacker positions the iframe so that when users click on seemingly innocent elements on the malicious page, they are actually clicking on buttons, links, or forms on your hidden website. This can lead to unauthorized actions performed with the victim's authenticated session.
- Attackers overlay your site with a transparent iframe positioned precisely over their fake UI
- Users click what they think is a button on the attacker's page but actually interact with your site
- Authenticated users can unknowingly transfer funds, change passwords, or grant permissions
- Likejacking uses this technique to hijack social media likes and follows
An attacker creates a page showing a 'Win a Prize' button. Underneath, your banking site's 'Transfer Funds' button is loaded in a transparent iframe. When the user clicks 'Win a Prize', they actually click 'Transfer Funds' on your banking site using their active session.
How X-Frame-Options Works#
X-Frame-Options is a HTTP response header that instructs browsers whether your page can be rendered inside a frame, iframe, embed, or object element. When the browser encounters this header, it checks the framing context against the policy and blocks rendering if the policy is violated. The browser displays an error or blank frame instead of your content.
- DENY prevents all framing regardless of the source
- SAMEORIGIN allows framing only by pages from your own origin
- ALLOW-FROM specified a single allowed origin (deprecated and poorly supported)
- The browser enforces the policy before rendering the framed content
X-Frame-Options vs CSP frame-ancestors#
Content Security Policy's frame-ancestors directive is the modern replacement for X-Frame-Options. It offers more flexibility, including the ability to specify multiple allowed origins. However, X-Frame-Options still has value as a fallback for older browsers that do not support CSP.
- CSP frame-ancestors supports multiple origins: frame-ancestors 'self' https://trusted.com
- X-Frame-Options ALLOW-FROM only supports a single origin and is deprecated
- When both are present, CSP frame-ancestors takes precedence in modern browsers
- Setting both headers provides the widest browser compatibility
Set both X-Frame-Options: SAMEORIGIN and CSP frame-ancestors 'self' for maximum compatibility. Modern browsers use the CSP directive while older browsers fall back to X-Frame-Options.
Implementation Guide#
Choose DENY if your pages should never be framed, or SAMEORIGIN if you need to frame your own pages (for example, in admin panels or dashboards).
# Apache (.htaccess)
Header always set X-Frame-Options "SAMEORIGIN"
# Nginx
add_header X-Frame-Options "SAMEORIGIN" always;
# Node.js / Express
app.use((req, res, next) => {
res.setHeader('X-Frame-Options', 'SAMEORIGIN');
next();
});
# Combined with CSP for full protection
# Apache
Header always set Content-Security-Policy "frame-ancestors 'self'"
Header always set X-Frame-Options "SAMEORIGIN"
# Nginx
add_header Content-Security-Policy "frame-ancestors 'self'" always;
add_header X-Frame-Options "SAMEORIGIN" always;Testing and Verification#
Test your X-Frame-Options implementation to ensure it blocks unauthorized framing while allowing legitimate use cases.
- Create a test HTML page that attempts to iframe your site from a different domain
- Verify the browser console shows a framing violation error
- Check that legitimate same-origin framing still works if you use SAMEORIGIN
- Use browser Developer Tools Network tab to confirm the header is present
- Test across multiple browsers since X-Frame-Options handling can vary slightly
<!-- Test page: save as test.html and open from a different domain -->
<iframe src="https://yoursite.com" width="800" height="600"></iframe>
<!-- If X-Frame-Options is working, the iframe will show an error -->
# Verify with curl
curl -sI https://yoursite.com | grep -i x-frame
# Expected: X-Frame-Options: SAMEORIGINBest Practices#
Follow these guidelines to implement effective clickjacking protection across your application.
- Use DENY for pages that should never be framed (login pages, payment forms, settings)
- Use SAMEORIGIN for pages that need internal framing (dashboard widgets, embedded previews)
- Always combine with CSP frame-ancestors for modern browser support
- Apply the header consistently across all pages, not just sensitive ones
- Consider JavaScript-based frame-busting as an additional layer for critical pages
- Audit third-party widgets and integrations that may require framing exceptions
Implementation Examples#
Deny All Framing
X-Frame-Options: DENYPrevents the page from being displayed in any frame
Explanation: This is the most secure option - your page cannot be embedded in any frame, iframe, or object element.
Same Origin Only
X-Frame-Options: SAMEORIGINAllows framing only by pages from the same origin
Explanation: Your page can be embedded in frames, but only by other pages from your own domain.
Allow Specific Domain
X-Frame-Options: ALLOW-FROM https://trusted-site.comAllows framing only by a specific trusted domain
Explanation: Note: This directive is deprecated and not supported by all browsers. Use CSP frame-ancestors instead.
Key Directives#
DENY
Prevents any framing of the page
X-Frame-Options: DENYSAMEORIGIN
Allows framing only by the same origin
X-Frame-Options: SAMEORIGINALLOW-FROM
Allows framing by specific origin (deprecated)
X-Frame-Options: ALLOW-FROM https://example.comReferences#
Test Your X-Frame-Options Configuration
Scan your site to check if X-Frame-Options is properly configured.