Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Use Angular style sanitization to mark dynamic styles as trusted values

    Juri StrumpflohnerJuri Strumpflohner

    Angular has a very robust security model. Dynamically inserted html, style or url values into the DOM open up possibilities for attackers to compromise your site. Thus Angular treats all values as untrusted by default. In this lesson we learn how to “sanitize” values where we are sure they are trustful.

    angularAngular
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 Here we have a neat little box. What we would like to do is to show our Gravatar image inside that box. Now, obviously, there are different kind of possibilities to do so. For the purpose of this example, we want to dynamically compute our style element here, and use a background image.

    00:18 For that purpose, we create here a getStyle function. Inside here, we simply for the first step copy in that style, and return that. Then let's create here our Gravatar URL, which in a real world example, we would probably fetch from some profile of the user.

    00:48 Then we can use the background image. We use the URL property. Here, we would like to fill in the Gravatar URL. Let's change these to backticks, which allows us to use this syntax here, Gravatar URL. Let's save this.

    01:10 Now, we want to bind this to the style property here on our element, which we do like this. Then obviously, invoke our getStyle function. Apparently, this doesn't work. Let's open the console here.

    01:26 What you can see here is a warning message from Angular which says that there's a sanitizing process that has to be done for basically marking these unsafe values background image as safe. It also links here to a URL where you can look up. This is basically the docs of Angular.

    01:45 This is because linking here a background image URL inside the style sheet, and dynamically binding that to the DOM element is a potential XSS bug, so a cross-site scripting XSS bug.

    01:58 For that purpose, Angular defines different kind of security contexts. In order to mark those properties as safe explicitly, what we need to do is to import the sanitizer, which comes from the Angular platform browser. This is the so-called DomSanitizer.

    02:19 Here, rather than returning the style string directly, we have to get the instance of the sanitizer, which we can get injected in the constructor. Now, down here, we can say this.sanitizer.

    02:38 Then we have different kind of methods here. One is for the trust of the HTML. One is for resource URLs, one for scripts, for styles, and for trusted URLs here. These are basically the security contexts Angular defines.

    02:53 In our case, we are applying a dynamic style, so we use the trust style, and we pass in here the style property. Now, we have to return this sanitized style and save again. Now, you can see the image gets displayed correctly, and there is no more warning anymore in the console.

    03:12 If you take a look at the method name, it says explicitly "bypass security trust style." Notice that the information shown here in the documentation says, "Warning -- calling this method with untrusted user data exposes your application to XSS security risks." You obviously have to apply this only if you're sure what you're doing is trustful.

    Discuss

    Discuss