angular sanitize throwing error while using script tag on the variable

Question

Trying to implement the angular sanitizer on my application using angular sanitizer but it's not working as expected.

angular.module('sanitizeExample', ['ngSanitize'])
      .controller('ExampleController', ['$scope', '$sce', function($scope, $sce) {
      //$scope.snippet = "<script type='text/javascript'>alert(1)</script>";
      $scope.snippet = "alert(1)";
      $scope.deliberatelyTrustDangerousSnippet = function() {
         return $sce.trustAsHtml($scope.snippet);
      };
      $scope.escape = function(input) {
        return $sce.trustAsHtml(input);
      }
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>

<div ng-app="sanitizeExample">
    <div ng-controller="ExampleController">
        Snippet: <textarea ng-model="snippet" cols="60" rows="3"></textarea>
       <table>
         <tr>
           <td>Directive</td>
           <td>How</td>
           <td>Source</td>
           <td>Rendered</td>
         </tr>
         <tr id="bind-html-with-sanitize">
           <td>ng-bind-html</td>
           <td>Automatically uses $sanitize</td>
           <td><pre>&lt;div ng-bind-html="snippet"&gt;<br/>&lt;/div&gt;</pre></td>
           <td><div ng-bind-html="snippet"></div></td>
         </tr>
         <tr id="bind-html-with-trust">
           <td>ng-bind-html</td>
           <td>Bypass $sanitize by explicitly trusting the dangerous value</td>
           <td>
           <pre>&lt;div ng-bind-html="deliberatelyTrustDangerousSnippet()"&gt;
&lt;/div&gt;</pre>
           </td>
           <td><div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div></td>
         </tr>
         <tr id="bind-default">
           <td>ng-bind</td>
           <td>Automatically escapes</td>
           <td><pre>&lt;div ng-bind="snippet"&gt;<br/>&lt;/div&gt;</pre></td>               <td><div ng-bind="snippet">ggg</div></td>
           </tr>
       </table>
       <p>{{ escape("<script type='text/javascript'>alert(1)</script>") }}</p>
       </div>
</div>

Throws Uncaught SyntaxError: Invalid or unexpected token error while using the script

$scope.snippet = "<script type='text/javascript'>alert(1)</script>"

Works fine without script

$scope.snippet = "alert(1)"

It gives the alert in the browser but expecting the innertext for the p tag.

<p>{{ escape("<script type='text/javascript'>alert(1)</script>") }}</p>

also getting the output in the html

{{ escape("") }}

How to do the sanitizing the variable which has the script tag also by calling the controller function from the html template .

my requirement is to display the script also as text inside the html template. — Govinda raj
– Govinda raj, Commented Oct 31, 2018 at 12:29

Akber Iqbal · Accepted Answer · 2018-11-01 04:11:33Z

this works?

    angular.module("sanitizeExample", ['ngSanitize'])
        .controller("ExampleController", ['$scope', '$sce', function($scope, $sce){
        /* $scope.snippet = "alert(1)"; */
        $scope.snippet = "<script " + "type='text/javascript'"+" >alert(1) <" + "/script>";
        $scope.deliberatelyTrustDangerousSnippet = function(){
            return $sce.trustAsHtml($scope.snippet);
        };
        $scope.escape = function(input) {
            return $sce.trustAsHtml(input);
        }
    }]);

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <div ng-app="sanitizeExample">
        <div ng-controller="ExampleController">
            Snippet: <textarea ng-model="snippet" cols="60" rows="3"></textarea>
           <table>
             <tr>
               <td>Directive</td>
               <td>How</td>
               <td>Source</td>
               <td>Rendered</td>
             </tr>
             <tr id="bind-html-with-sanitize">
               <td>ng-bind-html</td>
               <td>Automatically uses $sanitize</td>
               <td><pre>&lt;div ng-bind-html="snippet"&gt;<br/>&lt;/div&gt;</pre></td>
               <td><div ng-bind-html="snippet"></div></td>
             </tr>
             <tr id="bind-html-with-trust">
               <td>ng-bind-html</td>
               <td>Bypass $sanitize by explicitly trusting the dangerous value</td>
               <td>
               <pre>&lt;div ng-bind-html="deliberatelyTrustDangerousSnippet()"&gt;
    &lt;/div&gt;</pre>
               </td>
               <td><div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div></td>
             </tr>
             <tr id="bind-default">
               <td>ng-bind</td>
               <td>Automatically escapes</td>
               <td><pre>&lt;div ng-bind="snippet"&gt;<br/>&lt;/div&gt;</pre></td>               <td><div ng-bind="snippet">ggg</div></td>
               </tr>
           </table>
           <!-- 
        -->
               <p>{{ escape("<script type='text/javascript'>alert(1)</script>") }}</p>
           </div>
    </div>

Govinda raj · Accepted Answer · 2018-11-09 06:07:19Z

0

Only inclusive of the ngSanitize module enough to do the sanitize from in the view.

angular.module("sanitizeExample", ['ngSanitize'])

This is not the correct way to test the sanitize from the view. It passes as variable to the angular so that it's executing and gives the alert.

{{ escape("<script type='text/javascript'>alert(1)</script>") }}

When we test from the data services sanitize is working as expected.

answered Nov 9, 2018 at 6:07

Govinda raj

6835 gold badges16 silver badges33 bronze badges

Collectives™ on Stack Overflow

angular sanitize throwing error while using script tag on the variable

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related