How to setup nonce with NextJS
Learn how to properly setup nonce with NextJS to ensure a secure CSP configuration.
2024-12-03
5 min read
Theotime Quere
Read more →
Main menu
All articles
Next Article
How to setup nonce with NextJS
CSP frame-ancestors vs X-Frame-Options
Protecting against clickjacking attacks is crucial for web security. Both X-Frame-Options header and CSP's frame-ancestors directive provide mechanisms to control how your website can be embedded in frames, iframes, or objects.
Understanding X-Frame-Options
X-Frame-Options is an HTTP response header that allows you to control whether a browser should be allowed to render a page in a <frame>, <iframe>, <embed> or <object>. This helps avoid clickjacking attacks.
Available Values
DENY
Prevents any domain from framing the content
SAMEORIGIN
Allows framing only by pages on the same origin
ALLOW-FROM uri (Deprecated)
Allowed framing by specific domains (no longer supported by modern browsers)
Example of X-Frame-Options header
X-Frame-Options: DENYImplementation in different web servers:
Add to your server block:
add_header X-Frame-Options "DENY";Add to your .htaccess or configuration:
Header set X-Frame-Options "DENY"CSP frame-ancestors Directive
The frame-ancestors directive is part of Content Security Policy and provides more granular control over who can embed your content.
Learn more about Content Security Policy
Directive Values
'none'
Prevents any embedding
'self'
Allows embedding only from the same origin
URI/Domain
Allows embedding from specific sources
Example of frame-ancestors directive
Content-Security-Policy: frame-ancestors 'self' https://trusted.com;Meta Tag Limitation
The frame-ancestors directive is not supported in meta tags. It must be set via HTTP header.
Learn about CSP meta tags limitations
Header Priority in Modern Browsers
When both X-Frame-Options and frame-ancestors are present, modern browsers will prioritize the frame-ancestors directive and ignore X-Frame-Options completely.
Example of conflicting policies
X-Frame-Options: DENY
Content-Security-Policy: frame-ancestors https://allowed-domain.com;Browser Behavior
In this example, modern browsers will allow framing from allowed-domain.com, completely ignoring the DENY from X-Frame-Options.
Modern Browsers
Will only enforce frame-ancestors when present, ignoring X-Frame-Options
Legacy Browsers
Will fall back to X-Frame-Options if frame-ancestors is not supported
Important Note
Due to this priority behavior, ensure your frame-ancestors directive is at least as restrictive as your X-Frame-Options header to maintain security across all browsers.
Comparing Both Approaches
X-Frame-Options
Simple to implement but limited in functionality
frame-ancestors
Supports multiple domains
Widely supported in modern browsers
Provides more granular control
Best Practices
Use both headers for maximum compatibility
Prefer frame-ancestors for modern browsers
Use DENY by default unless embedding is required
Regularly audit allowed domains
Check your frame protection configuration
Example of using both headers
Content-Security-Policy: frame-ancestors 'none';
X-Frame-Options: DENYRecommendation
While using both headers provides the best coverage, frame-ancestors is the modern standard and should be your primary method of control.
Common Use Cases
Public Content
Use 'none' to prevent any framing
Internal Tools
Use 'self' to allow same-origin framing
Partner Integration
Specify allowed partner domains
Conclusion
While X-Frame-Options provides basic protection against clickjacking, the CSP frame-ancestors directive offers more flexibility and better browser support. Using both headers ensures maximum compatibility across browsers while providing robust protection against framing-based attacks.
Continue Reading
Get started with CSP
Learn how to properly setup your CSP to ensure a secure configuration.
2024-12-03
5 min read
Theotime Quere
Read more →
Main menu
All articles
Written by
Theotime Quere