Angular ng-bind-html - prevent execution of JS code

Question

I have a problem with ng-bind-html directive.

I get the email HTML data from external services (not trusted), so it may happen that I receive <script> tag inside message body. However I don't want to execute this JS code on my page. I am using ng-bind-html directive for this.

I created an example for this and my problem is that alert() function is executed. How to deny to do this?

var app = angular.module('myApp', ['ngSanitize']);

app.controller('MainCtrl', function ($sce, $scope) {
    $scope.text = " <script>alert(222)</script> <script>alert(222)</script>";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl">
    <div ng-bind-html="text"></div>
</div>

https://jsfiddle.net/Suvroc/0c0ee472/8/

If you write alert then it will execute. if you dont want alert box then use console. $scope.text = " <script>console.log(222)</script> <script>console.log(222)</script>"; — Ahmad Sharif
– Ahmad Sharif, Commented Mar 17, 2016 at 8:35
My problem is not with just alert function. The source of html is not trusted so it might be anything in the script tags. My intention is to not execute this kind of code at all. I use alert only as an example — suvroc
– suvroc, Commented Mar 17, 2016 at 9:04

Shashank · Accepted Answer · 2016-03-17 13:49:16Z

1

Since you have referenced to an old version of AngularJS, you are prevented from getting proper errors, so it was difficult to interpret. I tried in a similar fashion and found out errors, which showed there is some problem with the text which has been bind containing <script>.

Actually, when one terminates the script tag, like -> </script>, the compiler generates error, showing as invalid.

This has happened with me while I was working for a project, where, the developers deliberately removed the </script> to prevent any run-time errors. Otherwise the whole code breaks.

I don't know the actual reason behind it, but it has done the trick for us in the past.

So in my code demo, the script doesn't runs itself; so for your case, just removing or preventing the ending/closing of the script tag, might just do the trick.

Meanwhile, you can have the code below:

HTML:

<div ng-app="app" ng-controller="test">
  Run time binding of HTML
  <div ng-bind-html="text"></div>
</div>

JS:

var app = angular.module('app', []);

app.controller('test', function($scope, $sce, $timeout) {
  $scope.bindHTML = "<script>alert(123);";
  $scope.text = $sce.trustAsHtml($scope.bindHTML);
});

answered Mar 17, 2016 at 13:49

Shashank

2,1002 gold badges21 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Erlend Over a year ago

This doesn't stop untrusted code from running. Trivially bypassed by emails containing other XSS vectors like <img src=x onerror=alert(1)>

Shashank Over a year ago

@Erlend, good point, however the author didn't mentioned that case in his question. Anyways, new learning are always welcome.

Erlend · Accepted Answer · 2016-03-18 05:29:52Z

1

Use DOMPurify to sanitize the data before rendering it. It is the best HTML sanitizer out there. Another alternative is to escape the whole thing, but I guess there might be other HTML tags that you want to keep?

answered Mar 18, 2016 at 5:29

Erlend

4,40625 silver badges26 bronze badges

Comments

itsphilz · Accepted Answer · 2016-03-17 09:30:46Z

0

You are injecting the $sce service into your controller, so it seems you are half way there. You can run the $sce.trustAsHtml(text) function on your text and that will sanitize it accordingly.

See the docs for more info: https://docs.angularjs.org/api/ng/service/$sce

Edit: Alternatively, look into using the $sanitize service in tandem with $sce, https://docs.angularjs.org/api/ngSanitize/service/$sanitize

$sanitize(text);

edited Mar 17, 2016 at 9:30

answered Mar 17, 2016 at 8:34

itsphilz

4552 silver badges9 bronze badges

3 Comments

suvroc Over a year ago

I already tired to do this in your way, but it doesn't help. Still the same behaviour jsfiddle.net/Suvroc/0c0ee472/9

itsphilz Over a year ago

Updated my answer for you.

itsphilz Over a year ago

Have you actually tried $sce.trustAsHtml(text) in your angular application? and what version of Angular are you using? The JS fiddle is still rendering the JS alert, but I have tested that code locally with angular 1.4.8 and it works, the JS does not execute and is cleaned by the $sce service.

Brahim LAMJAGUAR · Accepted Answer · 2016-03-17 11:45:24Z

0

I can't see any :

<script src="angular-sanitize.js">

in your code, since sanitize is not included in the AngularJS Core.

Here is a link that explains the proper way to implement it : http://blog.timsommer.be/using-ngsanitize-to-render-html-strings-in-angular/

answered Mar 17, 2016 at 11:45

Brahim LAMJAGUAR

1,3846 gold badges19 silver badges30 bronze badges

1 Comment

suvroc Over a year ago

angular-sanitize.js is included in JS fiddle (in External Resources). Also I can repeat this regular file. I don't wan't to skip validation. I want to make sure that <script> tag won't execute JS code

Collectives™ on Stack Overflow

Angular ng-bind-html - prevent execution of JS code

4 Answers 4

2 Comments

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related