This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

HTML with ngSanitize and SCE

3:02 Angular 1.x lesson by

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

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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

Avatar
Matt

Probably unintentional, but the anchor tag in the app.someHtml is closed with a "strong" closing tag instead of an "a" closing tag.

Imagine you are building a content management system. In the cms, you have a textarea where you save chunks of important content to the database. These chunks are written in html and saved to the database as html, and you render them on the client in an ng-repeat with a custom angular filter that uses $sce.trustAsHtml.

You start thinking it sure would be nice to write some custom directives so that complex bits of html could be abstracted away, thereby making it easier for the end-user content editor to maintain the content, and for the developer to tweak the underlying html.

Then you discover this is not so easy, and you need a new directive for compiling. http://stackoverflow.com/questions/17417607/angular-ng-bind-html-unsafe-and-directive-within-it

But after going through these hoops to implement the ability to make directives work in your compiles html, you now see it is possible to save a script tag inside your database that, when rendered on the content page, will execute.

So I hope the scenario I have tried to briefly describe makes sense.

Do you have any insight on what is best practice for tackling this issue?

Thanks,
Matt

In reply to egghead.io

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?