angular.filter.html.html

<h1>angular.filter.html</h1>
<fieldset class="workInProgress"><legend>Work in Progress</legend>
This page is currently being revised. It might be incomplete or contain inaccuracies.</fieldset>
<h2>Description</h2>
<p>Prevents the input from getting escaped by angular. By default the input is sanitized and
inserted into the DOM as is.</p>

<p>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, however since our parser is more strict than a typical browser
parser, it's possible that some obscure input, which would be recognized as valid HTML by a
browser, won't make it through the sanitizer.</p>

<p>If you hate your users, you may call the filter with optional 'unsafe' argument, which bypasses
the html sanitizer, but makes your application vulnerable to XSS and other attacks. Using this
option is strongly discouraged and should be used only if you absolutely trust the input being
filtered and you can't get the content through the sanitizer.</p><h2>Usage</h2>
<h3>In HTML Template Binding</h3>
<code ng:non-bindable="">{{ html_expression | html<i>[:option]</i> }}</code>
<h3 0="I" 1="n" 2=" " 3="J" 4="a" 5="v" 6="a" 7="S" 8="c" 9="r" 10="i" 11="p" 12="t"><code ng:non-bindable="">angular.filter.html(html<i>[, option]</i>)</code>
</h3>
<h3>Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">html – {string} – </code>
Html input.</li>
<li><code ng:non-bindable="">option<i>(optional)</i> – {string} – </code>
If 'unsafe' then do not sanitize the HTML input.</li>
</ul>
<h3>Returns</h3>
<code ng:non-bindable="">string</code>
– Sanitized or raw html.<h2>Example</h2>
<doc:example><doc:source>     Snippet: &lt;textarea name="snippet" cols="60" rows="3"&gt;
&amp;lt;p style="color:blue"&amp;gt;an html
&amp;lt;em onmouseover="this.textContent='PWN3D!'"&amp;gt;click here&amp;lt;/em&amp;gt;
snippet&amp;lt;/p&amp;gt;&lt;/textarea&gt;
     &lt;table&gt;
       &lt;tr&gt;
         &lt;td&gt;Filter&lt;/td&gt;
         &lt;td&gt;Source&lt;/td&gt;
         &lt;td&gt;Rendered&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr id="html-filter"&gt;
         &lt;td&gt;html filter&lt;/td&gt;
         &lt;td&gt;
           &lt;pre&gt;&amp;lt;div ng:bind="snippet | html"&amp;gt;&lt;br/&gt;&amp;lt;/div&amp;gt;&lt;/pre&gt;
         &lt;/td&gt;
         &lt;td&gt;
           &lt;div ng:bind="snippet | html"&gt;&lt;/div&gt;
         &lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr id="escaped-html"&gt;
         &lt;td&gt;no filter&lt;/td&gt;
         &lt;td&gt;&lt;pre&gt;&amp;lt;div ng:bind="snippet"&amp;gt;&lt;br/&gt;&amp;lt;/div&amp;gt;&lt;/pre&gt;&lt;/td&gt;
         &lt;td&gt;&lt;div ng:bind="snippet"&gt;&lt;/div&gt;&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr id="html-unsafe-filter"&gt;
         &lt;td&gt;unsafe html filter&lt;/td&gt;
         &lt;td&gt;&lt;pre&gt;&amp;lt;div ng:bind="snippet | html:'unsafe'"&amp;gt;&lt;br/&gt;&amp;lt;/div&amp;gt;&lt;/pre&gt;&lt;/td&gt;
         &lt;td&gt;&lt;div ng:bind="snippet | html:'unsafe'"&gt;&lt;/div&gt;&lt;/td&gt;
       &lt;/tr&gt;
     &lt;/table&gt;</doc:source>
<doc:scenario>it('should sanitize the html snippet ', function(){
  expect(using('#html-filter').binding('snippet | html')).
    toBe('&lt;p&gt;an html\n&lt;em&gt;click here&lt;/em&gt;\nsnippet&lt;/p&gt;');
});

it ('should escape snippet without any filter', function() {
  expect(using('#escaped-html').binding('snippet')).
    toBe("&amp;lt;p style=\"color:blue\"&amp;gt;an html\n" +
         "&amp;lt;em onmouseover=\"this.textContent='PWN3D!'\"&amp;gt;click here&amp;lt;/em&amp;gt;\n" +
         "snippet&amp;lt;/p&amp;gt;");
});

it ('should inline raw snippet if filtered as unsafe', function() {
  expect(using('#html-unsafe-filter').binding("snippet | html:'unsafe'")).
    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(){
  input('snippet').enter('new &lt;b&gt;text&lt;/b&gt;');
  expect(using('#html-filter').binding('snippet | html')).toBe('new &lt;b&gt;text&lt;/b&gt;');
  expect(using('#escaped-html').binding('snippet')).toBe("new &amp;lt;b&amp;gt;text&amp;lt;/b&amp;gt;");
  expect(using('#html-unsafe-filter').binding("snippet | html:'unsafe'")).toBe('new &lt;b&gt;text&lt;/b&gt;');
});</doc:scenario>
</doc:example>