angularjs + cross-site scripting preventing - angularjs

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

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 !

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.

Related

How to render special characters like ™ in HTML with Angular JS

I have some special characters to show in various screens of my application so i wanted to have some way where i can handle special characters like "special char - æ ™ &amp" in controller/service instead of HTML.
I know i can use
ng-bind-html
to show special characters for the example string above. However i need to show same string in multiple screens so it would make more sense for me to do it in JS. Any alternative or equivalent JS side snippet for ng-bind-html?
Note: If you have come across these kind of strings you might be knowing that they can be rendered directly with HTML but if you are using Angular JS with
{{some scope value}}
then it doesn't format special characters on it's own.
You can use $sce like so:
function myCtrl($scope,$sce){
$scope.html = $sce.trustAsHtml('HTML_CODE;');
}
And then in your HTML you use ng-bind-html to bind the content to an element.
<span ng-bind-html="html"></span>

Unescape and then sanitize data in Angular

The API I am using automatically escapes any strings from user inputs(as it should). I am having a real hard time finding the best way to unescape/sanitize the data to then use on my page. Is a directive a good route to go here?
Sample Response
<b>This is the response!</b><br><br><i>It comes in italic, too.</i>
Template
<div ng-bind-html="groupsDetailCtrl.group.information.text"></div>
<!-- Or pass in to directive? -->
<group-information content="groupsDetailCtrl.group.information.text"></group-information>
Currently Output on page is just something like this
<b>This is the response</b>
When of course it should be
This is the response

AngularJS + TinyMCE: ng-maxlength is not working on <textarea>

I want to limit max text length so it doesn't exceed a column length in a DB. I've put this limitation on backend, and now I want to enforce it on frontend.
I use TinyMCE v4.3.3 with angular-ui-tinymce v0.0.12 plugin and AngularJS v1.4.6.
JS:
var tinymceOpts = {
toolbar: false,
menubar: false,
// do not add <p></p> from the start:
forced_root_block: ''
}
HTML:
<textarea ui-tinymce="tinymceOpts"
ng-model="body"
name="body"
ng-maxlength="100"
required>
{{ body }}
</textarea>
<span ng-show="form.body.$error.maxlength" class="error">
Reached limit!
</span>
As you can see, I use ng-maxlength attribute here to limit a length of <textarea>.
Expected result: input is validated and error message is displayed only if content length (with tags included) has exceeded a limit (100 characters in this case).
Actual result:
Form input state is set to invalid when the input contains some text (no matter what length).
Number of characters (in the right bottom corner) is calculated for testing:
this.getCharCount = function() {
var tx = editor.getContent({format: 'raw'});
return tx.length;
};
The problem here is that TinyMCE uses an own <iframe> to edit text contents and writes them back to your <textarea> on special events.
No wonder ng-maxlength does not work here.
In order to achieve what you want you will need to check for the editor content itself and disallow entering more characters in case the maxlength is reached.
I managed to get it working! It was necessary to disable SCE mode in AngularJS:
angular.module('myApp', ['ui.tinymce'])
.config(['$sceProvider', function($sceProvider) {
$sceProvider.enabled(false);
}])
.controller('myCtrl', ['$scope', function($scope) {
// ...
}]);
jsFiddle
! Beware of security vulnerabilities !
Strict Contextual Escaping (SCE) is a mode in which AngularJS requires bindings in certain contexts to result in a value that is marked as safe to use for that context. With SCE disabled, an AngularJS application allows to render arbitrary HTML into the <div>, and rendering user controlled input creates security vulnerabilities.
I believe what you really want is to have the TinyMCE directive calculate the "length" of the visible characters as opposed to counting the characters in the <textarea>. TinyMCE is going to inject its own iFrame into the page and the editor is part of that iFrame - its not the <textarea>.
When you put validation on the <textarea> you are asking Angular to count the characters in the <textarea>...this is going to be an issue for you. The issue is that the standard directives just count characters so a simple (empty) HTML sample:
<p></p>
Would indeed be counted as 7 characters when in reality there is no "visible" content. I built a custom directive for another editor and what I ended up doing is using jQuery's .text() function against the HTML. This removes all of the HTML tags and provides an approximation for the number of actual text characters in the editor. This is a portion of the code in the directive:
var jStrippedString = jQuery(modelValue).text().trim();
return (maxlength < 0) || ngModelCtrl.$isEmpty(jStrippedString) || (jStrippedString.length <= maxlength);
I believe that you would want to create a custom Attribute directive that allows you to grab the model data for the editor and perform this validation yourself as opposed to simply counting the characters in the <textarea>.

Angular render markup that is nested

I get JSON like this
{
"lots of":"keys"
"description" : {
"key":"Some sample key",
"value":"This is the markup™"
}
}
from server and I ultimately iterate the description objects and populate table rows with two columns: one for the key and one for the value.
I have tried putting on my <td> tag ng-bind-html as well as injecting $sce into my controller and using trustAsHtml but so far the string always displays as it is in the JSON. Not every value will be HTML but I can easily detect based on the key if HTML is a possibility. It seemed when I put in the directive on the td it did not display anything if no HTML was present. I am interested in using something that can allow HTML in the value but not require it so I can display either
HTML fragment
<tr ng-repeat="(key, val) in record.description">
<td>{{key}}:</td>
<td>{{val}}</td>
</tr>
I created a quick fiddle here:
https://jsfiddle.net/frishi/mvw97s3q/6/
I used angular-sanitize, which I am not sure you mentioned injecting in your module dependency list. Either way, the example works simply by using ng-bind-html
Relevant docs page: https://docs.angularjs.org/api/ng/directive/ngBindHtml
It works by using the directive ng-bind-html on the element you want to display the HTML string in. You use it like so:
<p ng-bind-html="data.firstName"></p>
assuming that data.firstName = "<strong>FeeFee</strong>" or something like that.
I would also like to add that Angular does not allow this natively because of legitimate security concerns. That and the fact that allowing arbitrary HTML to be rendered might not always produce desirable results. Your page layout could quite possibly break because of some HTML you allowed to be passed through.
Angular was designed with security in mind, and will prevent you from displaying HTML from raw strings whenever possible - to prevent various injection attacks.
Here is workarround for your problem: AngularJS: Insert HTML from a string. Generally you should use ng-bind-html insted of ng-bind (this is used by curly braces).

Is it possible to use multiple lines in Angular attributes?

Is is possible to include a newline in an Angular JS expression in an attribute tag? Something like this:
<p ng-repeat="
foo in foos
| filter:{attr: 'something really long'}
| orderBy:bar">
{{foo}}
</p>
EDIT: To clarify, the above doesn't work. I was wondering if there is some other syntax that allows for breaking this kind of expressions into multiple lines.
angular.js parser would be able to handle it, but there's a quick regex check before handing it to the parser (see http://docs.angularjs.org/error/ngRepeat:iexp):
Be aware, the ngRepeat directive parses the expression using a regex
before sending collection and optionally id to the AngularJS parser.
This error comes from the regex parsing.
I filed a bug to loosen this restriction: https://github.com/angular/angular.js/issues/5537, you can hand-patch it in the meantime, it's just 1 character: m (/regex/m).
It is possible for an expressions to span multiple lines. But ng-repeat throws an error if you try to span the expression on multiple lines.
Take a look at this plunker:
Add a new line in the ng-repeat expression and open the browser console to see the error message.
http://plnkr.co/edit/E1O8Iy3VzL3kzj72BDUL?p=preview
Yes, it is possible to use multiline attributes with ANY HTML element, including AngularJS directives.

Resources