Qué es CORS y CSP y cómo utilizarlos?

[Kiquenet]

https://www.makingscience.es/blog/csp-y-cors-que-son-y-por-que-deberias-usarlas/

Supongamos que nuestro website es mywebsite.com y que otherwebsite.com es otro con “malas intenciones“.

Usando cabeceras CORS evitaremos este tipo de peticiones, ya que otherwebsite.com no se encuentra en la lista de orígenes permitidos.

mywebsite.com <———— X ———— otherwebsite.com 

                 (mywebsite.com/style.css)

Por otro lado, si tenemos configurada la cabecera CSP en nuestra web, y alguien intenta realizar una llamada desde mywebsite.com a otra URL que no tenemos permitida, el navegador bloqueará dicha petición.

mywebsite.com ———— X ————> otherwebsite.com

                  (otherwebsite.com/script.js)

Algún ejemplo completo donde se vea cómo poner las cabeceras (sean de request o response)?

[Kiquenet]

Refused to load the script 'https://cdn.jsdelivr.net/npm/domp...@3.2.6/dist/purify.min.js' because it violates the following Content Security Policy directive: "script-src 'self' apigateway.XYZ.es 'nonce-NWE4OTJkZTMtYTdlYS00NDZkLTllOGYtMmQwZjJhNDRkMTI4'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Este error indica que el navegador ha bloqueado la carga del script externo https://cdn.jsdelivr.net/npm/domp...@3.2.6/dist/purify.min.js debido a la política de seguridad de contenido (CSP) definida en tu aplicación web. La directiva script-src especifica que solo se permiten scripts desde ciertas fuentes, y cdn.jsdelivr.net no está incluida.

✅ Opción 1: Añadir cdn.jsdelivr.net a la política CSP

Si puedes modificar la política CSP en el servidor (por ejemplo, en los headers HTTP), añade https://cdn.jsdelivr.net como fuente permitida:

Content-Security-Policy: script-src 'self' apigateway.XYZ.es https://cdn.jsdelivr.net 'nonce-NWE4OTJkZTMtYTdlYS00NDZkLTllOGYtMmQwZjJhNDRkMTI4';

Cómo se genera ese nonce ??

✅ Opción 2: Servir el script localmente

Descarga el archivo purify.min.js y colócalo en tu servidor, luego inclúyelo desde una ruta que esté permitida por la política CSP (por ejemplo, 'self'):

✅ Opción 3: Usar un paquete NPM si estás en un entorno con bundler

Si estás usando Webpack, Vite, o similar, puedes instalar DOMPurify como dependencia:

npm install dompurify

Y luego importarlo directamente en tu código:

import DOMPurify from 'dompurify';

Esto evita la necesidad de cargar scripts externos.

Un nonce (de number used once) en el contexto de la Content Security Policy (CSP) es un valor aleatorio y único que se genera en cada carga de página y se utiliza para permitir la ejecución de scripts inline o externos específicos, incluso si la política CSP normalmente los bloquearía.

¿Para qué sirve un nonce?

Sirve para autorizar de forma segura ciertos scripts sin tener que permitir fuentes externas de forma general (lo cual puede ser riesgoso). Solo los scripts que tengan el atributo nonce="valor" coincidente con el definido en la política CSP podrán ejecutarse.

---

¿Hay que meterlo?

Depende de tu configuración:

• Si usas CSP con nonce, sí, debes incluir el atributo nonce="..." en cada <script> que quieras permitir.
• El valor del nonce debe coincidir con el que se define en el header CSP del servidor

¿Y si el script está en un CDN como jsDelivr?

Aunque pongas el nonce, no funcionará si la fuente (cdn.jsdelivr.net) no está permitida en la directiva script-src. En ese caso, tienes dos opciones:

1. Añadir cdn.jsdelivr.net a la CSP (como te comenté antes).
2. Servir el script localmente y usar el nonce.

🔍 Diferencias entre script-src y script-src-elem
script-src Controla todos los scripts, incluyendo los inline, externos y dinámicos.
script-src-elem
Controla solo los elementos <script> que están en el HTML (no dinámicos).
🧠 ¿Por qué es importante?

Si solo defines script-src, esa directiva se aplica como fallback para script-src-elem y otras relacionadas. Pero si defines script-src-elem explícitamente, entonces solo esa se aplica a los <script> en el HTML, y script-src ya no afecta a esos elementos.

Esto te permite tener un control más granular.

Content-Security-Policy: script-src 'self' 'nonce-abc123'; script-src-elem 'self' https://cdn.jsdelivr.net;

En este caso:

• Los scripts inline o dinámicos (por ejemplo, creados con eval() o new Function()) solo se permiten si tienen el nonce abc123.
• Los scripts externos en el HTML, como <script src="https://cdn.jsdelivr.net/...">, sí se permiten porque cdn.jsdelivr.net está en script-src-elem.

✅ ¿Debes usar script-src-elem?

Depende de tu necesidad:

• Si quieres permitir ciertos scripts externos sin relajar la seguridad de los scripts dinámicos o inline, entonces sí, usar script-src-elem puede ser útil.
• Si no defines script-src-elem, entonces script-src se aplica a todo.