Important : While the `X-Frame-Options` header is still supported, it's recommended to use the Content Security Policy `frame-ancestors` directive instead. CSP provides more granular control and better browser support for framing policies. The `X-Frame-Options` header can be used alongside CSP as a fallback for older browsers. See our X-Frame-Options VS Frame-Ancestors article for more details.
X-Frame-Options HTTP Header
TheX-Frame-Options HTTP response header is a security header that controls whether a webpage can be displayed in a <frame>, <iframe>, <embed>, or <object>. Its primary purpose is to prevent clickjacking attacks by ensuring your content isn't embedded on unauthorized websites.
Understanding X-Frame-Options
TheX-Frame-Options header provides three directives to control how your content can be embedded:
Most restrictive option - prevents framing completely
X-Frame-Options: DENYAllows framing only from the same origin
X-Frame-Options: SAMEORIGINAllows framing from a specific domain (deprecated)
X-Frame-Options: ALLOW-FROM https://trusted-domain.comDirectives Explained
DENY
The most restrictive option that prevents the page from being displayed in a frame on any site, including your own.Example of DENY directive
X-Frame-Options: DENYSAMEORIGIN
Allows the page to be displayed in a frame only if the site embedding it has the same origin (same protocol, domain, and port).Example of SAMEORIGIN directive
X-Frame-Options: SAMEORIGINALLOW-FROM
Important : The `ALLOW-FROM` directive is deprecated and has limited browser support. For modern applications, use the `frame-ancestors` directive in Content Security Policy instead.
Implementation Examples
Nginx Configuration
Nginx configuration for X-Frame-Options
add_header X-Frame-Options "sameorigin" always;Apache Configuration
Apache configuration for X-Frame-Options
Header always set X-Frame-Options "sameorigin"Modern Alternative: CSP frame-ancestors
Content Security Policy provides a more flexible alternative through itsframe-ancestors directive :
See our Docs on Frame-Ancestors
Equivalent to X-Frame-Options: DENY
Content-Security-Policy: frame-ancestors 'none';Equivalent to X-Frame-Options: SAMEORIGIN
Content-Security-Policy: frame-ancestors 'self';Allow multiple trusted domains (more flexible than ALLOW-FROM)
Content-Security-Policy: frame-ancestors https://trusted-domain1.com https://trusted-domain2.com;Browser Support
While X-Frame-Options is widely supported, CSP's frame-ancestors directive offers better flexibility and is the recommended approach for modern web applications.
Related Resources
- MDN Web Docs: X-Frame-Options
- MDN Web Docs: CSP frame-ancestors
- Frame-Ancestors Docs
- Frame-Ancestors over X-Frame-Options
Conclusion
While X-Frame-Options provides basic protection against clickjacking, modern web applications should consider using Content Security Policy's frame-ancestors directive for more flexible and comprehensive control over how their content can be embedded.