Angular, Cross-Site Scripting attack and the Sanitization process
This article originally appeared on dormoshe.io
XSS is one of the attacks that can affect your website. In order to cope with the attack, Angular implements concepts that keep the developers from making mistakes and opens a window to a security breach.
In this article, we will understand what an XSS attack is, how this attack can be made in an Angular application, how Angular keeps us safe and how can we disable this protection.
What is an XSS Attack?
A Cross-Site Scripting (XSS) attack is a type of injection, in which malicious scripts are injected into otherwise benign and trusted web sites. XSS attacks occur when an attacker uses a web application to send malicious code, generally in the form of a browser side script, to a different end user. Flaws that allow these attacks to succeed are quite widespread and occur anywhere a web application uses input from a user within the output it generates without validating or encoding it.
How can XSS be done in an Angular application?
There are some way to do attack in an Angular application:
- HTML — when interpreting a value as HTML
- Style — when binding CSS
- URL — when using URL properties
XSS attacks examples
How Angular prevents this attack?
To block XSS attacks, you must prevent malicious code from entering the DOM. When a value is inserted into the DOM from a template, via property, attribute, style, class binding, or interpolation, Angular sanitizes and escapes untrusted values.
Sanitization is the inspection of an untrusted value, turning it into a value that’s safe to insert into the DOM
Here is the declaration of the sanitization providers in the BrowserModule
Browser sanitization providers
The DOM sanitization service
The goal of the DomSanitizer is to clean untrusted parts of values. The skeleton of the class looks like:
The DOM sanitizer skeleton
As you can see, there are two kinds of method patterns. The first one is the bypassSecurityTrustX method, which gets the untrusted value according to the value usage and returns a trusted object (we will talk about it later). The second one is the sanitize method, which gets security context and untrusted value and returns a trusted value. The security context is the value use.
If a value is trusted for the context, this sanitize method will unwrap the contained safe value and use it directly. Otherwise, the value will be sanitized to be safe according to the security context. Here is the function code:
The sanitize method
The central part of the method is the switch-case block. The value checked according to the security context. The SafeXImpl objects are just objects that have getTypeName method to be able to use instanceof functionality. There are three main helper functions for sanitizing the values. The [sanitizeHtml](https://github.com/angular/angular/blob/5293794316cc1b0f57d5d88b3fefdf6ae29d0d97/packages/platform-browser/src/security/html_sanitizer.ts) function sanitizes the untrusted HTML value by parsing the value and checks its tokens. The [sanitizeStyle](https://github.com/angular/angular/blob/5293794316cc1b0f57d5d88b3fefdf6ae29d0d97/packages/platform-browser/src/security/style_sanitizer.ts) and [sanitizeUrl](https://github.com/angular/angular/blob/5293794316cc1b0f57d5d88b3fefdf6ae29d0d97/packages/platform-browser/src/security/url_sanitizer.ts) functions sanitize the untrusted style/URL value by regular expressions.
How can we disable the sanitization logic?
In specific situations, it might be necessary to disable sanitization, for example, if the application genuinely needs to produce a `javascript:` style link with a dynamic value in it. Users can bypass security by constructing a value with one of the bypassSecurityTrustX methods, and then binding to that value from the template.
Calling
bypassSecurityTrustXmethod with untrusted user data exposes your application to XSS security risks
An example for one of this method is bypassSecurityTrustHtml for HTML values.
The bypassSecurityTrustHtml method
We can see the interfaces that used by the method. The method just gets a value and returns the value as is in a wrapped object.
Conclusion
XSS attacks are common in web browsers. In those attacks, the victim is the user and not the application. Mostly, malicious values come from HTML, CSS or URL. With Angular, you are automatically in a safe place. This is done by the DOM sanitizer that sanitizes the untrusted values. You can disable this Angular protection. When you decide to do it, pay attention to the dangers and do it carefully and wisely.
You can follow me on dormoshe.io or Twitter to read more about Angular, JavaScript and web development.