Seguridad y Calidad

Content Security Policy

Define headers de Content Security Policy para prevenir XSS, clickjacking y otros ataques de inyección de código.

Claude Code Cursor Copilot Windsurf

Descripción General

Content Security Policy (CSP) es un header de respuesta HTTP que indica a los navegadores qué fuentes de contenido pueden cargarse en una página. Es una de las defensas más efectivas contra ataques de Cross-Site Scripting (XSS), ya que previene la ejecución de scripts no autorizados incluso si un atacante logra inyectarlos en la página.

Las directivas CSP controlan la carga de scripts, hojas de estilo, imágenes, fuentes, frames y otros recursos. Las directivas clave incluyen script-src (fuentes JavaScript), style-src (fuentes CSS), img-src (fuentes de imágenes), connect-src (destinos fetch/XHR) y default-src (respaldo para tipos no especificados). La biblioteca helmet.js proporciona una API conveniente para establecer headers CSP en aplicaciones Express con valores predeterminados sensatos.

Implementar CSP efectivamente requiere entender los patrones de carga de recursos de tu aplicación. El modo report-only permite probar políticas sin romper funcionalidad enviando reportes de violación a un endpoint especificado. Se recomienda CSP basado en nonce para scripts inline, donde un nonce criptográfico único se genera por solicitud y se agrega tanto al header CSP como a las etiquetas script.

¿Para Quién Es?

Prevenir ataques XSS restringiendo fuentes de scripts
Bloquear contenido mixto forzando carga de recursos HTTPS
Configurar reportes CSP para monitorear violaciones de política
Implementar CSP basado en nonce para scripts inline en apps SSR

Instalación

Configurar Claude Code

npm install helmet

Configuración

import helmet from "helmet"

app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc: ["'self'"],
    scriptSrc: ["'self'", "'nonce-{NONCE}'"],
    styleSrc: ["'self'", "https://fonts.googleapis.com"],
    imgSrc: ["'self'", "data:", "https:"],
    connectSrc: ["'self'", "https://api.myapp.com"],
    fontSrc: ["'self'", "https://fonts.gstatic.com"],
    frameAncestors: ["'none'"],
    upgradeInsecureRequests: [],
  },
}))

Visitar Fuente (GitHub)

Explora herramientas de IA

Las mejores herramientas de IA que complementan tus habilidades

Lee artículos sobre IA y diseño

Consejos y tendencias en el mundo del diseño y la IA

Skills Relacionados

Seguridad y Calidad

Snyk Security Scan

Analiza dependencias y código en busca de vulnerabilidades conocidas y sugiere correcciones automáticas.

Claude Code Codex Copilot

Seguridad y Calidad

SonarQube Code Quality

Análisis integral de calidad de código para detectar patrones problemáticos, código duplicado y complejidad excesiva.

Claude Code Codex Copilot

Seguridad y Calidad

OWASP ZAP Security Testing

Escaneo automático de aplicaciones web para detectar las diez vulnerabilidades más comunes de OWASP.

Claude Code Codex