Inicio/Cabeceras/Content-Security-PolicyContent-Security-PolicyUso La cabecera Content-Security-Policy (CSP) ofrece a los administradores del sitio un control preciso sobre la carga de recursos. Al declarar una política, el servidor indica al navegador que solo cargue scripts, estilos, imágenes, fuentes y otros recursos desde orígenes aprobados. Cualquier recurso que no coincida con la política queda bloqueado y el navegador notifica la infracción. Una política consta de una o varias directivas separadas por puntos y comas. Cada directiva nombra un tipo de recurso y enumera los orígenes permitidos para ese tipo de recurso. Content-Security-Policy: <directive> <source>; <directive> <source> Desplegar primero una política nueva en modo de solo informe es una práctica habitual. La cabecera Content-Security-Policy-Report-Only usa la misma sintaxis, pero registra las infracciones sin bloquear recursos, lo que permite a los administradores probar una política antes de aplicarla. Directivas de obtención Las directivas de obtención controlan las ubicaciones desde las que se cargan tipos de recursos concretos. default-src La directiva default-src actúa como alternativa para todas las demás directivas de obtención. Cuando falta una directiva de obtención específica, el navegador recurre a default-src. Content-Security-Policy: default-src 'self' script-src La directiva script-src restringe los orígenes desde los que se ejecuta JavaScript. Las listas de permitidos basadas en nonce y en hash ofrecen una protección más sólida que las reglas basadas en host. script-src-elem La directiva script-src-elem se aplica específicamente a los elementos script-src-attr La directiva script-src-attr rige los manejadores de eventos en línea como onclick y onload, de forma independiente a la carga de elementos style-src La directiva style-src especifica los orígenes válidos para las hojas de estilo CSS, incluidos los estilos en línea y los enlaces a hojas de estilo externas. style-src-elem La directiva style-src-elem se aplica a los elementos style-src-attr La directiva style-src-attr rige los estilos en línea aplicados directamente a elementos del DOM mediante el atributo style. img-src La directiva img-src especifica los orígenes válidos para imágenes y favicons. connect-src La directiva connect-src restringe las URL accesibles mediante interfaces de script, entre ellas fetch(), XMLHttpRequest, WebSocket y EventSource. font-src La directiva font-src especifica los orígenes válidos para las fuentes cargadas mediante @font-face. frame-src La directiva frame-src especifica los orígenes válidos para los contextos de navegación anidados que cargan los elementos e . media-src La directiva media-src especifica los orígenes válidos para los elementos , y . object-src La directiva object-src restringe los orígenes de los elementos y ( es un elemento heredado que se eliminó de la especificación HTML). Se recomienda establecerla en ‘none’, ya que estos elementos rara vez son necesarios. child-src La directiva child-src define los orígenes permitidos para los web workers y los contextos de navegación anidados. Las directivas más específicas frame-src y worker-src anulan a child-src cuando están presentes. worker-src La directiva worker-src se aplica a los scripts Worker, SharedWorker y ServiceWorker. manifest-src La directiva manifest-src especifica los orígenes válidos para los archivos de manifiesto de aplicaciones web. fenced-frame-src La directiva fenced-frame-src especifica los orígenes válidos para los contextos de navegación anidados que se cargan en elementos . Cuando falta, el navegador recurre a frame-src y después a default-src. Directivas de documento Las directivas de documento rigen las propiedades del entorno del documento. base-uri La directiva base-uri restringe las URL permitidas en el elemento , lo que impide que un atacante cambie la URL base de los enlaces relativos. sandbox La directiva sandbox aplica a la página restricciones similares a las del atributo sandbox de . Las páginas en espacio aislado pierden el acceso a scripts, formularios, ventanas emergentes y otras funciones, salvo que se reactiven explícitamente mediante indicadores de sandbox. Directivas de navegación Las directivas de navegación controlan a dónde envían solicitudes los usuarios y los formularios. form-action La directiva form-action restringe las URL aceptadas como destino del envío de formularios. frame-ancestors La directiva frame-ancestors especifica los elementos padre válidos que pueden incrustar la página mediante , , <object> o <embed> (el elemento <applet> se ha eliminado de la especificación HTML). Establecer frame-ancestors ‘none’ sustituye a la cabecera X-Frame-Options: DENY. navigate-to La directiva navigate-to se propuso para restringir las URL a las que el documento puede navegar por cualquier mecanismo. Esta directiva se eliminó de la especificación CSP Level 3 y nunca llegó a implementarse en ningún navegador de producción. Directivas de informes Las directivas de informes controlan el comportamiento de notificación de infracciones. report-to La directiva report-to especifica el nombre de un grupo de informes definido por la cabecera Reporting-Endpoints. Los informes de infracción se envían al endpoint asociado a ese grupo. report-uri La directiva report-uri envía los informes de infracción a una URL indicada. Esta directiva está siendo sustituida por report-to, pero sigue estando ampliamente desplegada por compatibilidad con versiones anteriores. upgrade-insecure-requests La directiva upgrade-insecure-requests indica al navegador que trate todas las URL HTTP de la página como HTTPS. Resulta valiosa durante la migración de HTTP a HTTPS, cuando muchos recursos todavía hacen referencia a URL inseguras. require-trusted-types-for La directiva require-trusted-types-for aplica políticas de Trusted Types a los puntos de inyección de XSS en el DOM, exigiendo objetos tipados en lugar de cadenas. trusted-types La directiva trusted-types especifica una lista de permitidos con nombres de políticas de Trusted Types, lo que restringe las políticas que la página puede crear. Valores de origen Las directivas aceptan expresiones de origen que definen desde dónde se cargan los recursos. ‘self’ Coincide con el origen actual (mismo esquema, host y puerto). No incluye los subdominios. ‘none’ Bloquea todos los orígenes para la directiva. No se carga ningún recurso del tipo especificado. ‘unsafe-inline’ Permite los elementos ‘unsafe-eval’ Permite la evaluación dinámica de código mediante eval(), Function() y construcciones similares. ‘unsafe-hashes’ Permite manejadores de eventos en línea concretos identificados por su hash, sin habilitar todos los scripts en línea. ‘strict-dynamic’ Extiende la confianza a los scripts cargados por un script ya confiable. Combinado con políticas basadas en nonce, elimina la necesidad de incluir en la lista de permitidos cada host de scripts por separado. ‘nonce-*’ Un nonce criptográfico (número usado una sola vez) que el servidor genera para cada respuesta. El valor del nonce en la política coincide con el atributo nonce de los elementos Content-Security-Policy: script-src 'nonce-abc123' ‘sha256-’, ‘sha384-’, ‘sha512-*’ Un hash del contenido del script o del estilo en línea. El navegador calcula el hash de cada bloque en línea y compara el resultado con los hashes de la lista de permitidos. host-source Un host o patrón de URL que especifica los orígenes permitidos. Admite comodines para subdominios (*.example.re), puertos concretos (example.re:443) y prefijos de ruta (example.re/scripts/). scheme-source Un esquema como https: o data: que permite todos los recursos servidos a través del protocolo indicado. ‘report-sample’ La palabra clave ‘report-sample’, añadida a un valor de script-src o style-src, solicita al navegador que incluya una breve muestra del código infractor en el informe de infracción. Esto ayuda a localizar el script o el estilo en línea problemático. Ejemplo Una política restrictiva que solo permite recursos del mismo origen bloquea todos los scripts en línea y la carga de recursos externos. Content-Security-Policy: default-src 'self' Una política con reglas independientes para scripts e imágenes. Los scripts se cargan únicamente desde el mismo origen, mientras que las imágenes también pueden cargarse desde una CDN de imágenes dedicada. Content-Security-Policy: default-src 'self'; img-src 'self' images.example.re Una política basada en nonce para los scripts. Cada carga de página genera un nonce nuevo y solo se ejecutan los elementos Content-Security-Policy: script-src 'nonce-r4nd0m'; style-src 'self' Una política que combina ‘strict-dynamic’ con un nonce. Los scripts confiables pueden cargar libremente scripts adicionales sin necesidad de una lista de permitidos basada en hosts individuales. Content-Security-Policy: script-src 'strict-dynamic' 'nonce-r4nd0m' Una política que notifica las infracciones a un endpoint para su supervisión mientras aplica las reglas. Content-Security-Policy: default-src 'self'; report-to csp-violations Diagnóstico Las infracciones de CSP aparecen en la consola del navegador como mensajes “Refused to…” junto con el URI del recurso bloqueado y la directiva responsable del bloqueo. Los scripts en línea se bloquean tras añadir CSP. El navegador registra Refused to execute inline script because it violates the following Content Security Policy directive: “script-src …”. La política predeterminada bloquea todos los elementos Los estilos en línea se bloquean. La consola muestra Refused to apply inline style cuando style-src no incluye ‘unsafe-inline’ ni un nonce/hash coincidente. Los frameworks que inyectan estilos en tiempo de ejecución provocan esta infracción. Añada un nonce a style-src o use ‘unsafe-inline’ mientras realiza la transición a estilos basados en nonce. Un recurso externo se bloquea porque falta el dominio en la directiva. Un error Refused to load the script o Refused to connect significa que el origen del recurso no figura en la directiva correspondiente. Abra la consola del navegador, identifique el origen bloqueado en el mensaje de infracción y añádalo a la directiva correcta (script-src, img-src, connect-src, etc.). Revise también default-src, ya que las directivas ausentes recurren al valor predeterminado. eval() está bloqueado de forma predeterminada. Las bibliotecas que dependen de eval(), new Function() o compiladores de plantillas provocan el error Refused to evaluate a string as JavaScript. Añadir ‘unsafe-eval’ a script-src restaura la funcionalidad, pero debilita la política. Es preferible refactorizar el código para evitar eval() siempre que sea posible. Google Tag Manager o los scripts de analítica dejan de funcionar con CSP. Los gestores de etiquetas inyectan scripts de forma dinámica y cada script inyectado necesita un nonce o una entrada en la lista de hosts permitidos. Añada el dominio de GTM (https://www.googletagmanager.com) a script-src y https://www.google-analytics.com a connect-src e img-src. En políticas basadas en nonce, use ‘strict-dynamic’ para que los scripts cargados por un script de GTM confiable hereden la confianza sin necesidad de entradas de host individuales. Depuración de infracciones en la consola del navegador. Abra DevTools y revise la pestaña Console en busca de mensajes de infracción de CSP. Cada mensaje indica el URI bloqueado, la directiva infringida y la política completa. En Chrome, la pestaña Network marca las solicitudes bloqueadas con el estado (blocked:csp). Firefox ofrece un detalle similar tanto en el panel Console como en el Network. Pruebe una política de forma segura con el modo Report-Only. Despliegue primero la política mediante la cabecera Content-Security-Policy-Report-Only. Así se registran las infracciones sin bloquear ningún recurso. Supervise los informes de infracción, corrija los orígenes que falten y cambie a la cabecera Content-Security-Policy que aplica las reglas cuando el flujo de informes esté limpio.