angular.filter.html.html

<h1>angular.filter.html</h1>
<div class="angular-filter-html"><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>
<div class="description"><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></div>
<h2>Usage</h2>
<div class="usage"><h3>In HTML Template Binding</h3>
<div class="in-html-template-binding"><code ng:non-bindable="">{{ html_expression | html[:option] }}</code>
</div>
<h3>In JavaScript</h3>
<div class="in-javascript"><code ng:non-bindable="">angular.filter.html(html[, option])</code>
</div>
<h3>Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">html – {string} – </code>
<p>Html input.</p></li>
<li><code ng:non-bindable="">option<i>(optional)</i> – {string} – </code>
<p>If 'unsafe' then do not sanitize the HTML input.</p></li>
</ul>
<h3>Returns</h3>
<div class="returns"><code ng:non-bindable="">{string}</code>
– <p>Sanitized or raw html.</p></div>
</div>
<h2>Example</h2>
<div class="example"><doc:example>
<pre class="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;
</pre>
<pre class="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;');
  });
</pre>
</doc:example></div>
</div>