CSP and nonce

Limit inline scripts with CSP headers and a script nonce.

CSP basics

Content Security Policy (CSP) tells the browser which sources may run scripts. script-src 'self' allows scripts only from the same origin and blocks inline scripts.

In this lesson we'll add CSP to the page with a meta tag. The meta tag acts like an HTTP header through the http-equiv attribute.

If an inline script is needed, we put a unique nonce value on each script and allow it in CSP with 'nonce-...'.

The CSP meta tag

We can add CSP to the page with an HTML meta tag. The tag is created with document.createElement("meta"), its attributes are set with setAttribute, and it's added to the head with document.head.appendChild.

The http-equiv attribute becomes Content-Security-Policy; the content attribute holds the directives.

Example content: default-src 'self'; script-src 'self' 'nonce-abc123'

Exercise Add a CSP meta tag

Create a CSP meta tag with document.createElement("meta"). Set its attributes with setAttribute("http-equiv", "Content-Security-Policy") and setAttribute("content", "default-src 'self'; script-src 'self' 'nonce-abc123'"). Then append it to the head with document.head.appendChild(cspMeta).

Show example solution

const cspMeta = document.createElement("meta");
cspMeta.setAttribute("http-equiv", "Content-Security-Policy");
cspMeta.setAttribute("content", "default-src 'self'; script-src 'self' 'nonce-abc123'");
document.head.appendChild(cspMeta);

Test yourself

What does script-src 'self' do?
```
script-src 'self'
```
- Blocks all scripts
- Allows scripts only from the same origin
- Allows only inline scripts
- Allows external scripts
Show answer

Allows scripts only from the same origin — Correct! 'self' allows scripts only from the same origin.

Add the nonce value

script.src = '...';
script.nonce = '____';

Show answer

script.src = '...';
script.nonce = 'abc123';

Match the CSP directives

script-src

Script sources
default-src

Default source
nonce

One-time value
self

Same origin

Next lesson: Project final - Secure comments

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies