Next.js
Explica cómo diseñar una Content Security Policy con nonces, hashes, report-only y headers complementarios sin romper streaming, caché ni terceros.
Content Security Policy limita qué recursos puede ejecutar o cargar el navegador. Es una mitigación fuerte contra XSS y supply-chain abuse, pero no sanitiza datos ni corrige autorización. En Next.js, una política estricta debe convivir con scripts del framework, streaming, estilos, imágenes, fuentes y terceros sin recurrir a unsafe-inline como solución permanente.
HTML tries to load/execute resource
↓
browser evaluates CSP directive
├─ source allowed → continue
└─ source denied → block + optional reportCSP es aplicada por el navegador mediante response header. Un atacante que llama directamente a tu API no es detenido por CSP.
Content-Security-Policy:
default-src 'self';
script-src 'self' 'nonce-<random>' 'strict-dynamic';
style-src 'self' 'nonce-<random>';
img-src 'self' data: https://cdn.example.com;
font-src 'self';
connect-src 'self' https://api.example.com;
frame-ancestors 'none';
base-uri 'self';
form-action 'self';Cada directiva controla un tipo de capacidad. No copies esta política literalmente: adapta recursos y compatibilidad.
Fallback para categorías sin directiva específica. Empieza restrictivo.
Scripts y, según navegador, handlers/evaluación. Es la directiva crítica contra XSS.
Stylesheets y estilos inline. CSS-in-JS o atributos style pueden exigir una estrategia específica.
Orígenes de assets.
Fetch, XHR, WebSocket y EventSource desde navegador.
Qué iframes puede cargar tu página.
Quién puede embeber tu sitio. Sustituye muchos usos de X-Frame-Options.
Evita que un <base> inyectado cambie destinos relativos.
Limita dónde pueden enviar formularios.
Bloquea plugins heredados.
Genera un valor impredecible por response:
const nonce = Buffer.from(crypto.randomUUID()).toString("base64");Header:
script-src 'self' 'nonce-abc123' 'strict-dynamic'Solo scripts con el mismo nonce pueden ejecutarse.
En Next.js, Proxy puede generar nonce y CSP, añadirlo como request header y el framework puede aplicarlo a scripts propios bajo la integración documentada.
export function proxy(request: NextRequest) {
const nonce = crypto.randomUUID().replaceAll("-", "");
const csp = buildCsp(nonce);
const requestHeaders = new Headers(request.headers);
requestHeaders.set("x-nonce", nonce);
requestHeaders.set("content-security-policy", csp);
const response = NextResponse.next({
request: { headers: requestHeaders },
});
response.headers.set("Content-Security-Policy", csp);
return response;
}Sobrescribe cualquier nonce enviado por el cliente. No uses un valor fijo.
Un nonce por request hace que HTML varíe y normalmente impide una shell completamente estática/CDN-cacheada. Puede afectar Cache Components y rendimiento.
Alternativas:
Elige seguridad y caching según amenaza, no escondas el trade-off.
script-src 'self' 'sha256-...'Autoriza contenido exacto. Funciona bien para un script inline estable; cualquier cambio exige recalcular hash. No sirve para contenido generado por request.
Con nonce/hash confiable, permite que un script autorizado cargue dependencias y puede ignorar allowlists heredadas en navegadores modernos. Mejora mantenimiento, pero entiende compatibilidad y evita autorizar un loader de terceros demasiado poderoso.
unsafe-inline permite scripts/estilos inline y debilita protección.unsafe-eval permite evaluación dinámica; algunas herramientas de desarrollo la requieren.Una política de desarrollo puede ser más permisiva, pero producción debe ser distinta y probada.
No publiques unsafe-eval porque Fast Refresh lo necesitaba localmente.
Content-Security-Policy-Report-Only: ...Registra violaciones sin bloquear. Proceso:
inventory resources
→ deploy report-only
→ review real violations
→ remove unsafe dependencies
→ enforce
→ monitor regressionsLos reports pueden contener URLs sensibles. Redáctalos y aplica rate limits.
Analytics, chat, maps y pagos pueden requerir:
connect-src endpoints.No uses https: o * para evitar documentar hosts. Cada proveedor amplía la superficie; limita scope y carga tras consentimiento.
Un <script type="application/ld+json"> también puede estar sujeto a CSP. Añade nonce cuando corresponda y escapa < en datos serializados.
No uses dangerouslySetInnerHTML con input sin sanitizar aunque tenga nonce: el nonce autoriza ese bloque completo.
Tailwind/CSS Modules producen hojas estáticas compatibles con style-src 'self'. CSS-in-JS runtime puede insertar <style> y necesita nonce/registry compatible.
El prop style puede verse afectado por una política estricta. Evalúa custom properties/clases o hashes de style según soporte.
Strict-Transport-Security: max-age=31536000; includeSubDomainsObliga HTTPS después de la primera visita. includeSubDomains y preload requieren que todos los subdominios estén listos y son difíciles de revertir.
Evita MIME sniffing en ciertos recursos.
Referrer-Policy: strict-origin-when-cross-originReduce información enviada a otros orígenes.
Permissions-Policy: camera=(), microphone=(), geolocation=()Limita capacidades. No bloquees las que una ruta necesita.
COOP/COEP/CORP permiten capacidades como SharedArrayBuffer, pero pueden romper embeds, imágenes o recursos sin headers compatibles. Actívalos por requisito, no como checklist.
Headers estáticos:
async headers() {
return [{
source: "/:path*",
headers: [
{ key: "X-Content-Type-Options", value: "nosniff" },
{ key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
],
}];
}Adecuado para valores fijos. Nonce por request requiere Proxy/runtime.
No apliques Cache-Control: private global a assets por accidente.
Si CSP/HTML depende de un nonce, cada response cambia. Evita cachear HTML personalizado bajo una key compartida. Assets con hash siguen siendo públicos/inmutables.
No incluyas nonce como dimensión de caché que cree entradas infinitas; el documento dinámico debe tratarse bajo su semántica.
Prueba:
next/image y fuentes.Revisa consola y reports; una ausencia de errores en home no valida checkout.
Portfolio sin terceros críticos:
default-src 'self'
script-src 'self' nonce
style-src 'self'
img-src 'self' data: CDN allowlist
font-src 'self'
connect-src 'self' analytics after consent
frame-src video providers only on project routes
frame-ancestors 'none'Un embed de video puede cargar solo al interactuar. No amplíes toda la política por un proveedor usado en una página si puedes usar una frontera/plataforma separada, aunque CSP suele ser por documento completo.
Hosts y runtime no coinciden.
Neutraliza gran parte de script protection.
El atacante puede reutilizarlo.
Una fuente autorizada todavía puede ejecutar datos peligrosos.
Causa indisponibilidad difícil de revertir.
Puede recibir abuso y datos sensibles.
Dev necesita políticas distintas.
unsafe-inline/unsafe-eval debilitan la política.frame-src y frame-ancestors?Testing de aplicaciones Next.js verifica estas fronteras bajo producción, no solo funciones aisladas.