CSP PARA SITIOS WEB ESTÁTICOS

La Política de Seguridad de Contenidos (CSP) es un encabezado HTTP que indica al navegador qué orígenes están autorizados a cargar recursos para tu página. Si se configura correctamente, evita la mayoría de los ataques XSS, de «clickjacking» y de cadena de suministro. Si se configura incorrectamente, provoca fallos silenciosos en las funcionalidades que pueden tardar días en diagnosticarse.

Los sitios web estáticos suelen documentar de forma insuficiente su CSP porque se percibe que el riesgo es menor. La realidad es que un sitio web estático en el que falte una directiva CSP puede provocar fallos en la reproducción de vídeos, la carga de imágenes, la funcionalidad de búsqueda o la visualización de fuentes, y el mensaje de la consola del navegador es la única señal que recibes.

La directiva que controla cada tipo de recurso:

«img-src» para las etiquetas «img». «media-src» para los elementos «video», «audio» y «source». «frame-src» para «iframe». «connect-src» para «fetch» y WebSocket. «script-src» para las etiquetas «script». «style-src» para las etiquetas «style» y «link rel=stylesheet». «font-src» para «@font-face».

Importante: el valor predeterminado «self» para «src» NO incluye los vídeos alojados en un servidor externo. Si te olvidas de especificar «media-src», un vídeo de Supabase Storage no se reproducirá sin avisar y solo se verá su imagen de portada. La consola del navegador muestra la directiva que lo ha bloqueado; compruébala primero cuando un vídeo no se reproduzca sin motivo aparente.

En gautamkhorana.com, en mayo de 2026, un archivo Kling MP4 alojado en Supabase Storage mostraba correctamente el código HTML, pero nunca se reproducía. Se veía la imagen de portada, pero el vídeo no se iniciaba. Tras veinte minutos de depuración, se descubrió que la CSP no incluía la directiva «media-src» y que el navegador estaba bloqueando el elemento de vídeo de forma silenciosa.

La solución consistió en añadir una sola línea al archivo netlify.toml: media-src "self" https://*.supabase.co. El síntoma de que se muestra la imagen pero no se reproduce el vídeo es el indicio revelador: significa que la CSP permite la imagen, pero no el vídeo.

Pagefind, Stork, Tinysearch y otras bibliotecas de búsqueda para sitios web estáticos utilizan WebAssembly junto con Web Workers. La política de seguridad del contenido (CSP) debe incluir «script-src "wasm-unsafe-eval"» Y «worker-src "self" blob:»; de lo contrario, la búsqueda se queda bloqueada indefinidamente en «Buscando...» sin que aparezca ningún error en la consola.

Segundo incidente en gautamkhorana.com en mayo de 2026: el cuadro de búsqueda se quedaba bloqueado en «Buscando...» porque la función pagefind.init() fallaba de forma silenciosa cuando se bloqueaba WASM. La solución consistió en añadir «wasm-unsafe-eval» a script-src y «self» al blob: a worker-src.

Requisitos:

img-src self https://*.supabase.co https://*.fal.media, para imágenes destacadas y recursos generados por FAL. media-src self https://*.supabase.co, para vídeo. connect-src self https://*.supabase.co, para llamadas a la API de Supabase. script-src self «wasm-unsafe-eval», para Pagefind. worker-src self blob:, para los trabajadores de Pagefind. style-src self «unsafe-inline», para estilos con ámbito de Astro. font-src self, para fuentes autohospedadas.

Cada vez que añadas un nuevo proveedor de recursos (Cloudinary, Bunny, R2 o cualquier otro), revisa el archivo netlify.toml o vercel.json y añade dicho proveedor a todas las directivas que pueda utilizar ese tipo de recurso. El coste de cometer un error en este proceso es una falla silenciosa que acabará manifestándose en el entorno de producción.

El modo «CSP-Report-Only» te permite probar los cambios en las políticas en el entorno de producción sin causar ningún problema. El navegador registra las posibles infracciones en un punto final de notificación, en lugar de bloquear la solicitud. Ejecuta cualquier nueva directiva en modo «solo informe» durante una semana, revisa las infracciones y, a continuación, pasa al modo de aplicación.

La mayoría de los fallos del CSP pasan desapercibidos en el entorno de producción. Un punto final de notificación es la única forma de saber qué es lo que realmente se ha estropeado. Configura uno antes de implementar cualquier cambio significativo en el CSP.