Security of Angular expressions

Question

I am going through the PhoneCat tutorial for AngularJS. Everything is explained really well, so i was following along until i hit step 6 in which links are generated dynamically from angular expressions:

http://localhost:8000/app/{{phone.imageUrl}}

While the tutorial states that ngSrc is preventing the browser from making http requests to invalid locations (edit: apparently the tutorial means the browser will only call the link after the expression got evaluated. See the "Experiments" section in the provided link.), i am now wondering of how secure angular-expressions are in general. Since the phone.imageUrl is loaded externally, it theoretically could contain malicious content and i would like to understand why this would not matter to my webapp.

Obviously the content of expressions gets escaped in some way, so including the following in your code will just print out some text:

<img ng-src="{{""><script>alert('UNSAFE!')</script>"}}">

but i would like to know if there are some "rules" that you need to be aware of to keep your webapp secure. Would for instance compiling the above code via

var template = "<img ng-src="{{""><script>alert('UNSAFE!')</script>"}}">";
var something = $compile(template);

result in executing the script when the DOM is loaded? Are there "things" that you should not do in your webapp when you can't ensure that the angular expressions contain the expected content?

Answer 1

As far as I know angular always escapes any data bound to elements unless you tell it not to do so.

Your example on the other hand works differently – maybe you're a little unsure how angular works:

var template = "<img ng-src="{{userInput}}">";
var something = $compile(template)({userInput: "\"><script>alert('UNSAFE!')</script>\""});

So the template, which you have full control of, get's first compiled and then the expression is bound to it completely escaped (no html allowed).

I'd probably not compile external code ($compile(userinput)) without sanitizing it first – but that would mean you may be doing something wrong. If you code the right way, you will use $compile only in some edge cases. Otherwise you may stay calm since angular will take care of unsafe input.

If you need to bind html to template, then you can include ngSanitize. Otherwise angular won't let you bind unsafe html, unless you tell the $sce service to trust it.

In conclusion, I would not worry about binding data from untrusted sources to my template.