angular.filter.html
Usage
In HTML Template Binding
{{
html_expression
| html:option }}
In JavaScript
angular.filter.html(html, option);
Parameters
- html(string): Html input.
- option(string): If 'unsafe' then do not sanitize the HTML input.
Returns
{string} Sanitized or raw html.
CSS
Description
Prevents the input from getting escaped by angular. By default the input is sanitized and
inserted into the DOM as is.
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.
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.
Snippet: <textarea name="snippet" cols="60" rows="3">
<p style="color:blue">an html
<em onmouseover="this.textContent='PWN3D!'">click here</em>
snippet</p></textarea>
<table>
<tr>
<td>Filter</td>
<td>Source</td>
<td>Rendered</td>
</tr>
<tr id="html-filter">
<td>html filter</td>
<td>
<pre><div ng:bind="snippet | html"><br/></div></pre>
</td>
<td>
<div ng:bind="snippet | html"></div>
</td>
</tr>
<tr id="escaped-html">
<td>no filter</td>
<td><pre><div ng:bind="snippet"><br/></div></pre></td>
<td><div ng:bind="snippet"></div></td>
</tr>
<tr id="html-unsafe-filter">
<td>unsafe html filter</td>
<td><pre><div ng:bind="snippet | html:'unsafe'"><br/></div></pre></td>
<td><div ng:bind="snippet | html:'unsafe'"></div></td>
</tr>
</table>