AngularJS ng-bind-html removes all script tag

Question

I am really new to AngularJS. So this question might be very basic but I don't get a clear answer from other post so I try to ask a new question.

I am woundering why angulars js ng-bind-html removes all script tags from the content I want to paste in my website.

I just try it with this code example from AngularJS documentation website which shows a simple bind-html example with a java script tag inside.

(function(angular) {
    'use strict';
    angular.module('bindHtml', ['ngSanitize'])
        .controller('Controller', ['$scope', function($scope) {
            $scope.myHTML =
                'I am an <code>HTML</code>string with ' +
                '<a href="#">links!</a> and other <em>stuff</em>'+
                '<script type="javascript">' +
                'alert(1);'+
                '</script>';

        }]);
})(window.angular);

This code snippet shows the html template:

<body ng-app="bindHtml">
    <div ng-controller="Controller">
        <p ng-bind-html="myHTML"></p>
    </div>
</body>

But the Chrome Inspector shows that AngularJS apparently removed all java script without a warning message. Exist a way to bypass this removing or do I have to rewrite all old style jquery and what ever javascript into AngularJS? Screenshot from code inspector of Chrome

Thank you

Out of curiosity, what is your use case for injecting inline scripts from javascript into a template? Why not run your code in your application logic inside JavaScript? — Leon Adler
– Leon Adler, Commented Mar 3, 2016 at 13:56
Yes therefor exist not a good question. This project is still a bricolage of different frameworks and now Angular JS, too.... But thank you $sce.trustAsHtml is the right trace. — Allan Karlson
– Allan Karlson, Commented Mar 3, 2016 at 16:10

KP Chundawat · Accepted Answer · 2016-03-03 13:57:00Z

1

You need to inject $sce service into your controller or Directive etc. and use $sce service like this :-

$scope.myHTML= $sce.trustAsHtml("I am an <code>HTML</code>string with ' +
                '<a href="#">links!</a> and other <em>stuff</em>'+
                '<script type="javascript">' +
                'alert(1);'+
                '</script>");

And bind this in your HTML page e.g;

<body ng-app="bindHtml">
    <div ng-controller="Controller">
        <p ng-bind-html="myHTML"></p>
    </div>
</body>

answered Mar 3, 2016 at 13:57

KP Chundawat

9601 gold badge9 silver badges25 bronze badges

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

3 Comments

Allan Karlson Over a year ago

Thank you. It dont removes the script tag now but java script wont be execute. Mmh, I test a bit but you will get a checkmark.

Allan Karlson Over a year ago

Thank you. It work. If someone have the same question, than please do not use my example with this simple alert because it wont work because it is missing a "document ready function". You may use something like <i onmouseout="alert(1);">Go in and out</i>

KP Chundawat Over a year ago

Document.ready is Jquery feature. try $sce.trustAsJs("<script type='javascript'>alert(1);</script>"). It will work.

Collectives™ on Stack Overflow

AngularJS ng-bind-html removes all script tag

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related