AlteredIdea: Just Another Thought
Hash GeneratorHMAC GeneratorPassword StrengthAES Encrypt / DecryptJWT DebuggerSecure Token GeneratorCSP BuilderChecksum VerifierSecurity HeadersRSA Key GeneratorWebsite ScannerBcrypt HasherCRC32 ChecksumDES / 3DES CipherXOR Cipher

CSP Builder

Visual builder for Content-Security-Policy headers. Toggle directives, pick sources, and copy the header or meta tag.

Directives

Output

Content-Security-Policy
default-src 'self'
<meta> equivalent
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

1 directive enabled

Build a Content Security Policy header visually: the strongest XSS defence available

Content Security Policy is the single most effective HTTP header for preventing Cross-Site Scripting (XSS) and data-injection attacks. By whitelisting the exact origins allowed to load scripts, styles, fonts, and media, you prevent attackers from injecting and executing malicious code even if they find an injection point in your HTML.

This visual builder lets you toggle each of the 14 standard directives, pick common source keywords, and add custom domain allowlists. The live output updates as you configure, and you can copy either the raw header value (for server config) or an HTML meta tag equivalent.

How to use: step by step

  1. 1
    Enable the directives you need
    Tick the checkboxes for each CSP directive. default-src is enabled by default as the fallback for all fetch types.
  2. 2
    Choose sources for each directive
    Click source tokens like 'self', 'unsafe-inline', or 'data:' to toggle them. Active sources turn red.
  3. 3
    Add custom domains
    Type extra domains (e.g., cdn.example.com) in the custom sources field. Separate multiple values with spaces.
  4. 4
    Copy the header value
    Click Copy next to the Content-Security-Policy output to copy the raw header value for use in your server config.
  5. 5
    Or copy the meta tag
    If you cannot set HTTP headers, use the meta tag equivalent. Copy it and paste inside the <head> of your HTML.

Related Tools

#️⃣

Hash Generator

Compute MD5, SHA-1, SHA-256, SHA-384, and SHA-512 hashes for text or files. All hashes shown simultaneously with one-click copy.

🔐

HMAC Generator

Generate HMAC-SHA-256, HMAC-SHA-384, and HMAC-SHA-512 message authentication codes with a secret key.

💪

Password Strength

Analyze password entropy, character composition, and estimated crack time across different attack scenarios.

🔒

AES Encrypt / Decrypt

Encrypt and decrypt text with AES-256-GCM. Password-derived key via PBKDF2. Output includes salt and IV: fully self-contained.

Frequently Asked Questions

What is a Content Security Policy?
A CSP is an HTTP response header that tells the browser which origins are allowed to load scripts, styles, images, and other resources on your page. It is the most powerful defence against Cross-Site Scripting (XSS) attacks.
Where do I set the CSP header?
In your web server config (Nginx, Apache), your CDN (Cloudflare, Fastly), your framework (Next.js headers(), Express middleware), or as an HTML meta tag.
What does 'self' mean in a CSP?
'self' refers to the same origin as the page: same scheme, host, and port. It allows resources from your own domain without opening up the entire web.
Why is 'unsafe-inline' dangerous?
'unsafe-inline' allows inline scripts and styles, which is exactly what XSS payloads use. Avoid it unless absolutely necessary. Prefer nonces or hashes instead.
What is the difference between default-src and script-src?
default-src is the fallback used when a more specific directive (like script-src) is not defined. More specific directives override default-src for their resource type.
Does CSP affect how my page looks?
If you block a stylesheet or image origin your page currently loads from, it will break. Use the browser console (CSP violation reports) to identify blocked resources before deploying.
What is 'strict-dynamic'?
'strict-dynamic' propagates trust to scripts loaded by already-trusted scripts. It is used in nonce-based CSPs to avoid whitelisting every third-party domain explicitly.
Can I use CSP with a meta tag?
Yes, but with limitations. The meta tag CSP does not support report-uri, frame-ancestors, or sandbox directives. HTTP headers are the preferred method.
How do I avoid breaking my site when adding a CSP?
Start with Content-Security-Policy-Report-Only to log violations without enforcing them. Review the violations, adjust your policy, then switch to enforcement mode.

AlteredIdea vs alternatives

vs online hashing sites: Many send your data to a server to hash it. AlteredIdea runs all cryptographic operations in your browser using the Web Crypto API: your sensitive data never leaves your device.

vs openssl / command line: No terminal, no setup. Just paste and get results instantly.

vs library code: No coding required. Instant visual output with copy-to-clipboard.

Share:Share on XShare on LinkedIn