kylefang/angular.js
1
0
Fork 0
mirror of https://github.com/zhigang1992/angular.js.git synced 2026-04-26 04:55:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs($sce): fix code samples and example

Browse Source 
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
2014-07-03 07:01:53 +01:00
parent 01012a4d7a
commit 2fd8dc7061
1 changed files with 93 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
src/ng/sce.js
View File

@@ -112,19 +112,21 @@ function adjustMatchers(matchers) {
* *
* Here is what a secure configuration for this scenario might look like: * Here is what a secure configuration for this scenario might look like:
* *
* <pre class="prettyprint"> * ```
* angular.module('myApp', []).config(function($sceDelegateProvider) { * angular.module('myApp', []).config(function($sceDelegateProvider) {
* $sceDelegateProvider.resourceUrlWhitelist([ * $sceDelegateProvider.resourceUrlWhitelist([
* // Allow same origin resource loads. * // Allow same origin resource loads.
* 'self', * 'self',
* // Allow loading from our assets domain. Notice the difference between * and **. * // Allow loading from our assets domain. Notice the difference between * and **.
* 'http://srv*.assets.example.com/**']); * 'http://srv*.assets.example.com/**'
* ]);
* *
* // The blacklist overrides the whitelist so the open redirect here is blocked. * // The blacklist overrides the whitelist so the open redirect here is blocked.
* $sceDelegateProvider.resourceUrlBlacklist([ * $sceDelegateProvider.resourceUrlBlacklist([
* 'http://myapp.example.com/clickThru**']); * 'http://myapp.example.com/clickThru**'
* }); * ]);
* </pre> * });
* ```
*/ */
function $SceDelegateProvider() { function $SceDelegateProvider() {
@@ -419,10 +421,10 @@ function $SceDelegateProvider() {
* *
* Here's an example of a binding in a privileged context: * Here's an example of a binding in a privileged context:
* *
* <pre class="prettyprint"> * ```
* <input ng-model="userHtml"> * <input ng-model="userHtml">
* <div ng-bind-html="userHtml"> * <div ng-bind-html="userHtml"></div>
* </pre> * ```
* *
* Notice that `ng-bind-html` is bound to `userHtml` controlled by the user. With SCE * 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. * 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 * ng.$sce#parseAsHtml $sce.parseAsHtml(binding expression)}. Here's the actual code (slightly
* simplified): * simplified):
* *
* <pre class="prettyprint"> * ```
* var ngBindHtmlDirective = ['$sce', function($sce) { * var ngBindHtmlDirective = ['$sce', function($sce) {
* return function(scope, element, attr) { * return function(scope, element, attr) {
* scope.$watch($sce.parseAsHtml(attr.ngBindHtml), function(value) { * scope.$watch($sce.parseAsHtml(attr.ngBindHtml), function(value) {
* element.html(value || ''); * element.html(value || '');
* }); * });
* }; * };
* }]; * }];
* </pre> * ```
* *
* ## Impact on loading templates * ## Impact on loading templates
* *
@@ -574,66 +576,65 @@ function $SceDelegateProvider() {
* *
* ## Show me an example using SCE. * ## Show me an example using SCE.
* *
* @example * <example module="mySceApp" deps="angular-sanitize.js">
<example module="mySceApp" deps="angular-sanitize.js"> * <file name="index.html">
<file name="index.html"> * <div ng-controller="myAppController as myCtrl">
<div ng-controller="myAppController as myCtrl"> * <i ng-bind-html="myCtrl.explicitlyTrustedHtml" id="explicitlyTrustedHtml"></i><br><br>
<i ng-bind-html="myCtrl.explicitlyTrustedHtml" id="explicitlyTrustedHtml"></i><br><br> * <b>User comments</b><br>
<b>User comments</b><br> * By default, HTML that isn't explicitly trusted (e.g. Alice's comment) is sanitized when
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
$sanitize is available. If $sanitize isn't available, this results in an error instead of an * exploit.
exploit. * <div class="well">
<div class="well"> * <div ng-repeat="userComment in myCtrl.userComments">
<div ng-repeat="userComment in myCtrl.userComments"> * <b>{{userComment.name}}</b>:
<b>{{userComment.name}}</b>: * <span ng-bind-html="userComment.htmlComment" class="htmlComment"></span>
<span ng-bind-html="userComment.htmlComment" class="htmlComment"></span> * <br>
<br> * </div>
</div> * </div>
</div> * </div>
</div> * </file>
</file> *
* <file name="script.js">
<file name="script.js"> * var mySceApp = angular.module('mySceApp', ['ngSanitize']);
var mySceApp = angular.module('mySceApp', ['ngSanitize']); *
* mySceApp.controller("myAppController", function myAppController($http, $templateCache, $sce) {
mySceApp.controller("myAppController", function myAppController($http, $templateCache, $sce) { * var self = this;
var self = this; * $http.get("test_data.json", {cache: $templateCache}).success(function(userComments) {
$http.get("test_data.json", {cache: $templateCache}).success(function(userComments) { * self.userComments = userComments;
self.userComments = userComments; * });
}); * self.explicitlyTrustedHtml = $sce.trustAsHtml(
self.explicitlyTrustedHtml = $sce.trustAsHtml( * '<span onmouseover="this.textContent=&quot;Explicitly trusted HTML bypasses ' +
'<span onmouseover="this.textContent=&quot;Explicitly trusted HTML bypasses ' + * 'sanitization.&quot;">Hover over this text.</span>');
'sanitization.&quot;">Hover over this text.</span>'); * });
}); * </file>
</file> *
* <file name="test_data.json">
<file name="test_data.json"> * [
[ * { "name": "Alice",
{ "name": "Alice", * "htmlComment":
"htmlComment": * "<span onmouseover='this.textContent=\"PWN3D!\"'>Is <i>anyone</i> reading this?</span>"
"<span onmouseover='this.textContent=\"PWN3D!\"'>Is <i>anyone</i> reading this?</span>" * },
}, * { "name": "Bob",
{ "name": "Bob", * "htmlComment": "<i>Yes!</i> Am I the only other one?"
"htmlComment": "<i>Yes!</i> Am I the only other one?" * }
} * ]
] * </file>
</file> *
* <file name="protractor.js" type="protractor">
<file name="protractor.js" type="protractor"> * describe('SCE doc demo', function() {
describe('SCE doc demo', function() { * it('should sanitize untrusted values', function() {
it('should sanitize untrusted values', function() { * expect(element(by.css('.htmlComment')).getInnerHtml())
expect(element(by.css('.htmlComment')).getInnerHtml()) * .toBe('<span>Is <i>anyone</i> reading this?</span>');
.toBe('<span>Is <i>anyone</i> reading this?</span>'); * });
}); *
* it('should NOT sanitize explicitly trusted values', function() {
it('should NOT sanitize explicitly trusted values', function() { * expect(element(by.id('explicitlyTrustedHtml')).getInnerHtml()).toBe(
expect(element(by.id('explicitlyTrustedHtml')).getInnerHtml()).toBe( * '<span onmouseover="this.textContent=&quot;Explicitly trusted HTML bypasses ' +
'<span onmouseover="this.textContent=&quot;Explicitly trusted HTML bypasses ' + * 'sanitization.&quot;">Hover over this text.</span>');
'sanitization.&quot;">Hover over this text.</span>'); * });
}); * });
}); * </file>
</file> * </example>
</example>
* *
* *
* *
@@ -647,13 +648,13 @@ function $SceDelegateProvider() {
* *
* That said, here's how you can completely disable SCE: * That said, here's how you can completely disable SCE:
* *
* <pre class="prettyprint"> * ```
* angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) { * angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) {
* // Completely disable SCE. For demonstration purposes only! * // Completely disable SCE. For demonstration purposes only!
* // Do not use in new projects. * // Do not use in new projects.
* $sceProvider.enabled(false); * $sceProvider.enabled(false);
* }); * });
* </pre> * ```
* *
*/ */
/* jshint maxlen: 100 */ /* jshint maxlen: 100 */