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.
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.
There are some way to do attack in an Angular application:
XSS attacks examples
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
Browser sanitization providers
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
[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.
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.
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.
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.