Name: HTML with ngSanitize and SCE
Uploaded: 2014-02-07T09:23:23-06:00
Description: Safely render arbitrary HTML snippets by using ngSanitize and $sce.

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

HTML with ngSanitize and SCE



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 AngularJS.org 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.

HTML with ngSanitize and SCE

Share this video with your friends