Frontend Academy · Lección

Content Security Policy: nonce y hash

Escriba una CSP estricta con nonces para scripts insertados, hashes para fragmentos conocidos y report-uri para supervisar infracciones en producción.

Content Security Policy: nonce y hash es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

Resumen de CSP

CSP es un encabezado HTTP que establece una lista blanca de lo que el navegador puede cargar: scripts, estilos, imágenes, fuentes, marcos y conexiones. Es una defensa en profundidad: aunque XSS supere los filtros, CSP suele detener el payload.

Anatomía del encabezado CSP

Cada directiva enumera las fuentes permitidas. 'self' significa mismo origen. También se permiten URL específicas.

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://cdn.example.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  connect-src 'self' https://api.example.com;
  font-src 'self' https://fonts.gstatic.com;
  frame-ancestors 'none';
  base-uri 'self';

Directivas comunes

default-src: valor de reserva para todo. script-src: JavaScript. style-src: CSS. img-src: imágenes. connect-src: fetch/XHR/WebSocket. font-src: fuentes. frame-ancestors: quién puede incluir su sitio en un iframe (protección contra clickjacking).

'unsafe-inline': el agujero más común

Muchos sitios añaden 'unsafe-inline' para permitir etiquetas <script> y atributos onclick insertados directamente. Esto anula el objetivo principal de CSP: los payloads XSS pueden ejecutarse directamente. Sustitúyalo por nonces o hashes.

Nonces: lista blanca de un solo uso

Genere un nonce aleatorio por solicitud. Etiquete los scripts insertados legítimos con ese nonce. El navegador solo permite los scripts que tienen nonces coincidentes.

// Server (Express middleware):
import crypto from 'crypto';

app.use((req, res, next) => {
  res.locals.nonce = crypto.randomBytes(16).toString('base64');
  res.setHeader('Content-Security-Policy',
    `script-src 'nonce-${res.locals.nonce}' 'strict-dynamic'`
  );
  next();
});

// Template:
<script nonce="<%= nonce %>">window.config = {...};</script>

'strict-dynamic'

Combine el nonce con 'strict-dynamic': los scripts de confianza (los que tienen el nonce) pueden cargar scripts adicionales. Así se elimina la necesidad de enumerar la URL de cada fuente de scripts. Es la práctica recomendada actual para CSP.

Hashes: lista blanca estática

Para scripts insertados conocidos y fijos (por ejemplo, si su compilación siempre genera el mismo fragmento de arranque), calcule su SHA-256 y añádalo como fuente hash. No se necesita un nonce por solicitud.

// Hash of: console.log('hi');
Content-Security-Policy: script-src 'sha256-XwCNuB+/RUgPlAACI+yHrUKqUsm4zlpGV/Q8tEUx0Q4='

Hashes de estilos insertados

Use el mismo método para las etiquetas <style> insertadas: calcule su hash y añádalo a style-src. Es mejor que 'unsafe-inline' para CSS.

Modo de informes de CSP

Use Content-Security-Policy-Report-Only para probar una política sin aplicarla. Las infracciones se notifican a su endpoint, pero no se bloquea nada. Es una excelente opción para implementar CSP gradualmente.

Content-Security-Policy-Report-Only: 
  default-src 'self';
  report-uri /csp-violations

// /csp-violations receives POSTs like:
{
  "csp-report": {
    "document-uri": "https://example.com/",
    "violated-directive": "script-src 'self'",
    "blocked-uri": "https://evil.com/x.js"
  }
}

report-to (moderno)

report-to + Reporting-Endpoints es el sustituto moderno de report-uri. Proporciona los mismos datos, pero de forma más estructurada.

Reporting-Endpoints: csp="/csp-reports"
Content-Security-Policy: script-src 'self'; report-to csp

Integraciones con frameworks

Next.js: establezca CSP mediante los encabezados de middleware.ts o next.config.js. Nuxt: use el módulo nuxt-security. Vite: configure los encabezados del servidor de desarrollo y, en producción, los del proveedor de alojamiento (configuración de encabezados de Vercel o Netlify).

// next.config.js
module.exports = {
  async headers() {
    return [{
      source: '/(.*)',
      headers: [{
        key: 'Content-Security-Policy',
        value: "default-src 'self'; script-src 'self' 'strict-dynamic'"
      }]
    }];
  }
};

Pruebas de CSP

Abra DevTools → Consola: allí se registran las infracciones de CSP. Use https://csp-evaluator.withgoogle.com/ para evaluar su política. Active primero el modo de solo informes en producción y aplique la política después de corregir todas las infracciones.

Comprobación rápida

¿Por qué se considera una debilidad de CSP incluir 'unsafe-inline' en una directiva script-src?

Resumen: prácticas recomendadas de CSP

Establezca el encabezado Content-Security-Policy con directivas para cada tipo de recurso. Evite 'unsafe-inline': use nonces + 'strict-dynamic' o hashes SHA. Establezca frame-ancestors 'none' (o 'self'). Pruebe primero en modo Report-Only. Envíe las infracciones a /csp-violations (o use el report-to moderno). Los frameworks admiten CSP mediante middleware o encabezados configurados.

Preguntas frecuentes

¿La lección «Content Security Policy: nonce y hash» es gratis?

Sí — el texto completo de «Content Security Policy: nonce y hash» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Content Security Policy: nonce y hash»?

Escriba una CSP estricta con nonces para scripts insertados, hashes para fragmentos conocidos y report-uri para supervisar infracciones en producción. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Content Security Policy: nonce y hash»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Prevención de XSS: codificación de salida y CSP
CSRF: cookies SameSite y tokens
Content Security Policy: nonce y hash
Flujos de OAuth desde el frontend

← Volver a Frontend Academy