Vue Academy · Lección

Content Security Policy (CSP) con Vue

Cabeceras CSP, scripts basados en nonce, políticas basadas en hash y configuración de CSP en Vite

Content Security Policy (CSP) con Vue es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 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 Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

Qué es CSP

La política de seguridad de contenido es una cabecera de respuesta HTTP que indica al navegador qué fuentes de scripts, estilos, imágenes y conexiones están permitidas. Es una segunda línea de defensa sólida contra XSS: incluso los scripts inyectados se bloquean si su fuente no está permitida.

La cabecera

CSP se entrega mediante la cabecera de respuesta Content-Security-Policy. Cada directiva enumera las fuentes permitidas para un tipo de recurso.

Content-Security-Policy: default-src 'self'; script-src 'self';

Restringir las fuentes de scripts

La directiva script-src controla desde dónde pueden cargarse los scripts. Limitarla a 'self' bloquea los scripts en línea y de terceros que un atacante podría inyectar.

Content-Security-Policy: script-src 'self' https://cdn.trusted.com;

Evitar unsafe-inline

'unsafe-inline' permite scripts en línea y atributos de controladores de eventos, exactamente lo que aprovechan los ataques XSS. Una política sólida lo omite para impedir la ejecución de código en línea inyectado.

Evitar unsafe-eval

'unsafe-eval' permite usar eval y el constructor Function. La compilación de runtime de Vue 3 no lo necesita (las plantillas se precompilan), por lo que puede y debe omitirlo.

Scripts en línea basados en nonce

Cuando realmente necesite un script en línea, asígnele un nonce aleatorio para cada respuesta e incluya ese nonce en la política. Solo se ejecutarán los scripts que contengan el nonce correspondiente.

<!-- header includes: script-src 'nonce-abc123' -->
<script nonce="abc123">
  // allowed because nonce matches
</script>

Por qué los nonces son mejores que unsafe-inline

Un nonce es impredecible y cambia con cada respuesta, por lo que un atacante que inyecte un script no puede adivinarlo. Así, los scripts en línea siguen funcionando sin el riesgo generalizado de unsafe-inline.

CSP y los estilos de Vue

Vue y muchas bibliotecas de interfaz de usuario inyectan estilos en tiempo de ejecución. Permítalos mediante style-src con un nonce o hash, o extraiga el CSS a archivos para que sea suficiente con style-src 'self'.

Content-Security-Policy: style-src 'self';

Complemento de nonce CSP de Vite para desarrollo

El servidor de desarrollo de Vite inyecta scripts, lo que puede entrar en conflicto con una CSP estricta. Un complemento de nonce para CSP añade un nonce coincidente a las etiquetas inyectadas por Vite durante el desarrollo.

// vite.config.ts
import { defineConfig } from "vite";

export default defineConfig({
  html: {
    cspNonce: "DEV_NONCE"
  }
});

connect-src para API

Restrinja mediante connect-src los destinos a los que la aplicación puede hacer solicitudes, para que el código inyectado no pueda extraer datos hacia un dominio controlado por un atacante.

Content-Security-Policy: connect-src 'self' https://api.example.com;

Modo de solo informe

Implemente CSP de forma segura con Content-Security-Policy-Report-Only, que informa de las infracciones sin bloquearlas. Así podrá ajustar la política antes de aplicarla.

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

Comprobación rápida

¿Qué valor de directiva CSP debe evitar para mantener sólida la protección contra XSS?

Resumen

CSP es una cabecera HTTP que restringe las fuentes permitidas de scripts, estilos y conexiones, y bloquea el código inyectado incluso si un ataque XSS consigue pasar. Evite unsafe-inline y unsafe-eval; use nonces por respuesta para los scripts en línea necesarios y un complemento de nonce CSP de Vite durante el desarrollo. Use primero el modo de solo informe y aplique la política después.

Preguntas frecuentes

¿La lección «Content Security Policy (CSP) con Vue» es gratis?

Sí — el texto completo de «Content Security Policy (CSP) con Vue» 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 Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Content Security Policy (CSP) con Vue»?

Cabeceras CSP, scripts basados en nonce, políticas basadas en hash y configuración de CSP en Vite Practicas Vue 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 Vue Academy?

No se requiere experiencia previa. Vue 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 2 de 4.

¿Cuánto tiempo toma la lección «Content Security Policy (CSP) con Vue»?

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 Vue Academy?

Sí. Cada lección de Vue 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

← Volver a Vue Academy