How Angular Protects Us From XSS Attacks?

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 bypassSecurityTrustX method 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.