Content Security Policy that actually holds

A Google study of 1,680,867 hosts that sent a Content Security Policy found that 99.34% of them used a policy that gave no real protection against cross-site scripting, and 75.81% of the unique policies relied on script allowlists that can be bypassed. A Content Security PolicyContent Security Policy: A response header that tells the browser which scripts, frames, forms and other resources a page may use, so that an injected script can be refused. It limits the damage of a flaw and does not remove the flaw. is a response header that tells the browser which scripts, frames, forms and other resources a page may use, and a policy that holds is one where only the scripts the server marked can run.

You will compare a host list with a nonce on the same scripts, build the strict policy one directive at a time, give a dynamic page a nonce and a static page a hash, deploy a policy in report-only mode and sort its reports, and learn the patterns that quietly defeat a policy.

A policy holds when only scripts that carry this response’s mark can run

A policy is defence in depth. It limits what an injected script can do when output encoding fails, and it does nothing about the flaw itself. MDN lists what it covers: scripts, through script-src and its relatives; clickjacking, through frame-ancestors; plain-HTTP subresources, through upgrade-insecure-requests; and DOM sinks, through Trusted Types. It does not stop server-side flaws such as SQL injection, and OWASP’s cheat sheet says it should not be the only defence against cross-site scripting. Three sources make a script runnable. A noncenonce: A random value, new for every response, that the server writes in the Content-Security-Policy header and in the nonce attribute of each script it trusts. The browser runs only the script tags whose nonce matches. is a random value, new for every response, that the server writes in the header and on each script tag it trusts. A hash sourcehash source: A script-src entry such as 'sha256-' followed by a base64 value, which names a script by the SHA-256 hash of its exact text. Any change to the text, even a space, gives another hash and blocks the script. names a script by the SHA-256 hash of its exact text. And 'strict-dynamic' lets a trusted script add further scripts while the browser ignores host lists. The program below judges seven scripts against four policies, a host list first, and marks every wrong answer with a star:

// A simplified model of how a browser judges one script against the script-src of a policy. It follows the rules that
// matter here: a nonce allows a script; 'unsafe-inline' is ignored when the list holds a nonce; 'strict-dynamic' ignores
// host sources and trusts scripts that a trusted script adds; 'unsafe-eval' lets strings become code. Hash sources are
// left out: the program on nonces and hashes, further down, computes them.
const PAGE = 'https://app.example/';

function allows(policy, script) {
  const directives = Object.fromEntries(policy.split(';').map((d) => d.trim().split(/\s+/)).filter((d) => d[0]).map(([name, ...values]) => [name, values]));
  const list = directives['script-src'] ?? directives['default-src'];
  if (!list) return true;
  const nonces = list.filter((t) => t.startsWith("'nonce-")).map((t) => t.slice(7, -1));
  const strict = list.includes("'strict-dynamic'");
  const unsafeInline = list.includes("'unsafe-inline'") && nonces.length === 0;
  const hostAllowed = (url) => list.some((t) => (t === "'self'" ? url.startsWith(PAGE) : url.startsWith(t)));
  const nonceMatches = !!script.nonce && nonces.includes(script.nonce);
  if (script.kind === 'inline') return nonceMatches || unsafeInline;
  if (script.kind === 'handler') return unsafeInline;
  if (script.kind === 'eval') return list.includes("'unsafe-eval'");
  if (nonceMatches) return true;
  if (strict) return !!script.addedByTrustedScript;
  return hostAllowed(script.url);
}

const policies = [
  ['allowlist', "script-src 'self' https://cdn.example"],
  ['+ unsafe-inline', "script-src 'self' 'unsafe-inline' https://cdn.example"],
  ['nonce, no dynamic', "script-src 'nonce-R4nd0m'; object-src 'none'; base-uri 'none'"],
  ['nonce + dynamic', "script-src 'nonce-R4nd0m' 'strict-dynamic'; object-src 'none'; base-uri 'none'"],
];
// [what the script is, the script, whether the page wants it to run]
const scripts = [
  ['own inline script', { kind: 'inline', nonce: 'R4nd0m' }, true],
  ['own file, /app.js', { kind: 'external', url: 'https://app.example/app.js', nonce: 'R4nd0m' }, true],
  ['file added by our loader', { kind: 'external', url: 'https://widgets.example/w.js', addedByTrustedScript: true }, true],
  ['injected inline script', { kind: 'inline' }, false],
  ['injected tag, file on the CDN', { kind: 'external', url: 'https://cdn.example/uploads/any.js' }, false],
  ['inline onclick attribute', { kind: 'handler' }, false],
  ['eval of a string', { kind: 'eval' }, false],
];

console.log('* marks a wrong answer for this page: a script let in, or one the page needs blocked.');
const letIn = policies.map(() => 0);
const refused = policies.map(() => 0);
console.log(`${''.padEnd(30)}${policies.map(([name]) => name.padEnd(19)).join('')}`);
for (const [label, script, wanted] of scripts) {
  const cells = policies.map(([, policy], i) => {
    const ok = allows(policy, script);
    if (ok && !wanted) letIn[i]++;
    if (!ok && wanted) refused[i]++;
    return `${ok ? 'runs' : 'blocked'}${ok !== wanted ? ' *' : ''}`.padEnd(19);
  });
  console.log(`${label.padEnd(30)}${cells.join('')}`);
}
console.log(`${'lets in what it should not'.padEnd(30)}${letIn.map((n) => String(n).padEnd(19)).join('')}`);
console.log(`${'blocks what the page needs'.padEnd(30)}${refused.map((n) => String(n).padEnd(19)).join('')}`);

* marks a wrong answer for this page: a script let in, or one the page needs blocked.
                              allowlist          + unsafe-inline    nonce, no dynamic  nonce + dynamic    
own inline script             blocked *          runs               runs               runs               
own file, /app.js             runs               runs               runs               runs               
file added by our loader      blocked *          blocked *          blocked *          runs               
injected inline script        blocked            runs *             blocked            blocked            
injected tag, file on the CDN runs *             runs *             blocked            blocked            
inline onclick attribute      blocked            runs *             blocked            blocked            
eval of a string              blocked            blocked            blocked            blocked            
lets in what it should not    1                  3                  0                  0                  
blocks what the page needs    2                  1                  1                  0                  

The host list let in the injected tag that points at a file on the allowed CDN, and it blocked two scripts that the page needs, its own inline script and the file its loader adds. Adding 'unsafe-inline' let in three scripts that nobody meant to run: the injected inline script, the file on the CDN and the onclick attribute. The nonce policy without 'strict-dynamic' let in none, and still blocked the loader’s file. With 'strict-dynamic' the last column has no star at all, because the page’s own tags carry the nonce and the file its loader adds is trusted by that loader. Report-Only modeReport-Only mode: Sending a policy in the Content-Security-Policy-Report-Only header, so that violations are reported and nothing is blocked. It shows what an enforced policy would break before it is enforced. sends the same policy in a header that reports violations and blocks nothing, which is how a policy like that last column reaches a real site. Step through one response under that policy:

The flaw that added the tag is still in the page after the last step, and the tag does nothing. That is the whole promise of a policy that holds, and the reason it is a second layer, never a replacement for encoding the output.

Build the strict policy directive by directive, and audit it Pro: opens with a Pro, Premium or Ultimate pass