Build a Content-Security-Policy header without memorizing the syntax.

// Meta tag version if (!reportOnly) { html += <div style="font-weight:bold;margin-top:1em;margin-bottom:0.3em;">HTML Meta Tag</div> <pre style="padding:1em;background:#1e293b;color:#e2e8f0;border-radius:6px;overflow-x:auto;font-size:0.82em;word-break:break-all;white-space:pre-wrap;">&lt;meta http-equiv="Content-Security-Policy" content="${header.replace(/"/g,'&amp;quot;')}" /&gt;</pre>; }

// Nginx html += <div style="font-weight:bold;margin-top:1em;margin-bottom:0.3em;">Nginx</div> <pre style="padding:1em;background:#1e293b;color:#e2e8f0;border-radius:6px;overflow-x:auto;font-size:0.82em;word-break:break-all;white-space:pre-wrap;">add_header ${headerName} "${header}" always;</pre>;

document.getElementById(‘csp-output’).innerHTML = html; }

buildFields();

What each directive does

• default-src — Fallback for anything not explicitly set
• script-src — Where JavaScript can load from
• style-src — Where CSS can load from
• img-src — Where images can load from
• connect-src — Where fetch/XHR/WebSocket can connect
• frame-ancestors — Who can embed your page in an iframe (clickjacking protection)

Tips

• Start with default-src 'self' and add exceptions
• Use Report-Only mode first to test without breaking your site
• Avoid 'unsafe-inline' and 'unsafe-eval' when possible
• Add specific domains instead of * (e.g., https://cdn.example.com)