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?
📊

Security Scoring System

Get an instant security rating (0-5) for your CSP configuration with criticality assessment. Our algorithm considers all required directives, best practices, and security implications to provide an accurate security score.

🔌

Free Browser Extension

Download our free Chrome/Edge extension to view and test CSPs on any website. View Mode automatically analyzes CSPs, while Test Mode lets you inject and test your own policies in real-time.

🌐

Test in Browser

Generate a complete test HTML page with your CSP applied as a meta tag. Includes test content, violation reporting instructions, and multiple testing methods - perfect for validating your policy before deployment.

📚

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, with warnings for incomplete configurations.

🔒

Comprehensive Security Review

Our built-in Review CSP feature provides expert security recommendations, highlighting best practices, potential vulnerabilities, and missing critical directives in your CSP configuration.

✅

Smart Value Management

Toggleable special values (like 'self' and 'none') prevent duplicates and conflicts. Automatic mutual exclusivity handling ensures 'none' can't coexist with other values.

🌐

Domain Validation

Interactive modal dialogs for adding domains with real-time validation. Supports wildcards, IP addresses, localhost, and proper domain formatting. Option to allow any HTTPS source.

💻

100% Client-Side

Everything runs in your browser - no data is sent to any server. Your CSP configurations stay private and secure on your device. Perfect for sensitive environments.

📋

One-Click Copy

Copy your complete CSP header to clipboard instantly. Ready to paste into your server configuration, test page, or browser extension immediately.

🎯

Required Field Indicators

Visual indicators show which directives are required when enabled, helping you build a complete and secure CSP configuration. Prevents incomplete policies.

🔄

Auto-Enable Directives

Directives automatically enable when you add values or click special value buttons, streamlining your workflow and reducing configuration steps.

🧹

Easy Clear Buttons

One-click clear buttons on every directive input field make it easy to reset and reconfigure values. Buttons appear automatically when fields have content.

📖

Implementation Guides

Built-in guides for adding CSP to various platforms including Apache, Nginx, Express.js, .NET, PHP, and more. Step-by-step instructions for every major web server and framework.

Configure Your CSP

Your CSP Header

Content-Security-Policy:

🔌 Browser Extension

Test your CSP on any website with our free browser extension:

Features:

  • Paste your CSP directly from this tool
  • Toggle on/off with one click
  • Test CSP on any website instantly
  • View violations in browser console

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.

💡 Pro Tip: Always test your CSP in a development environment first. Use your browser's developer tools to check for CSP violations before deploying to production.

Browser Extension Installation Guide

Follow these steps to install and use the IntegSec CSP Tester browser extension:

Step 1: Download the Extension

Click the "Download Extension" button above to download the extension ZIP file.

Step 2: Extract the ZIP File

Extract the downloaded integsec-csp-tester.zip file to a folder on your computer. Remember where you extracted it.

Step 3: Install in Chrome/Edge

  1. Open Chrome or Edge browser
  2. Navigate to chrome://extensions/ (or edge://extensions/ for Edge)
  3. Enable "Developer mode" (toggle in top-right corner)
  4. Click "Load unpacked"
  5. Select the extracted extension folder
  6. The extension icon should now appear in your browser toolbar

Step 4: Use the Extension

  1. Click the extension icon in your browser toolbar
  2. Copy your CSP from this tool and paste it into the extension
  3. Toggle "Enable CSP Injection" to ON
  4. Navigate to any website you want to test
  5. Open the browser console (F12) to see CSP violation reports

Step 5: Testing

With the extension enabled, visit your website. The extension will inject your CSP header, and the browser will report any violations in the console. Look for messages like:

Refused to load the script '...' because it violates the following Content Security Policy directive
💡 Tip: You can toggle the extension on/off at any time. When disabled, websites will load normally without CSP restrictions.

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)
Explore IntegSec PTaaS →

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.