The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

HTML with ngSanitize and SCE

HTML with ngSanitize and SCE

3:02
Safely render arbitrary HTML snippets by using ngSanitize and $sce.
Watch this lesson now
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
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?