angular

Escape or Sanitize HTML in Angular

By Dave Ceddia

Want to render some user-provided data to the page, but for whatever reason, you can’t use Angular’s {{ curly brace syntax }}?

Maybe your first thought is to mash it together with a string, like this:

var content = "<span>" + userContent + "</span>";
element.text(content);

But be careful! This kind of thing can open you up to XSS attacks and other nasty things.

You need to escape or sanitize that data before placing it on the page.

Sanitize

Angular automatically sanitizes data if you use the ng-bind-html directive. This means it strips out HTML entirely.

A string of Hello <em>World!</em> becomes Hello World.

Manually Sanitize

If you want to sanitize data without using ng-bind-html, you can use the $sanitize service. Install it and require the module as a dependency:

bower install angular-sanitize

angular.module('yourThing', ['ngSanitize', ...])

Then just inject it where needed, and use it:

function yourThing($sanitize) {
  return {
    function getContent(str) {
      return "<span>" + $sanitize(str) + "</span>";
    }
  };
}

Escape

Angular automatically escapes data if you use ng-bind or the {{ curly brace syntax }}. This means it outputs the literal characters instead of interpreting them as HTML.

Data that looks like Hello <em>World!</em> will render as Hello <em>World!</em> (not Hello World).

Manually Escape

Angular doesn’t seem to expose a built-in service for escaping. However Lodash (v3) has a _.escape function that does exactly this.

Install Lodash if you aren’t already using it: bower install lodash

Then escape your string as needed:

function yourThing() {
  return {
    function getContent(str) {
      return "<span>" + _.escape(str) + "</span>";
    }
  };
}

And with that, you and your users are safe for another day.

If you want my regularly-scheduled posts on best-practices Angular, as well as the all-new world of Angular 2, sign up for my newsletter below.

Thanks for reading!

Learning React can be a struggle — so many libraries and tools!
My advice? Ignore all of them :)
For a step-by-step approach, check out my Pure React workshop.

Pure React plant

Learn to think in React

  • 90+ screencast lessons
  • Full transcripts and closed captions
  • All the code from the lessons
  • Developer interviews
Start learning Pure React now

Dave Ceddia’s Pure React is a work of enormous clarity and depth. Hats off. I'm a React trainer in London and would thoroughly recommend this to all front end devs wanting to upskill or consolidate.

Alan Lavender
Alan Lavender
@lavenderlens