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 .

Answer 1

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>

Answer 2

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.