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
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
The DOM sanitization service
The goal of the DomSanitizer is to clean untrusted parts of values. The skeleton of the class looks like:
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 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
There are three main helper functions for sanitizing the values. The
sanitizeHtml function sanitizes the untrusted HTML value by parsing the value and checks its tokens. The
sanitizeUrl 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
bypassSecurityTrustX methods, and then binding to that value from the template.
bypassSecurityTrustXmethod with untrusted user data exposes your application to XSS security risks
An example for one of this method is
bypassSecurityTrustHtml for HTML values.
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.
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.