# Content Security Policy Rules
> Frontend Security - Content Security Policy (CSP)
## Rules
### 1. Implement a Strict CSP
- **DO**: Define a Content-Security-Policy header that restricts script sources. Start with `default-src 'self'` and add specific directives as needed.
- **DON'T**: Use a permissive CSP (`default-src *`) or skip CSP entirely.
- **WHY**: CSP is the strongest browser-level defense against XSS. A strict policy prevents execution of injected scripts even if an XSS vulnerability exists.
### 2. Use Nonce-Based or Hash-Based Script Loading
- **DO**: Generate a unique cryptographic nonce per request and apply it to all `
```
### Good Practice
```javascript
import crypto from "node:crypto";
// Strict nonce-based CSP middleware
function cspMiddleware(req, res, next) {
const nonce = crypto.randomBytes(16).toString("base64");
res.locals.cspNonce = nonce;
const csp = [
`default-src 'self'`,
`script-src 'nonce-${nonce}' 'strict-dynamic'`,
`style-src 'self' 'nonce-${nonce}'`,
`img-src 'self' data: https:`,
`font-src 'self'`,
`connect-src 'self' https://api.example.com`,
`frame-ancestors 'self'`,
`object-src 'none'`,
`base-uri 'self'`,
`form-action 'self'`,
`report-uri /csp-report`,
].join("; ");
res.setHeader("Content-Security-Policy", csp);
next();
}
app.use(cspMiddleware);
// CSP violation report endpoint
app.post("/csp-report", express.json({ type: "application/csp-report" }), (req, res) => {
const report = req.body["csp-report"];
logger.warn({
type: "csp_violation",
blockedUri: report["blocked-uri"],
violatedDirective: report["violated-directive"],
documentUri: report["document-uri"],
sourceFile: report["source-file"],
lineNumber: report["line-number"],
});
res.sendStatus(204);
});
// HTML template using nonce
function renderPage(res, content) {
return `
${content}
`;
}
// Next.js CSP configuration (next.config.js)
const nextConfig = {
async headers() {
return [
{
source: "/(.*)",
headers: [
{
key: "Content-Security-Policy",
value: [
"default-src 'self'",
"script-src 'self' 'unsafe-inline'", // Next.js requires unsafe-inline; use nonce in custom server
"style-src 'self' 'unsafe-inline'",
"img-src 'self' data: https:",
"font-src 'self'",
"object-src 'none'",
"frame-ancestors 'self'",
].join("; "),
},
],
},
];
},
};
```
## Quick Checklist
- [ ] CSP header set on all HTML responses
- [ ] `default-src 'self'` as baseline
- [ ] `script-src` uses nonces or hashes (no `'unsafe-inline'` or `'unsafe-eval'`)
- [ ] `object-src 'none'` set to block plugins
- [ ] `frame-ancestors` set to prevent clickjacking
- [ ] `base-uri 'self'` to prevent base tag hijacking
- [ ] CSP reporting configured and monitored
- [ ] `Content-Security-Policy-Report-Only` used for testing before enforcement
- [ ] No overly broad CDN domain whitelists