X-Frame-Options is a security HTTP response header that tells a browser whether it should be allowed to render a web page inside a <frame>, <iframe>, or <object> tag. Its main purpose is to prevent clickjacking attacks.
Why Use X-Frame-Options?
Clickjacking is a type of cyber attack where malicious sites embed your page in a transparent iframe to trick users into interacting with invisible elements—potentially revealing sensitive data or triggering unintended actions. Setting the correct X-Frame-Options header ensures your content can’t be embedded by untrusted domains.
How Does X-Frame-Options Work?
| Directive | Description |
|---|---|
DENY | The page cannot be displayed in a frame, regardless of origin |
SAMEORIGIN | The page can only be embedded by pages from the same domain |
Better Alternative: Content Security Policy (CSP)
While X-Frame-Options offers solid baseline protection, CSP with frame-ancestors is the modern recommendation for finer control:
Content-Security-Policy: frame-ancestors ‘self’
This achieves the same anti-clickjacking effect and more across modern browsers.
Key Takeaways
- Set
X-Frame-Optionsto “SAMEORIGIN” or “DENY” for clickjacking protection - If you want your site to be loaded in an iFrame on a different domain, don’t set the X-Frame-Options header.
- Consider using CSP
frame-ancestorsfor broader compatibility and advanced control - Combine with other headers (like
X-XSS-Protection,Content-Security-Policy, andStrict-Transport-Security) for a more secure web application