CSP y CORS: ¿Qué son y por qué deberías usarlas?

Es muy probable que en algún momento de tu vida hayas escuchado por un motivo u otro nombrar CSP o CORS, o ambas cabeceras HTTP, y que si no aclaraste los conceptos recuerdes que ambas cabeceras de seguridad parecen funcionar de manera similar, pero en realidad no es así.

Cross Origin Resource Sharing (CORS) y Content Security Policy (CSP) son dos cabeceras usadas en el protocolo HTTP que cuando se implementan ayudando a mejorar la seguridad de una aplicación web. 

Podemos decir que ambas cabeceras HTTP (CORS y CSP) permiten gestionar y controlar mediante una “whitelist” a los propietarios el origen de los recursos en su aplicación web, y de este modo aumentar la seguridad del activo digital.

CORS

Citando a MDN Web Docs:

El Intercambio de Recursos de Origen Cruzado (CORS) es un mecanismo que utiliza cabeceras HTTP adicionales para permitir que un user-agent obtenga permiso para acceder a recursos seleccionados desde un servidor, en un origen distinto (dominio) al que pertenece. Un agente crea una petición HTTP de origen cruzado cuando solicita un recurso desde un dominio distinto, un protocolo o un puerto diferente al del documento que lo generó.

Es decir, que si desde una página web realizamos una petición XHR a otra, el navegador internamente inicia con una solicitud de OPTIONS de verificación. Cuando el servidor al que se le ha lanzado la petición responde, verifica la respuesta y evalúa que en la lista de orígenes permitidos está la web desde la que se lanza la petición.

Algunos encabezados clave enviados como respuesta a la solicitud de OPTIONS comentanda anteriormente son:

• Access-Control-Allow-Origin: Tendrá una lista con los sites permitidos (como si de una whitelist se tratara). Para peticiones desde cualquier sitio se debe especificar «*», de este modo, el acceso al recurso a cualquier origen. 
• Access-Control-Allow-Methods: Lista de métodos HTTP permitidos: PUT, POST, etc.
• Access-Control-Request-Headers: Si se establece, las cookies son enviadas por el navegador.

CSP

Citando a MDN Web Docs:

Política de Seguridad del Contenido o (CSP) – del inglés Content Security Policy – es una capa de seguridad adicional que ayuda a prevenir y mitigar algunos tipos de ataque, incluyendo Cross Site Scripting (XSS) y ataques de inyección de datos. Estos ataques son usados con diversos propósitos, desde robar información hasta la desfiguración de sitios o distribución de malware.

Es decir, el objetivo principal es proteger frente a los ataques de Cross-Site Scripting (XSS) estableciendo en qué secuencias de comandos se debe confiar y cuáles no. Cuando un navegador intenta ejecutar un script desde una fuente desconocida, CSP lo bloqueará. 

CSP se establece a través del encabezado HTTP Content-Security-Policy.

Una vez explicadas ambas, podemos decir que la diferencia con CORS, es que CORS evita que desde un tercer sitio se acceda a nuestro activo digital, mientras que CSP evita que un sitio web cargue contenido de un tercero.

Para aclarar un poco más cada una de las cabeceras, nos valdremos del siguiente ejemplo. 

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)

Ahora ya sabes diferenciar CORS y CSP, pero quizás, pueda surgirte alguna duda todavía. ¡No dudes en comentárnosla! 🚀

Contacta aquí