AngularJS - Example - Sanitize - Service

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-sanitize-service-production</title>
  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
  

  
</head>
<body ng-app="sanitizeExample">
       <script>
         angular.module('sanitizeExample', ['ngSanitize'])
           .controller('ExampleController', ['$scope', '$sce', function($scope, $sce) {
             $scope.snippet =
               '<p style="color:blue">an html\n' +
               '<em onmouseover="this.textContent=\'PWN3D!\'">click here</em>\n' +
               'snippet</p>';
             $scope.deliberatelyTrustDangerousSnippet = function() {
               return $sce.trustAsHtml($scope.snippet);
             };
           }]);
     </script>
     <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"></div></td>
         </tr>
       </table>
       </div>
</body>
</html>

<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

it('should sanitize the html snippet by default', function() {
  expect(element(by.css('#bind-html-with-sanitize div')).getAttribute('innerHTML')).
    toBe('<p>an html\n<em>click here</em>\nsnippet</p>');
});

it('should inline raw snippet if bound to a trusted value', function() {
  expect(element(by.css('#bind-html-with-trust div')).getAttribute('innerHTML')).
    toBe("<p style=\"color:blue\">an html\n" +
         "<em onmouseover=\"this.textContent='PWN3D!'\">click here</em>\n" +
         "snippet</p>");
});

it('should escape snippet without any filter', function() {
  expect(element(by.css('#bind-default div')).getAttribute('innerHTML')).
    toBe("&lt;p style=\"color:blue\"&gt;an html\n" +
         "&lt;em onmouseover=\"this.textContent='PWN3D!'\"&gt;click here&lt;/em&gt;\n" +
         "snippet&lt;/p&gt;");
});

it('should update', function() {
  element(by.model('snippet')).clear();
  element(by.model('snippet')).sendKeys('new <b onclick="alert(1)">text</b>');
  expect(element(by.css('#bind-html-with-sanitize div')).getAttribute('innerHTML')).
    toBe('new <b>text</b>');
  expect(element(by.css('#bind-html-with-trust div')).getAttribute('innerHTML')).toBe(
    'new <b onclick="alert(1)">text</b>');
  expect(element(by.css('#bind-default div')).getAttribute('innerHTML')).toBe(
    "new &lt;b onclick=\"alert(1)\"&gt;text&lt;/b&gt;");
});

/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/