Cómo solucionar el error “Content Security Policy (CSP): The Page’s Settings Blocked the Loading of a Resource”
Aprende a identificar y configurar correctamente las políticas de seguridad CSP para solucionar errores relacionados con recursos bloqueados en tu sitio web. Esta guía incluye pasos claros sobre cómo ajustar directivas, permitir recursos, configurar scripts inline, usar reportes de incumplimientos y verificar configuraciones en el servidor.
Recomendamos utilizar nuestro chatbot gratuito, diseñado para ayudar con problemas técnicos similares.
Guía paso a paso para solucionar el error “Content Security Policy (CSP): The Page’s Settings Blocked the Loading of a Resource”
Tabla de resumen rápido
- Comprender el CSP.
- Identificar el origen del problema.
- Configurar correctamente el encabezado CSP.
- Permitir recursos bloqueados.
- Configurar ejecución de scripts inline.
- Utilizar la función de reporte de incumplimientos.
- Verificar las configuraciones aplicadas.
- Resolver errores específicos en el servidor.
🛠️ Recomendamos utilizar herramientas como NordVPN para garantizar un entorno seguro mientras trabajas en estas configuraciones.
1. Comprender el Content Security Policy (CSP)
El CSP es una medida de seguridad que ayuda a prevenir inyección de scripts malintencionados al restringir los recursos cargados en una página web.
Aspectos clave:
- Las políticas se configuran utilizando la cabecera HTTP
Content-Security-Policy. - Ejemplo de sintaxis:
Content-Security-Policy: default-src 'self'; script-src 'self' https://example.com;
ℹ️ Consulta la documentación oficial de MDN Web Docs para más detalles.
2. Identificar el origen del problema
Para determinar qué políticas están bloqueando recursos:
- Abre las herramientas de desarrollo en tu navegador (Ctrl + Shift + I o Cmd + Option + I).
- Accede a la pestaña Consola.
- Busca mensajes de error del tipo:
Refused to load the script because it violates the following Content Security Policy...
Esto te dirá qué directiva (por ejemplo, script-src, img-src) está bloqueando el recurso.
3. Configurar correctamente el encabezado CSP
Debes ajustar las directivas CSP para permitir cargar los recursos necesarios y bloquear los no deseados.
Directivas principales de CSP:
default-src: Define fuentes por defecto.script-src: Controla qué scripts pueden ejecutarse.img-src: Permite controlar imágenes externas.font-src: Especifica fuentes permitidas.style-src: Controla hojas de estilo permitidas.
Ejemplo básico para habilitar recursos en tu dominio:
Content-Security-Policy: default-src 'self'; script-src 'self' https://apis.google.com;
4. Permitir recursos bloqueados
Si sabes cuáles son los recursos bloqueados, añádelos explícitamente a tu política.
Ejemplo:
Si encuentras que https://example.com/resource.js está bloqueado, añade la URL a la directiva script-src:
Content-Security-Policy: script-src 'self' https://example.com/resource.js;
⚠️ Consejo profesional: Evita usar comodines como
*en tus directivas para minimizar riesgos de seguridad.
5. Configurar ejecución de scripts inline
Si necesitas ejecutar scripts inline, hay dos opciones:
-
Usar
unsafe-inlineContent-Security-Policy: script-src 'self' 'unsafe-inline';Sin embargo, esto reduce significativamente la seguridad. Úsalo solo como último recurso.
-
Usar
nonce
Genera un token único para cada carga de página y úsalo:Content-Security-Policy: script-src 'self' 'nonce-random123';
Esto restringe los scripts inline a aquellos que tienen el mismo nonce.
Generación automática de nonce
Si usas frameworks como Django o React, puedes generar nonces dinámicamente durante la renderización.
6. Configurar reportes de incumplimientos
Puedes monitorizar los eventos de políticas bloqueadas configurando la directiva report-to o report-uri. Esto te ayuda a depurar y ajustar mejor tus políticas.
Ejemplo:
Content-Security-Policy: script-src 'self'; report-uri https://your-report-endpoint.com/csp-reports;
Plataformas como Report URI ofrecen servicios para gestionar estos informes.
7. Verificar las configuraciones aplicadas
Antes de implementar, verifica que las configuraciones sean correctas:
- Herramientas de navegador: Haz clic derecho en la página, selecciona “Inspeccionar”, y revisa los encabezados HTTP en la pestaña de Red.
- Herramientas de terceros: Usa servicios como Content Security Policy Tester para comprobar la correcta configuración del CSP.
8. Resolver errores específicos en el servidor
Asegúrate de que las configuraciones del servidor no estén sobrescribiendo tus ajustes CSP:
-
Nginx: Actualiza los encabezados en el archivo de configuración:
add_header Content-Security-Policy "default-src 'self'"; -
Apache: Usa el módulo
mod_headers:Header set Content-Security-Policy "default-src 'self'";
Preguntas frecuentes
¿Qué es el Content Security Policy?
Es un estándar de seguridad que ayuda a prevenir ataques como el Cross-Site Scripting (XSS), controlando qué recursos puede cargar una página web.
¿El CSP afecta el rendimiento del sitio web?
El CSP no debería afectar negativamente al rendimiento si se configura adecuadamente. De hecho, mejora la seguridad del sitio.
¿Se deben permitir todos los recursos usando * en el CSP?
No. Usar comodines como * expone tu sitio a vulnerabilidades y contradice el propósito del CSP.
¿Qué herramientas pueden ayudar a implementar CSP?
- Navegadores con herramientas de desarrollo.
- Servicios como Report URI para gestionar errores.
- NordVPN para trabajar en configuraciones CSP desde entornos seguros.
Este enfoque detallado debería ayudarte a solucionar el error “Content Security Policy: The Page’s Settings Blocked the Loading of a Resource”. Trabaja meticulosamente para configurar las políticas sin comprometer la seguridad de tu sitio.