Content Security Policy

Protect pages from XSS attacks with Content-Security-Policy headers and meta tags.

Overview

Content Security Policy (CSP) is a security layer that restricts which resources the browser is allowed to load for your page preventing cross-site scripting (XSS), clickjacking, and data injection attacks. CSP is typically set as an HTTP response header (Content-Security-Policy), but can also be set with a <meta http-equiv="Content-Security-Policy"> tag for sites without server control (static hosting). CSP works by whitelisting sources. The browser refuses to execute scripts, load images, or connect to APIs not explicitly allowed in your policy.

Key Points

•HTTP header is preferred over meta tag meta doesn't support frame-ancestors or report-uri
•default-src: the fallback policy for all resource types not explicitly listed
•script-src: controls which scripts may execute "self" means same origin only
•'unsafe-inline' and 'unsafe-eval' weaken CSP significantly avoid them
•Use nonces (<script nonce="abc123">) to allow specific inline scripts safely
•report-to / report-uri directives send CSP violations to a logging endpoint

Examples

CSP via meta tag

<head>
  <!-- Strict CSP: only same-origin scripts and styles -->
  <meta http-equiv="Content-Security-Policy"
        content="default-src 'self'; img-src 'self' data: https:; font-src 'self' https://fonts.gstatic.com">
</head>

Meta CSP cannot block frames (no frame-ancestors support). Use HTTP header when possible.

Common CSP directives

Content-Security-Policy:
  default-src 'self';          /* fallback for all types */
  script-src 'self' cdn.example.com;  /* JS: self + CDN */
  style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
  img-src 'self' data: https:;        /* images from any HTTPS */
  font-src 'self' https://fonts.gstatic.com;
  connect-src 'self' https://api.example.com;
  frame-ancestors 'none';             /* block all iframing (clickjacking) */
  base-uri 'self';                    /* restrict <base> tag */
  form-action 'self';                 /* forms only submit to same origin */

Using nonces for inline scripts

<!-- Server generates a random nonce per request -->
<meta http-equiv="Content-Security-Policy"
      content="script-src 'nonce-abc123xyz' 'self'">

<!-- Only this script with matching nonce will execute -->
<script nonce="abc123xyz">
  console.log('This inline script is allowed by nonce');
</script>

<!-- This script has no nonce BLOCKED -->
<script>
  alert('This is blocked!');
</script>

Nonces must be cryptographically random and unique per HTTP response.

Common Mistakes

Using 'unsafe-inline' for scripts allows any inline script including injected XSS code
Adding too many domains to script-src each trusted domain is a potential XSS source
Starting with Content-Security-Policy-Report-Only to test policy without breaking the site

Note

Start with Content-Security-Policy-Report-Only mode. Your policy is enforced as a report-only violations are logged but not blocked. Fix violations, then switch to enforcement mode.

Content Security Policy

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What does Content-Security-Policy protect against primarily?