frame-ancestors vs X-Frame-Options
Learn the differences between CSP frame-ancestors directive and X-Frame-Options header, and how to properly protect your site from clickjacking attacks.
2024-02-25
3 min read

Theotime Quere
Read more →
Main menu
All articles
Next Article
CSP scanner & evaluator
Content Security Policy helps protect your website from attacks like XSS and code injection. You can add CSP using either HTTP headers or meta tags in your HTML, each method looks the same, but some differences exist and need to be highlighted.
A Content Security Policy defines which resources are allowed to be loaded and executed on your webpage. It acts as a whitelist, explicitly stating which sources are trusted.
Example of a simple CSP policy
Content-Security-Policy: default-src 'self'; script-src 'self' https://website.com
The most secure and recommended way to implement CSP is through HTTP headers:
Example of a simple CSP policy in HTTP headers
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.com
Here's how to implement CSP in http headers in popular web servers:
Add this to your Nginx server block configuration:
server {
# ... other configurations ...
add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://trusted.com;";
# For testing with Report-Only mode
add_header Content-Security-Policy-Report-Only "default-src 'self'; report-uri https://report.centralcsp.com/your-endpoint;";
# ... rest of your configuration ...
}
Add this to your Apache configuration file (.htaccess or httpd.conf):
# Enable mod_headers if not already enabled
<IfModule mod_headers.c>
# Set CSP header
Header set Content-Security-Policy "default-src 'self'; script-src 'self' https://trusted.com;"
# For testing with Report-Only mode
Header set Content-Security-Policy-Report-Only "default-src 'self'; report-uri https://report.centralcsp.com/your-endpoint;"
</IfModule>
Best Practice
Using HTTP headers ensures that the CSP is enforced before any content is loaded, providing maximum security coverage.
CSP can also be implemented using HTML meta tags, though this method has limitations:
Example of a simple CSP policy in meta tags
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSP Meta Tag Implementation -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted.com">
<title>Your Website</title>
</head>
<body>
<!-- Your website content -->
</body>
</html>
No Report-Only Mode
Meta tags don't support Content-Security-Policy-Report-Only, making it impossible to test policies without potentially breaking your site. Learn more about Report-Only mode.
Limited Directive Support
frame-ancestors
The frame-ancestors directive is not supported in meta tags.
sandbox
The sandbox directive is not supported in meta tags.
JavaScript Execution Timing
Browsers might execute JavaScript before processing the CSP when using meta tags, as the policy only takes effect after HTML parsing begins.
Security Risk
If an attacker manages to inject JavaScript before the CSP meta tag is processed, they could bypass the policy entirely. This creates a race condition vulnerability that doesn't exist with HTTP headers.
When both HTTP headers and meta tags are present, browsers will combine both policies using the most restrictive rules from each.
Example of a simple CSP policy in HTTP headers
Content-Security-Policy: default-src 'self';
Example of a simple CSP policy in meta tags
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://website.com;">
Result
In this example, even though the meta tag allows 'self' and website.com, the final policy will only allow 'self' because the HTTP header is more restrictive. Resources from website.com will be blocked by the policy in the HTTP header.
Always prefer HTTP headers for CSP implementation.
Use our CSP Scanner to validate your policies.
CSP reporting endpoint. Use our CSP reporting endpoint to monitor violations.
Only use meta tags when HTTP headers cannot be modified.
Test your policies thoroughly using Report-Only mode before enforcement. Learn more about Report-Only mode.
Follow these steps to implement and monitor your Content Security Policy effectively:
Sign up for a CentralCSP account in a minute. Get 14 days free trial.
Once logged in, register you application and get your reporting endpoint. You'll receive a unique endpoint URL that looks like: https://report.centralcsp.com/[your-endpoint-id]
Add your new endpoint URL to your CSP configuration using both report-uri and report-to directives for maximum browser compatibility.
Access your CentralCSP dashboard to view and analyze any CSP violations in real-time. You'll receive detailed reports about blocked resources and potential security issues.
First Tier Benefits
The first tier includes all essential features: real-time violation reporting, detailed analytics, and support for multiple domains. Upgrade only when you need advanced features like custom alerting, API access, or higher volume reporting.
While meta tags provide an alternative way to implement CSP, HTTP headers remain the recommended approach due to better feature support, earlier policy enforcement, and complete directive coverage. Only use meta tags when technical constraints prevent you from modifying HTTP headers.
Learn the differences between CSP frame-ancestors directive and X-Frame-Options header, and how to properly protect your site from clickjacking attacks.
2024-02-25
3 min read
Theotime Quere
Read more →
Understanding the difference between enforce and report only modes in Content-Security-Policy implementation.
2024-11-18
5 min read
Theotime Quere
Read more →
Main menu
All articles
Written by
Theotime Quere
CentralSaaS © 2025