mirror of
https://github.com/zhigang1992/angular.js.git
synced 2026-04-05 22:35:14 +08:00
docs($sce): fix code samples and example
The code samples were using `<pre>` tags rather than code fences (```) so they were not being displayed correctly. The inline code example (defined by a `<example>` element) had been placed in an `@example` jsdoc tag, so rather than appearing inline at the declaration point in the text, they were being appended to the end of the document in the `Example` section. Closes #8053
This commit is contained in:
Peter Bacon Darwin
185
src/ng/sce.js
185
src/ng/sce.js
@@ -112,19 +112,21 @@ function adjustMatchers(matchers) {
|
||||
*
|
||||
* Here is what a secure configuration for this scenario might look like:
|
||||
*
|
||||
* <pre class="prettyprint">
|
||||
* angular.module('myApp', []).config(function($sceDelegateProvider) {
|
||||
* $sceDelegateProvider.resourceUrlWhitelist([
|
||||
* // Allow same origin resource loads.
|
||||
* 'self',
|
||||
* // Allow loading from our assets domain. Notice the difference between * and **.
|
||||
* 'http://srv*.assets.example.com/**']);
|
||||
* ```
|
||||
* angular.module('myApp', []).config(function($sceDelegateProvider) {
|
||||
* $sceDelegateProvider.resourceUrlWhitelist([
|
||||
* // Allow same origin resource loads.
|
||||
* 'self',
|
||||
* // Allow loading from our assets domain. Notice the difference between * and **.
|
||||
* 'http://srv*.assets.example.com/**'
|
||||
* ]);
|
||||
*
|
||||
* // The blacklist overrides the whitelist so the open redirect here is blocked.
|
||||
* $sceDelegateProvider.resourceUrlBlacklist([
|
||||
* 'http://myapp.example.com/clickThru**']);
|
||||
* });
|
||||
* </pre>
|
||||
* // The blacklist overrides the whitelist so the open redirect here is blocked.
|
||||
* $sceDelegateProvider.resourceUrlBlacklist([
|
||||
* 'http://myapp.example.com/clickThru**'
|
||||
* ]);
|
||||
* });
|
||||
* ```
|
||||
*/
|
||||
|
||||
function $SceDelegateProvider() {
|
||||
@@ -419,10 +421,10 @@ function $SceDelegateProvider() {
|
||||
*
|
||||
* Here's an example of a binding in a privileged context:
|
||||
*
|
||||
* <pre class="prettyprint">
|
||||
* <input ng-model="userHtml">
|
||||
* <div ng-bind-html="userHtml">
|
||||
* </pre>
|
||||
* ```
|
||||
* <input ng-model="userHtml">
|
||||
* <div ng-bind-html="userHtml"></div>
|
||||
* ```
|
||||
*
|
||||
* Notice that `ng-bind-html` is bound to `userHtml` controlled by the user. With SCE
|
||||
* disabled, this application allows the user to render arbitrary HTML into the DIV.
|
||||
@@ -462,15 +464,15 @@ function $SceDelegateProvider() {
|
||||
* ng.$sce#parseAsHtml $sce.parseAsHtml(binding expression)}. Here's the actual code (slightly
|
||||
* simplified):
|
||||
*
|
||||
* <pre class="prettyprint">
|
||||
* var ngBindHtmlDirective = ['$sce', function($sce) {
|
||||
* return function(scope, element, attr) {
|
||||
* scope.$watch($sce.parseAsHtml(attr.ngBindHtml), function(value) {
|
||||
* element.html(value || '');
|
||||
* });
|
||||
* };
|
||||
* }];
|
||||
* </pre>
|
||||
* ```
|
||||
* var ngBindHtmlDirective = ['$sce', function($sce) {
|
||||
* return function(scope, element, attr) {
|
||||
* scope.$watch($sce.parseAsHtml(attr.ngBindHtml), function(value) {
|
||||
* element.html(value || '');
|
||||
* });
|
||||
* };
|
||||
* }];
|
||||
* ```
|
||||
*
|
||||
* ## Impact on loading templates
|
||||
*
|
||||
@@ -574,66 +576,65 @@ function $SceDelegateProvider() {
|
||||
*
|
||||
* ## Show me an example using SCE.
|
||||
*
|
||||
* @example
|
||||
<example module="mySceApp" deps="angular-sanitize.js">
|
||||
<file name="index.html">
|
||||
<div ng-controller="myAppController as myCtrl">
|
||||
<i ng-bind-html="myCtrl.explicitlyTrustedHtml" id="explicitlyTrustedHtml"></i><br><br>
|
||||
<b>User comments</b><br>
|
||||
By default, HTML that isn't explicitly trusted (e.g. Alice's comment) is sanitized when
|
||||
$sanitize is available. If $sanitize isn't available, this results in an error instead of an
|
||||
exploit.
|
||||
<div class="well">
|
||||
<div ng-repeat="userComment in myCtrl.userComments">
|
||||
<b>{{userComment.name}}</b>:
|
||||
<span ng-bind-html="userComment.htmlComment" class="htmlComment"></span>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</file>
|
||||
|
||||
<file name="script.js">
|
||||
var mySceApp = angular.module('mySceApp', ['ngSanitize']);
|
||||
|
||||
mySceApp.controller("myAppController", function myAppController($http, $templateCache, $sce) {
|
||||
var self = this;
|
||||
$http.get("test_data.json", {cache: $templateCache}).success(function(userComments) {
|
||||
self.userComments = userComments;
|
||||
});
|
||||
self.explicitlyTrustedHtml = $sce.trustAsHtml(
|
||||
'<span onmouseover="this.textContent="Explicitly trusted HTML bypasses ' +
|
||||
'sanitization."">Hover over this text.</span>');
|
||||
});
|
||||
</file>
|
||||
|
||||
<file name="test_data.json">
|
||||
[
|
||||
{ "name": "Alice",
|
||||
"htmlComment":
|
||||
"<span onmouseover='this.textContent=\"PWN3D!\"'>Is <i>anyone</i> reading this?</span>"
|
||||
},
|
||||
{ "name": "Bob",
|
||||
"htmlComment": "<i>Yes!</i> Am I the only other one?"
|
||||
}
|
||||
]
|
||||
</file>
|
||||
|
||||
<file name="protractor.js" type="protractor">
|
||||
describe('SCE doc demo', function() {
|
||||
it('should sanitize untrusted values', function() {
|
||||
expect(element(by.css('.htmlComment')).getInnerHtml())
|
||||
.toBe('<span>Is <i>anyone</i> reading this?</span>');
|
||||
});
|
||||
|
||||
it('should NOT sanitize explicitly trusted values', function() {
|
||||
expect(element(by.id('explicitlyTrustedHtml')).getInnerHtml()).toBe(
|
||||
'<span onmouseover="this.textContent="Explicitly trusted HTML bypasses ' +
|
||||
'sanitization."">Hover over this text.</span>');
|
||||
});
|
||||
});
|
||||
</file>
|
||||
</example>
|
||||
* <example module="mySceApp" deps="angular-sanitize.js">
|
||||
* <file name="index.html">
|
||||
* <div ng-controller="myAppController as myCtrl">
|
||||
* <i ng-bind-html="myCtrl.explicitlyTrustedHtml" id="explicitlyTrustedHtml"></i><br><br>
|
||||
* <b>User comments</b><br>
|
||||
* By default, HTML that isn't explicitly trusted (e.g. Alice's comment) is sanitized when
|
||||
* $sanitize is available. If $sanitize isn't available, this results in an error instead of an
|
||||
* exploit.
|
||||
* <div class="well">
|
||||
* <div ng-repeat="userComment in myCtrl.userComments">
|
||||
* <b>{{userComment.name}}</b>:
|
||||
* <span ng-bind-html="userComment.htmlComment" class="htmlComment"></span>
|
||||
* <br>
|
||||
* </div>
|
||||
* </div>
|
||||
* </div>
|
||||
* </file>
|
||||
*
|
||||
* <file name="script.js">
|
||||
* var mySceApp = angular.module('mySceApp', ['ngSanitize']);
|
||||
*
|
||||
* mySceApp.controller("myAppController", function myAppController($http, $templateCache, $sce) {
|
||||
* var self = this;
|
||||
* $http.get("test_data.json", {cache: $templateCache}).success(function(userComments) {
|
||||
* self.userComments = userComments;
|
||||
* });
|
||||
* self.explicitlyTrustedHtml = $sce.trustAsHtml(
|
||||
* '<span onmouseover="this.textContent="Explicitly trusted HTML bypasses ' +
|
||||
* 'sanitization."">Hover over this text.</span>');
|
||||
* });
|
||||
* </file>
|
||||
*
|
||||
* <file name="test_data.json">
|
||||
* [
|
||||
* { "name": "Alice",
|
||||
* "htmlComment":
|
||||
* "<span onmouseover='this.textContent=\"PWN3D!\"'>Is <i>anyone</i> reading this?</span>"
|
||||
* },
|
||||
* { "name": "Bob",
|
||||
* "htmlComment": "<i>Yes!</i> Am I the only other one?"
|
||||
* }
|
||||
* ]
|
||||
* </file>
|
||||
*
|
||||
* <file name="protractor.js" type="protractor">
|
||||
* describe('SCE doc demo', function() {
|
||||
* it('should sanitize untrusted values', function() {
|
||||
* expect(element(by.css('.htmlComment')).getInnerHtml())
|
||||
* .toBe('<span>Is <i>anyone</i> reading this?</span>');
|
||||
* });
|
||||
*
|
||||
* it('should NOT sanitize explicitly trusted values', function() {
|
||||
* expect(element(by.id('explicitlyTrustedHtml')).getInnerHtml()).toBe(
|
||||
* '<span onmouseover="this.textContent="Explicitly trusted HTML bypasses ' +
|
||||
* 'sanitization."">Hover over this text.</span>');
|
||||
* });
|
||||
* });
|
||||
* </file>
|
||||
* </example>
|
||||
*
|
||||
*
|
||||
*
|
||||
@@ -647,13 +648,13 @@ function $SceDelegateProvider() {
|
||||
*
|
||||
* That said, here's how you can completely disable SCE:
|
||||
*
|
||||
* <pre class="prettyprint">
|
||||
* angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) {
|
||||
* // Completely disable SCE. For demonstration purposes only!
|
||||
* // Do not use in new projects.
|
||||
* $sceProvider.enabled(false);
|
||||
* });
|
||||
* </pre>
|
||||
* ```
|
||||
* angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) {
|
||||
* // Completely disable SCE. For demonstration purposes only!
|
||||
* // Do not use in new projects.
|
||||
* $sceProvider.enabled(false);
|
||||
* });
|
||||
* ```
|
||||
*
|
||||
*/
|
||||
/* jshint maxlen: 100 */
|
||||
|
||||
Reference in New Issue
Block a user