Angular, Cross-Site Scripting attack and the Sanitization process article This 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: — when interpreting a value as HTML HTML — when binding CSS Style — when using URL properties URL 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 in the sanitization providers 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 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 method, which gets security context and untrusted value and returns a trusted value. The security context is the value use. bypassSecurityTrustX sanitize If a value is trusted for the context, this 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: sanitize The sanitize method The central part of the method is the block. The value checked according to the security context. The objects are just objects that have method to be able to use functionality. There are three main helper functions for sanitizing the values. The function sanitizes the untrusted HTML value by parsing the value and checks its tokens. The and functions sanitize the untrusted style/URL value by regular expressions. switch-case SafeXImpl getTypeName instanceof [sanitizeHtml](https://github.com/angular/angular/blob/5293794316cc1b0f57d5d88b3fefdf6ae29d0d97/packages/platform-browser/src/security/html_sanitizer.ts) [sanitizeStyle](https://github.com/angular/angular/blob/5293794316cc1b0f57d5d88b3fefdf6ae29d0d97/packages/platform-browser/src/security/style_sanitizer.ts) [sanitizeUrl](https://github.com/angular/angular/blob/5293794316cc1b0f57d5d88b3fefdf6ae29d0d97/packages/platform-browser/src/security/url_sanitizer.ts) 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 style link with a dynamic value in it. Users can bypass security by constructing a value with one of the methods, and then binding to that value from the template. `javascript:` bypassSecurityTrustX Calling method with untrusted user data exposes your application to XSS security risks bypassSecurityTrustX An example for one of this method is for HTML values. bypassSecurityTrustHtml 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.
