103 lines
5.5 KiB
HTML
Executable file
103 lines
5.5 KiB
HTML
Executable file
<a href="http://github.com/angular/angular.js/tree/v1.2.0rc1/src/ngSanitize/sanitize.js#L36" class="view-source btn btn-action"><i class="icon-zoom-in"> </i> View source</a><a href="http://github.com/angular/angular.js/edit/master/src/ngSanitize/sanitize.js" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable="">$sanitize</code>
|
|
<div><span class="hint">service in module <code ng:non-bindable="">ngSanitize</code>
|
|
</span>
|
|
</div>
|
|
</h1>
|
|
<div><h2 id="Description">Description</h2>
|
|
<div class="description"><div class="ngsanitize-sanitize-page"><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>
|
|
</div></div>
|
|
<h2 id="Usage">Usage</h2>
|
|
<div class="usage"><pre class="prettyprint linenums">$sanitize(html);</pre>
|
|
<h4 id="parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>html</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="ngsanitize-sanitize-page"><p>Html input.</p>
|
|
</div></td></tr></tbody></table><h4 id="returns">Returns</h4><table class="variables-matrix"><tr><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="ngsanitize-sanitize-page"><p>Sanitized html.</p>
|
|
</div></td></tr></table></div>
|
|
<h2 id="Example">Example</h2>
|
|
<div class="example"><div class="ngsanitize-sanitize-page"><h4>Source</h2>
|
|
<div source-edit="ngSanitize" source-edit-deps="angular.js script.js" source-edit-html="index.html-155" source-edit-css="" source-edit-js="script.js-154" source-edit-json="" source-edit-unit="" source-edit-scenario="scenario.js-156"></div>
|
|
<div class="tabbable"><div class="tab-pane" title="index.html">
|
|
<pre class="prettyprint linenums" ng-set-text="index.html-155" ng-html-wrap="ngSanitize angular.js script.js"></pre>
|
|
<script type="text/ng-template" id="index.html-155">
|
|
|
|
<div ng-controller="Ctrl">
|
|
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><div ng-bind-html="snippet"><br/></div></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><div ng-bind-html="deliberatelyTrustDangerousSnippet()"><br/></div></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><div ng-bind="snippet"><br/></div></pre></td>
|
|
<td><div ng-bind="snippet"></div></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</script>
|
|
</div>
|
|
<div class="tab-pane" title="script.js">
|
|
<pre class="prettyprint linenums" ng-set-text="script.js-154"></pre>
|
|
<script type="text/ng-template" id="script.js-154">
|
|
function Ctrl($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>
|
|
<div class="tab-pane" title="End to end test">
|
|
<pre class="prettyprint linenums" ng-set-text="scenario.js-156"></pre>
|
|
<script type="text/ng-template" id="scenario.js-156">
|
|
it('should sanitize the html snippet by default', function() {
|
|
expect(using('#bind-html-with-sanitize').element('div').html()).
|
|
toBe('<p>an html\n<em>click here</em>\nsnippet</p>');
|
|
});
|
|
|
|
it('should inline raw snippet if bound to a trusted value', function() {
|
|
expect(using('#bind-html-with-trust').element("div").html()).
|
|
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(using('#bind-default').element('div').html()).
|
|
toBe("<p style=\"color:blue\">an html\n" +
|
|
"<em onmouseover=\"this.textContent='PWN3D!'\">click here</em>\n" +
|
|
"snippet</p>");
|
|
});
|
|
|
|
it('should update', function() {
|
|
input('snippet').enter('new <b onclick="alert(1)">text</b>');
|
|
expect(using('#bind-html-with-sanitize').element('div').html()).toBe('new <b>text</b>');
|
|
expect(using('#bind-html-with-trust').element('div').html()).toBe('new <b onclick="alert(1)">text</b>');
|
|
expect(using('#bind-default').element('div').html()).toBe("new <b onclick=\"alert(1)\">text</b>");
|
|
});
|
|
</script>
|
|
</div>
|
|
</div><h2>Demo</h4>
|
|
<div class="well doc-example-live animate-container" ng-embed-app="ngSanitize" ng-set-html="index.html-155" ng-eval-javascript="script.js-154"></div>
|
|
</div></div>
|
|
</div>
|