import { randomBytes } from 'crypto';
import { Request, Response, NextFunction } from 'express';
interface CspOptions {
reportOnly?: boolean;
reportUri?: string;
}
function buildPolicy(nonce: string, reportUri?: string): string {
const directives = [
"default-src 'self'",
`script-src 'self' 'nonce-${nonce}' 'strict-dynamic'`,
"style-src 'self' 'unsafe-inline'",
"img-src 'self' data:",
"connect-src 'self'",
"object-src 'none'",
"base-uri 'self'",
"frame-ancestors 'none'",
"form-action 'self'",
'upgrade-insecure-requests',
];
if (reportUri) directives.push(`report-uri ${reportUri}`);
return directives.join('; ');
}
export function cspMiddleware(options: CspOptions = {}) {
const header = options.reportOnly
? 'Content-Security-Policy-Report-Only'
: 'Content-Security-Policy';
return (req: Request, res: Response, next: NextFunction): void => {
const nonce = randomBytes(16).toString('base64');
res.locals.cspNonce = nonce;
res.setHeader(header, buildPolicy(nonce, options.reportUri));
next();
};
}
import { Request, Response } from 'express';
interface CspReport {
'document-uri'?: string;
'violated-directive'?: string;
'blocked-uri'?: string;
'original-policy'?: string;
}
const NOISE = ['about', 'chrome-extension', 'moz-extension', 'safari-extension'];
function isNoise(blockedUri: string | undefined): boolean {
if (!blockedUri) return false;
return NOISE.some((prefix) => blockedUri.startsWith(prefix));
}
export function cspReportHandler(req: Request, res: Response): void {
const report: CspReport = (req.body && req.body['csp-report']) || {};
const blocked = report['blocked-uri'];
if (!isNoise(blocked)) {
console.warn('[csp] violation', {
documentUri: report['document-uri'],
directive: report['violated-directive'],
blockedUri: blocked,
});
}
// Browsers ignore the body; 204 avoids a redundant round trip.
res.status(204).end();
}
import express from 'express';
import { cspMiddleware } from './csp';
import { cspReportHandler } from './report';
const app = express();
const REPORT_URI = '/__csp-report';
app.use(
cspMiddleware({
reportOnly: process.env.CSP_ENFORCE !== 'true',
reportUri: REPORT_URI,
})
);
app.post(
REPORT_URI,
express.json({ type: ['application/csp-report', 'application/json'] }),
cspReportHandler
);
app.get('/', (req, res) => {
const nonce = res.locals.cspNonce as string;
res.type('html').send(`<!doctype html>
<html>
<head><title>Dashboard</title></head>
<body>
<div id="root"></div>
<script nonce="${nonce}" src="/assets/app.js"></script>
<script nonce="${nonce}">window.__BOOT__ = true;</script>
</body>
</html>`);
});
app.listen(3000, () => console.log('listening on :3000'));
A Content Security Policy (CSP) is a browser-enforced allowlist that tells the page which sources of script, style, images, and connections are trusted. It is a defense-in-depth control: even if an attacker manages to inject markup through an XSS hole, a strict policy stops the injected <script> from executing because it lacks the correct origin or nonce. This snippet builds a nonce-based CSP for an Express app so that inline scripts the server actually emits are permitted while any injected inline script is rejected.
In csp.ts, cspMiddleware generates a fresh 128-bit random nonce per request with randomBytes(16), base64-encodes it, and stashes it on res.locals.cspNonce so templates can read it. The policy string is assembled from buildPolicy, which pins default-src to 'self', allows scripts only from 'self' plus the request nonce, and adds hardening directives like object-src 'none', base-uri 'self', and frame-ancestors 'none' to block plugin execution, base-tag hijacking, and clickjacking. The 'strict-dynamic' token lets a nonced loader script pull in further scripts without needing every URL enumerated, which keeps the policy maintainable as bundles change.
The key trade-off is enforce-versus-observe. Shipping a broken policy can break a live site, so csp.ts supports a reportOnly flag that switches the header name to Content-Security-Policy-Report-Only. In that mode the browser reports violations to the report-uri endpoint but does not block anything, which is the safe way to roll a policy out and tune it against real traffic before enforcing.
In report.ts, cspReportHandler accepts the application/csp-report beacon the browser POSTs on each violation, normalizes the payload, and logs the blocked URI and violated directive. Filtering noisy blocked-uri values such as browser-extension origins keeps the signal clean.
In app.ts, the middleware is mounted before the routes and the JSON body parser is scoped to the report route with a matching content type. res.locals.cspNonce flows into the rendered template's inline script tags. Pitfalls to watch: nonces must never be reused across responses, unsafe-inline is ignored by browsers whenever a nonce is present, and any third-party widget needs an explicit source entry or it will silently fail under enforcement.
Related snips
payload = {
sub: user.id,
iss: 'https://auth.example.com',
aud: 'codesnips-api',
exp: 15.minutes.from_now.to_i,
iat: Time.now.to_i,JWT issuance and verification without common footguns
#!/usr/bin/env bash
set -euo pipefail
export VAULT_ADDR="https://vault.internal:8200"
export VAULT_TOKEN="${VAULT_TOKEN:?missing VAULT_TOKEN}"Secrets management with environment isolation and Vault
import { randomBytes, createHash } from "crypto";
import jwt from "jsonwebtoken";
import { RefreshTokenStore } from "./store";
const ACCESS_SECRET = process.env.ACCESS_SECRET!;
const ACCESS_TTL = "15m";JWT access + refresh token rotation (conceptual)
package files
import (
"context"
"time"Presigned S3 upload URLs (AWS SDK v2)
<%# private stream: turbo signs the serialized record name %>
<%= turbo_stream_from current_user %>
<section class="notifications">
<h1>Notifications</h1>Turbo Streams + authorization: signed per-user stream name
package api
import (
"io"
"net/http"
"os"Safe multipart uploads using temp files (bounded memory)
Share this code
Here's the card — post it anywhere.
