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

Solution 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 !

Solution 2

I don't believe that AngularJS has default whitelist input validation, which is what your test exercises. So a user can pretty much input anything they like. This is not surprising - whitelists are very domain specific, and Angular is a framework designed for a wide range of domains.

The main defense against XSS is to properly encode all untrusted data (see https://www.owasp.org/index.php/Top_10_2013-A3-Cross-Site_Scripting_(XSS)). This, Angular does by default.

Bottom line is that AngularJS is intended to be secure from XSS by default, no special action required. You can verify some basic scenarios by trying to output what you input into a view using the normal {{scopevariable}} notation.

I did find a detailed analysis of AngularJS XSS vulnerability: https://code.google.com/p/mustache-security/wiki/AngularJS. At the end of the comments, there is a link to a google doc with further discussion and response from the angular team.

Comments

[Thomas Pons]

Of course your tags are here but not interpreted ! It's dangerous if these tags are interpreted !

[kravietz]

These tags are output by Angular as &lt;b&gt; actually, then most browsers will render them as <b> but they will be not interpreted as HTML tag.

[dav10]

But I am using ng-model for all input elements in all the pages.So how do I prevent XSS in ng-model inputs? As ng-bind is one-way and ng-model is for two-way, i need to prevent for ng-model. Also I tried using ng-bind for input element and for label tag , it still allowed me to have html tags inside. ex. <label ng-bind="first"></label> <input ng-bind="name"> .In controller : $scope.first = 'Hello <b>World</b><input type="text" />'; $scope.name= 'Hello <b>World</b><input type="text" />'; It displayed both label and input with html tags, i.e it didnt escape tags; so ng-bind also didnt work.

[dav10]

so u mean, angularjs is not supporting in-build on ng-model the XSS prevention.and applying ng-pattern in all the places is more work..let me know if any other way we can achieve this. But angular faq says it provides built-in protection from basic security holes including cross-site scripting and HTML injection attacks. docs.angularjs.org/misc/faq . thanks..