Cómo mejorar la seguridad de una aplicación web basada en Angular con la implementación automática del estándar CSP
Garantizar la seguridad informática es un requisito fundamental para las aplicaciones web modernas, y uno de los mayores riesgos continúa siendo el Cross-site scripting (XSS). Como recordatorio, este tipo de ataque ocurre cuando un código JavaScript malicioso se inyecta en un sitio web de confianza y se ejecuta en el navegador del usuario, lo que puede desencadenar acciones no autorizadas y conducir a filtraciones de datos.
El estándar de seguridad del W3C denominado Content Security Policy (CSP) fue introducido hace más de una década como una medida de protección contra ataques XSS y actualmente está evolucionando a través de su boceto de Nivel 3.
Una estrategia ampliamente recomendada para mitigar estos ataques es la implementación de un CSP estricto basado en funciones hash criptográficas, que protege la integridad de los scripts declarados en el fichero HTML exigiendo que el navegador verifique su contenido con un hash almacenado en el encabezado de respuesta Content-Security-Policy del protocolo HTTP. De esta manera, los scripts no autorizados no podrán ejecutarse, ya que sus hashes no coincidirán con los declarados en la política de seguridad.
En versión más reciente de Angular, el framework ahora maneja automáticamente la generación de estos hashes para los scripts, lo cual facilita la aplicación de reglas CSP estrictas sin que tengamos que configurarlas manualmente o generar los hashes con utilidades criptográficas en tiempo de compilación.
Cómo Angular implementa CSP basado en hashes
Angular ha venido integrando soporte para CSP desde hace años. Con Angular 16, se introdujo el CSP basado en nonces para los estilos inline, permitiendo a los desarrolladores usar el atributo ngCspNonce o el token de inyección CSP_NONCE para gestionar estilos de manera más segura. Esto es importante porque los estilos también pueden ser explotados en ataques XSS a través de modificaciones no autorizadas, CSS keylogging o inyección de hojas de estilo externas.
Recientemente, Angular 19 lanzó como Developer Preview un mecanismo automático para generar las reglas CSP estrictas basadas en hashes, simplificando la protección de las aplicaciones contra vulnerabilidades XSS.
Para habilitar esta función, debemos acceder al fichero angular.json y configurar la nueva propiedad autoCSP de la siguiente forma:
{
“projects”: {
“<app>”: {
“architect”: {
“build”: {
“options”: {
“security”: {
“autoCSP”: true
}
…
}
Cuando esta opción está activada, el Angular builder computa un hash SHA-256 para todos los scripts basado en su contenido y declara esta información en la meta-etiqueta CSP. Esto garantiza que solo los scripts originales puedan ejecutarse. Cualquier script modificado o no autorizado es bloqueado por el navegador, ya que son validados contra las reglas CSP establecidas.
En lugar de declarar directamente los ficheros JavaScript en los elementos <script>, Angular ahora usa una función de JavaScript para gestionar la carga de los ficheros, aprovechando la regla strict-dynamic de CSP. Gracias a esta implementación, los scripts adicionales no necesitan hashes individuales.
Tradicionalmente, el fichero index.html generado por Angular declara directamente las fuentes de JavaScript en elementos <script>, lo que los hace potencialmente vulnerables a la ejecución no autorizada si un atacante obtiene control sobre el contenido del fichero. Antes de habilitar el nuevo mecanismo automático de CSP, el index.html se genera de la siguiente forma:
https://medium.com/media/c224d5cf98964b6a6b3da23c5dfbf925/href
Este enfoque presenta riesgos potenciales de XSS, ya que un atacante puede modificar el fichero y ejecutar scripts maliciosos sin restricciones.
Después de habilitar autoCSP en la configuración de Angular, el fichero index.html se genera de la siguiente manera:
https://medium.com/media/5122fcdf5ab825531bdcecc926272da8/href
Cabe destacar que desactivar la instrucción autoCSP en modo desarrollo nos puede resultar útil para depuración y pruebas, ya que las restricciones estrictas de CSP pueden dificultar la inspección y manipulación de scripts durante el desarrollo. Una vez que esta funcionalidad de Angular salga de la fase de Developer Preview, se espera que comience a habilitarse por defecto en entornos de producción.
Conclusión
Habilitar las reglas de CSP estrictas basadas en funciones hash en Angular es una excelente manera de añadir otra capa adicional de seguridad a nuestras aplicaciones web. Permitir que el framework genere automáticamente estos hashes a partir del contenido de los scripts originales, simplifica el cumplimiento del estándar CSP y protege nuestras aplicaciones contra las vulnerabilidades XSS sin esfuerzo adicional de nuestra parte.
¿Qué otras medidas crees que podamos tomar hoy en día para seguir mejorando la seguridad de nuestras aplicaciones basadas en Angular?
Habilitando reglas del estándar de seguridad web CSP en Angular was originally published in ngconf on Medium, where people are continuing the conversation by highlighting and responding to this story.