Angular safe pipe implementation to bypass DomSanitizer stripping out content

First, let's understand why do we need to create a safe pipe and what role does DomSanitizer play in Angular application.

Note: The content here applies to Angular 2+

DomSanitizer, a service of Angular helps to prevent attackers from injecting malicious client-side scripts into web pages, which is often referred to as Cross-site Scripting or XSS.

Take a look at the following example,

Here we are binding a variable called ‘htmlSnippet’ to innerHTML. The attacker has control over it and might introduce malicious content which makes the application vulnerable since the code in the script will be executed.

Angular to the rescue

By default, angular recognizes all the values as unsafe and automatically sanitizes it by removing the <script> tag but keeps the text content of the <script> tag as it is. Now the script will not run and the value is safe to insert into the DOM.

And you will be getting a warning in the console as ‘sanitizing HTML stripped some content’. The warning is because the Angular’s built-in sanitizer recognized it as an unsafe value.

Bypassing Angular protection

Some applications genuinely need to include executable script or styles. In such cases, you disable Angular’s built-in sanitization. To do that we create a pipe and inject DomSanitizer service to the constructor of the pipe and call one of the following methods depending upon the context to mark the value safe.

• bypassSecurityTrustHtml
• bypassSecurityTrustScript
• bypassSecurityTrustStyle
• bypassSecurityTrustUrl
• bypassSecurityTrustResourceUrl.

If you are using Angular CLI, you can create a pipe using the following command which will create a safe.pipe.ts file in the src\app folder

ng generate pipe safe

Navigate to the safe.pipe.ts file and update it with the following content.

Angular safe pipe implementation to bypass DomSanitizer stripping out content

In the above snippet, notice that we injected DomSanitizer service in the constructor and created an instance of it.

Now depending on the value, you are dealing with, you can specify it as an input to the pipe. Here we are dealing with HTML context so we specified ‘html’ as an input to the pipe (view line number 7 in the following gist). The method that corresponds to the matched switch case, gets invoked in order to trust the given value to be safe HTML. Now code in the script is trusted and gets executed.

Take a look at the demo application that bypasses angular security to run the script — https://swarnakishore.github.io/angular-safe-pipe/

GitHub Link — https://github.com/SwarnaKishore/angular-safe-pipe

Demo of safe pipe to bypass angular security

That's all for now. If you liked this article, please 👏 below, so that other people can find it! :D