Improve this Doc View Source

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 whitelist) are then serialized back to properly escaped html string. This means that no unsafe input can make it into the returned string.

The whitelist for URL sanitization of attribute values is configured using the functions `aHrefSanitizationWhitelist` and `imgSrcSanitizationWhitelist` 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.

## Examples

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