What is Content Security Policy?
Content Security Policy (CSP) is a security feature that helps protect your website from attacks like Cross-Site Scripting (XSS) and data injection. It tells browsers which sources of content are trusted and allowed to load on your site.
Why Choose IntegSec CSP Builder?
Plain English Explanations
Every CSP directive includes clear, non-technical explanations of what it does and how it improves your website's security. Perfect for beginners and experts alike.
Real-Time Validation
Get instant visual feedback with error indicators, validation warnings, and security recommendations. See your CSP header update as you build it.
Security Recommendations
Our built-in testing feature provides expert security recommendations, highlighting best practices and potential vulnerabilities in your CSP configuration.
Smart Value Management
Toggleable special values (like 'self' and 'none') prevent duplicates, while domain validation ensures proper formatting. Clear buttons for easy editing.
Domain Validation
Interactive modal dialogs for adding domains with real-time validation. Supports wildcards, IP addresses, and proper domain formatting.
100% Client-Side
No server required. All processing happens in your browser, ensuring privacy and fast performance. Works offline after initial load.
Easy Export
One-click copy to clipboard functionality. Get your complete CSP header ready to deploy to your web server configuration.
Responsive Design
Works seamlessly on desktop, tablet, and mobile devices. Sticky preview panel keeps your CSP header visible as you scroll.
Configure Your CSP
Your CSP Header
Content-Security-Policy:
How to Add CSP to Your Website
After copying your CSP header, add it to your web server configuration. Here are instructions for common platforms:
Apache (.htaccess)
Add this line to your .htaccess file:
Header set Content-Security-Policy "YOUR_CSP_HEADER_HERE"
Note: Make sure the mod_headers module is enabled.
Nginx
Add this to your server block in nginx.conf:
add_header Content-Security-Policy "YOUR_CSP_HEADER_HERE" always;
Node.js (Express)
Use the helmet package:
const helmet = require('helmet');
app.use(helmet({
contentSecurityPolicy: {
directives: {
defaultSrc: ["'self'"],
// Add your directives here
}
}
}));
PHP
Add this at the top of your PHP file or in your configuration:
header("Content-Security-Policy: YOUR_CSP_HEADER_HERE");
Cloudflare
Go to Security → Page Rules or use Transform Rules to add the CSP header.
Azure App Service
Add to web.config in the <system.webServer> section:
<httpProtocol>
<customHeaders>
<add name="Content-Security-Policy" value="YOUR_CSP_HEADER_HERE" />
</customHeaders>
</httpProtocol>
HTML Meta Tag (Not Recommended)
You can also add CSP via a meta tag in your HTML, but HTTP headers are preferred:
<meta http-equiv="Content-Security-Policy" content="YOUR_CSP_HEADER_HERE">
⚠️ Note: Meta tags don't support all CSP features (like frame-ancestors). Use HTTP headers when possible.
Ready for Expert Security Testing?
You've built a strong CSP. Now ensure your entire web application is secure. IntegSec's PTaaS team provides continuous penetration testing for web apps, APIs, cloud infrastructure, and more.
- Continuous testing with unlimited retests
- Expert guidance on remediation
- Flexible plans starting at 1 week/month
- Supports Compliance (SOC2, ISO, HIPAA, PCI-DSS)
Understanding CSP Directives
Each CSP directive is explained in plain English, making it easy to understand what it does and how it protects your website. Click on any directive below to learn more about its purpose and security benefits.