Join egghead, unlock knowledge.

Want more egghead?

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

Unlock This Lesson
Become a member
to unlock all features

    HTML with ngSanitize and SCE

    John LindquistJohn Lindquist

    Safely render arbitrary HTML snippets by using ngSanitize and $sce.



    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


    John Lindquist: If you would like to build a little wizzy wig HTML editor and render some HTML snippets on your page, you'd probably think I'll just set up a text area, and I'll give it an NG model of some HTML.

    Then I'll just make a div with that NG bind HTML directive that I've seen around, and I'll just bind that to my, some HTML, and I should be good to go. But if you try it, you'll see that it throws this "Attempting to use an unsafe value in a safe context."

    I set up this HTML snippet beforehand, and it's just a learn stuff anchor with a href to Egghead. That's all I'm trying to render, but it says you can't render that in this content.

    What I'm going to do is I'm going to install angular sanitize, it's just bower install angular sanitize. This will grab the angular sanitize library, you can download it from as well.

    Once you have that ready and you simply include it, angular sanitize. Then in my app I load the sanitize module by saying ng sanitize. If I refresh this, that warning will go away. It has sanitized the HTML and I can change things, or change things if you're a "Community" fan.

    I'll close the terminal, and I want to make one more change here. Maybe I want to add a style, let's say style, and I want this color to be red. Because red links are cool. I refresh, and my link is not red, and I don't get any warning at all and I'm not sure what's happening.

    That's because angular's doing a contextual escaping still. It's saying, well that's a potentially bad thing to inject in your HTML, you've going to have to use something called the strict contextual escaping service, which can take any bit of HTML, say hey I trust this as HTML, don't worry about escaping all of that stuff that might potentially be unsafe so that when I refresh here, now it's actually red, because I've trusted this.

    That this is something I know is good and is not going to harm my app. Because by default angular's going to escape all this stuff and ignore it, because it's potentially unsafe.

    It's two levels of, if it's just HTML and you want to bind to it, include sanitize. If it's HTML and it has some sort of styles or events that could be added to it, then make sure you trust it as well to avoid any sort of hackers getting into your site.