0Pricing
Frontend Academy · Lesson

Content Security Policy: nonce and hash

Write a strict CSP with nonces for inline scripts, hashes for known snippets, and report-uri to monitor violations in production.

CSP Recap

CSP is an HTTP header that whitelists what the browser is allowed to load — scripts, styles, images, fonts, frames, connections. Defence in depth: even if XSS gets past your filters, CSP often stops the payload.

CSP Header Anatomy

Each directive lists allowed sources. 'self' means same-origin. Specific URLs are allowed too.

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://cdn.example.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  connect-src 'self' https://api.example.com;
  font-src 'self' https://fonts.gstatic.com;
  frame-ancestors 'none';
  base-uri 'self';

All lessons in this course

  1. XSS Prevention: Output Encoding CSP
  2. CSRF: SameSite Cookies and Tokens
  3. Content Security Policy: nonce and hash
  4. OAuth Flows from the Frontend
← Back to Frontend Academy