xss - angularjs + cross-site scripting preventing

Question

Is Angularjs takes care of XSS attack. I have read that ng-bind takes care. But When i try to do a sample to test that, it allows me to insert html tags in input type with ng-model...it didn't escape the Html tags.

I have lot of input element in our page, which binds with ng-model, what should I do to make sure if I input a html tags ,angular ignores the html/scrip tags.

ex.

<input id="name" ng-model="name"></input>

if I input as

'Hello, <b>World</b>!'

$scope.name contains the same what I entered ,didn't exclude the tags. i.e

  var val = $scope.name;
  console.log(val); 

prints as same

'Hello, <b>World</b>!'

Please let me know how to solve this in angularjs.

thank

Answer 1

Look at here : http://docs.angularjs.org/api/ngSanitize/service/$sanitize

If you want escape use ng-bind, it ll render the tag without interpretation like that :

Hello <b>World</b> not like Hello World !

Do you understand ? so ng-bind is safe because it doesn't care about HTML tags.

If you want that your HTML tags be interpreted but safely just use ng-bind-html !

For example if you want to display this string :

'Hello <b>World</b><input type="text" />'

The result will be : Hello World but without the input because AngularJS compiler uses $sanitize service and check a whitelist of HTML elements and an iput is not authorized.

Maybe ng-bind-html is what you're looking for.

If you just want be sure that the user can't put html tags in your input just use the directive ng-pattern on your inputs !

http://docs.angularjs.org/api/ng/directive/input

It takes a regex for allowed characters in your input !

Hope it helps !