Angular
Lista de verificación
Lista de verificación desde aquí.
¿Qué es Angular
Angular es un marco de front-end potente y de código abierto mantenido por Google. Utiliza TypeScript para mejorar la legibilidad y depuración del código. Con mecanismos de seguridad sólidos, Angular previene vulnerabilidades comunes del lado del cliente como XSS y redirecciones abiertas. También se puede utilizar en el lado del servidor, por lo que las consideraciones de seguridad son importantes desde ambos ángulos.
Arquitectura del marco
Para comprender mejor los conceptos esenciales de Angular, veamos su arquitectura básica.
Un proyecto Angular común suele tener esta apariencia:
Según la documentación, cada aplicación Angular tiene al menos un componente, el componente raíz (AppComponent
) que conecta una jerarquía de componentes con el DOM. Cada componente define una clase que contiene datos y lógica de la aplicación, y está asociado con una plantilla HTML que define una vista a ser mostrada en un entorno objetivo. El decorador @Component()
identifica la clase inmediatamente debajo de él como un componente, y proporciona la plantilla y metadatos específicos del componente relacionados. El AppComponent
está definido en el archivo app.component.ts
.
Los NgModules de Angular declaran un contexto de compilación para un conjunto de componentes dedicado a un dominio de aplicación, un flujo de trabajo, o un conjunto de capacidades estrechamente relacionadas. Cada aplicación Angular tiene un módulo raíz, convencionalmente llamado AppModule
, que proporciona el mecanismo de arranque que inicia la aplicación. Una aplicación típicamente contiene muchos módulos funcionales. El AppModule
está definido en el archivo app.module.ts
.
El NgModule Router
de Angular proporciona un servicio que te permite definir una ruta de navegación entre los diferentes estados de la aplicación y jerarquías de vistas en tu aplicación. El RouterModule
está definido en el archivo app-routing.module.ts
.
Para datos o lógica que no están asociados con una vista específica, y que deseas compartir entre componentes, creas una clase de servicio. La definición de una clase de servicio es inmediatamente precedida por el decorador @Injectable()
. El decorador proporciona los metadatos que permiten que otros proveedores sean inyectados como dependencias en tu clase. La inyección de dependencias (DI) te permite mantener tus clases de componentes livianas y eficientes. No obtienen datos del servidor, validan la entrada del usuario, o registran directamente en la consola; delegan tales tareas a los servicios.
Configuración de Sourcemap
El framework Angular traduce archivos TypeScript a código JavaScript siguiendo las opciones de tsconfig.json
y luego construye un proyecto con la configuración de angular.json
. Al observar el archivo angular.json
, notamos una opción para habilitar o deshabilitar un sourcemap. Según la documentación de Angular, la configuración predeterminada tiene un archivo sourcemap habilitado para scripts y no está oculto por defecto:
Generalmente, los archivos de sourcemap se utilizan con fines de depuración ya que mapean archivos generados a sus archivos originales. Por lo tanto, no se recomienda usarlos en un entorno de producción. Si los sourcemaps están habilitados, mejoran la legibilidad y ayudan en el análisis de archivos replicando el estado original del proyecto Angular. Sin embargo, si están deshabilitados, un revisor aún puede analizar un archivo JavaScript compilado manualmente buscando patrones anti-seguridad.
Además, un archivo JavaScript compilado con un proyecto Angular se puede encontrar en las herramientas de desarrollo del navegador → Fuentes (o Depurador y Fuentes) → [id].main.js. Dependiendo de las opciones habilitadas, este archivo puede contener la siguiente línea al final //# sourceMappingURL=[id].main.js.map
o puede que no, si la opción hidden está establecida en true. Sin embargo, si el sourcemap está deshabilitado para scripts, las pruebas se vuelven más complejas y no podemos obtener el archivo. Además, el sourcemap se puede habilitar durante la construcción del proyecto como ng build --source-map
.
Vinculación de datos
La vinculación se refiere al proceso de comunicación entre un componente y su vista correspondiente. Se utiliza para transferir datos hacia y desde el framework Angular. Los datos pueden pasarse a través de varios medios, como eventos, interpolación, propiedades o a través del mecanismo de vinculación bidireccional. Además, los datos también se pueden compartir entre componentes relacionados (relación padre-hijo) y entre dos componentes no relacionados utilizando la función de Servicio.
Podemos clasificar la vinculación por flujo de datos:
Fuente de datos al objetivo de vista (incluye interpolación, propiedades, atributos, clases y estilos); se puede aplicar utilizando
[]
o{{}}
en la plantilla;Objetivo de vista a fuente de datos (incluye eventos); se puede aplicar utilizando
()
en la plantilla;Bidireccional; se puede aplicar utilizando
[()]
en la plantilla.
La vinculación se puede realizar en propiedades, eventos y atributos, así como en cualquier miembro público de una directiva fuente:
Modelo de seguridad de Angular
El diseño de Angular incluye la codificación o sanitización de todos los datos de forma predeterminada, lo que hace cada vez más difícil descubrir y explotar vulnerabilidades XSS en proyectos de Angular. Hay dos escenarios distintos para el manejo de datos:
Interpolación o
{{entrada_usuario}}
- realiza una codificación sensible al contexto e interpreta la entrada del usuario como texto;
Resultado: <script>alert(1)</script><h1>prueba</h1>
2. Vinculación a propiedades, atributos, clases y estilos o [atributo]="entrada_usuario"
- realiza una sanitización basada en el contexto de seguridad proporcionado.
Resultado: <div><h1>prueba</h1></div>
Hay 6 tipos de SecurityContext
:
None
;HTML
se utiliza al interpretar el valor como HTML;STYLE
se utiliza al vincular CSS en la propiedadstyle
;URL
se utiliza para propiedades de URL, como<a href>
;SCRIPT
se utiliza para código JavaScript;RESOURCE_URL
como una URL que se carga y se ejecuta como código, por ejemplo, en<script src>
.
Vulnerabilidades
Métodos de confianza de seguridad de bypass
Angular introduce una lista de métodos para evitar su proceso de sanitización predeterminado e indicar que un valor se puede utilizar de forma segura en un contexto específico, como en los siguientes cinco ejemplos:
bypassSecurityTrustUrl
se utiliza para indicar que el valor dado es una URL de estilo segura:
bypassSecurityTrustResourceUrl
se utiliza para indicar que el valor dado es una URL de recurso segura:
bypassSecurityTrustHtml
se utiliza para indicar que el valor dado es HTML seguro. Tenga en cuenta que insertar elementosscript
en el árbol DOM de esta manera no hará que se ejecute el código JavaScript contenido, debido a cómo se agregan estos elementos al árbol DOM.
bypassSecurityTrustScript
se utiliza para indicar que el valor dado es JavaScript seguro. Sin embargo, encontramos que su comportamiento es impredecible, ya que no pudimos ejecutar código JS en plantillas utilizando este método.
bypassSecurityTrustStyle
se utiliza para indicar que el valor dado es CSS seguro. El siguiente ejemplo ilustra la inyección de CSS:
Angular proporciona un método sanitize
para sanear los datos antes de mostrarlos en las vistas. Este método emplea el contexto de seguridad proporcionado y limpia la entrada en consecuencia. Sin embargo, es crucial utilizar el contexto de seguridad correcto para los datos y el contexto específicos. Por ejemplo, aplicar un sanitizador con SecurityContext.URL
en contenido HTML no proporciona protección contra valores HTML peligrosos. En tales escenarios, el uso incorrecto del contexto de seguridad podría llevar a vulnerabilidades XSS.
Inyección de HTML
Esta vulnerabilidad ocurre cuando la entrada del usuario se vincula a cualquiera de las tres propiedades: innerHTML
, outerHTML
o srcdoc
de iframe
. Si bien la vinculación a estas atributos interpreta el HTML tal como es, la entrada se sanea utilizando SecurityContext.HTML
. Por lo tanto, la inyección de HTML es posible, pero no lo es el scripting entre sitios (XSS).
Ejemplo de uso de innerHTML
:
El resultado es <div><h1>test</h1></div>
.
Inyección de plantillas
Representación del lado del cliente (CSR)
Angular aprovecha plantillas para construir páginas dinámicamente. El enfoque implica encerrar expresiones de plantilla para que Angular las evalúe dentro de dobles llaves ({{}}
). De esta manera, el marco ofrece funcionalidades adicionales. Por ejemplo, una plantilla como {{1+1}}
se mostraría como 2.
Normalmente, Angular escapa la entrada del usuario que puede confundirse con expresiones de plantilla (por ejemplo, caracteres como `< > ' " ``). Esto significa que se requieren pasos adicionales para evitar esta restricción, como utilizar funciones que generen objetos de cadena de JavaScript para evitar el uso de caracteres en la lista negra. Sin embargo, para lograr esto, debemos considerar el contexto de Angular, sus propiedades y variables. Por lo tanto, un ataque de inyección de plantillas puede aparecer de la siguiente manera:
Como se muestra arriba: constructor
se refiere al alcance de la propiedad constructor
del objeto, lo que nos permite invocar el constructor de String y ejecutar un código arbitrario.
Renderizado del Lado del Servidor (SSR)
A diferencia de CSR, que ocurre en el DOM del navegador, Angular Universal es responsable del SSR de archivos de plantilla. Estos archivos son luego entregados al usuario. A pesar de esta distinción, Angular Universal aplica los mismos mecanismos de sanitización utilizados en CSR para mejorar la seguridad de SSR. Una vulnerabilidad de inyección de plantillas en SSR puede ser detectada de la misma manera que en CSR, porque el lenguaje de plantillas utilizado es el mismo.
Por supuesto, también existe la posibilidad de introducir nuevas vulnerabilidades de inyección de plantillas al emplear motores de plantillas de terceros como Pug y Handlebars.
XSS
Interfaces del DOM
Como se mencionó anteriormente, podemos acceder directamente al DOM utilizando la interfaz Document. Si la entrada del usuario no se valida previamente, puede dar lugar a vulnerabilidades de scripting entre sitios (XSS).
Utilizamos los métodos document.write()
y document.createElement()
en los ejemplos a continuación:
Clases de Angular
Existen algunas clases que se pueden utilizar para trabajar con elementos del DOM en Angular: ElementRef
, Renderer2
, Location
y Document
. Una descripción detallada de las dos últimas clases se encuentra en la sección Redirecciones abiertas. La principal diferencia entre las dos primeras es que la API de Renderer2
proporciona una capa de abstracción entre el elemento del DOM y el código del componente, mientras que ElementRef
simplemente mantiene una referencia al elemento. Por lo tanto, según la documentación de Angular, la API de ElementRef
solo debe utilizarse como último recurso cuando se necesita acceso directo al DOM.
ElementRef
contiene la propiedadnativeElement
, que se puede utilizar para manipular los elementos del DOM. Sin embargo, el uso incorrecto denativeElement
puede resultar en una vulnerabilidad de inyección de XSS, como se muestra a continuación:
A pesar de que
Renderer2
proporciona una API que se puede utilizar de forma segura incluso cuando no se admite el acceso directo a los elementos nativos, aún tiene algunas fallas de seguridad. ConRenderer2
, es posible establecer atributos en un elemento HTML utilizando el métodosetAttribute()
, que no tiene mecanismos de prevención de XSS.
Para establecer la propiedad de un elemento del DOM, se puede utilizar el método
Renderer2.setProperty()
y desencadenar un ataque XSS:
Durante nuestra investigación, también examinamos el comportamiento de otros métodos de Renderer2
, como setStyle()
, createComment()
y setValue()
, en relación con las inyecciones de XSS y CSS. Sin embargo, no pudimos encontrar vectores de ataque válidos para estos métodos debido a sus limitaciones funcionales.
jQuery
jQuery es una biblioteca de JavaScript rápida, pequeña y rica en funciones que se puede utilizar en el proyecto de Angular para ayudar con la manipulación de objetos del DOM HTML. Sin embargo, como se sabe, los métodos de esta biblioteca pueden ser explotados para lograr una vulnerabilidad de XSS. Para discutir cómo algunos métodos vulnerables de jQuery pueden ser explotados en proyectos de Angular, agregamos esta subsección.
El método
html()
obtiene el contenido HTML del primer elemento en el conjunto de elementos coincidentes o establece el contenido HTML de cada elemento coincidente. Sin embargo, por diseño, cualquier constructor o método de jQuery que acepte una cadena HTML potencialmente puede ejecutar código. Esto puede ocurrir mediante la inyección de etiquetas<script>
o el uso de atributos HTML que ejecutan código, como se muestra en el ejemplo.
El método
jQuery.parseHTML()
utiliza métodos nativos para convertir la cadena en un conjunto de nodos del DOM, que luego se pueden insertar en el documento.
Como se mencionó anteriormente, la mayoría de las API de jQuery que aceptan cadenas HTML ejecutarán scripts que se incluyen en el HTML. El método jQuery.parseHTML()
no ejecuta scripts en el HTML analizado a menos que keepScripts
sea explícitamente true
. Sin embargo, aún es posible en la mayoría de los entornos ejecutar scripts de forma indirecta; por ejemplo, a través del atributo <img onerror>
.
Redirecciones abiertas
Interfaces del DOM
Según la documentación de W3C, los objetos window.location
y document.location
se tratan como alias en los navegadores modernos. Es por eso que tienen una implementación similar de algunos métodos y propiedades, lo que podría causar una redirección abierta y XSS del DOM con ataques de esquema javascript://
como se menciona a continuación.
window.location.href
(ydocument.location.href
)
La forma canónica de obtener el objeto de ubicación del DOM actual es utilizando window.location
. También se puede utilizar para redirigir el navegador a una nueva página. Como resultado, tener control sobre este objeto nos permite explotar una vulnerabilidad de redirección abierta.
El proceso de explotación es idéntico para los siguientes escenarios.
window.location.assign()
(ydocument.location.assign()
)
Este método hace que la ventana cargue y muestre el documento en la URL especificada. Si tenemos control sobre este método, podría ser un punto de ataque para una redirección abierta.
window.location.replace()
(ydocument.location.replace()
)
Este método reemplaza el recurso actual con el que se encuentra en la URL proporcionada.
La diferencia con el método assign()
es que después de usar window.location.replace()
, la página actual no se guardará en el Historial de sesión. Sin embargo, también es posible explotar una vulnerabilidad de redirección abierta cuando tenemos control sobre este método.
window.open()
El método window.open()
toma una URL y carga el recurso que identifica en una nueva pestaña o ventana, ya sea nueva o existente. Tener control sobre este método también podría ser una oportunidad para desencadenar una vulnerabilidad de XSS o redirección abierta.
Clases de Angular
Según la documentación de Angular,
Document
de Angular es igual al documento del DOM, lo que significa que es posible utilizar vectores comunes para el documento del DOM para explotar vulnerabilidades del lado del cliente en Angular. Las propiedades y métodos deDocument.location
podrían ser puntos de ataque para ataques exitosos de redirección abierta, como se muestra en el ejemplo: