Content security policyContent security policy

Build the header

Toggle directives until all ten land as intended.

(no Content-Security-Policy header)

import helmet from "helmet";

app.use(helmet({
  contentSecurityPolicy: {
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc: ["'self'", "https://trusted-cdn.com"],
      styleSrc: ["'self'"],
      imgSrc: ["'self'", "data:", "https:"],
      connectSrc: ["'self'", "https://api.example.com"],
      fontSrc: ["'self'", "https:", "data:"],
      objectSrc: ["'none'"],                              // 'self' would still run an uploaded .swf
      mediaSrc: ["'self'"],
      frameSrc: ["'none'"],                               // 'self' would still frame an uploaded .html
    },
  },
}));

Fire an injection

Pick a payload, then edit the policy.

// next.config.js
const csp = [
  "default-src 'self'",
  "script-src 'self' https://trusted-cdn.com",
  "img-src 'self' data: https:",
  "connect-src 'self' https://api.example.com",
  "object-src 'none'",
  "frame-src 'none'",
].join("; ");

module.exports = {
  async headers() {
    return [{ source: "/(.*)", headers: [{ key: "Content-Security-Policy", value: csp }] }];
  },
};

'unsafe-inline' reopens XSS

Type or load an injected comment.

import crypto from "node:crypto";

app.use((req, res, next) => {
  res.locals.nonce = crypto.randomBytes(16).toString("base64"); // new on every response
  next();
});

app.use(helmet({
  contentSecurityPolicy: {
    directives: {
      scriptSrc: ["'self'", (req, res) => `'nonce-${res.locals.nonce}'`, "https://trusted-cdn.com"],
    },
  },
}));

// <script nonce="<%= nonce %>">boot()</script>

Why it matters, pros and cons