$sanitize

- $sanitizeProvider
- service in module ngSanitize

Contents

Overview

Sanitizes an html string by stripping all potentially dangerous tokens.

The input is sanitized by parsing the HTML into tokens. All safe tokens (from a trusted URI list) are then serialized back to a properly escaped HTML string. This means that no unsafe input can make it into the returned string.

The trusted URIs for URL sanitization of attribute values is configured using the functions aHrefSanitizationTrustedUrlList and imgSrcSanitizationTrustedUrlList of $compileProvider.

The input may also contain SVG markup if this is enabled via $sanitizeProvider.

Usage

$sanitize(html);

Arguments

Param	Type	Details
html	string	HTML input.

Returns

string

Sanitized HTML.

Example

     <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>

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;");
});