diff options
| author | Chirayu Krishnappa | 2013-07-19 16:04:51 -0700 |
|---|---|---|
| committer | Chirayu Krishnappa | 2013-07-25 14:29:56 -0700 |
| commit | dae694739b9581bea5dbc53522ec00d87b26ae55 (patch) | |
| tree | 00d55fd867916df991f699cfe398243205f03ffc /src/ngSanitize | |
| parent | bea9422ebfc8e80ee28ad81afc62d2e432c85cbb (diff) | |
| download | angular.js-dae694739b9581bea5dbc53522ec00d87b26ae55.tar.bz2 | |
feat(ngBindHtml, sce): combine ng-bind-html and ng-bind-html-unsafe
Changes:
- remove ng-bind-html-unsafe
- ng-bind-html is now in core
- ng-bind-html is secure
- supports SCE - so you can bind to an arbitrary trusted string
- automatic sanitization if $sanitize is available
BREAKING CHANGE:
ng-html-bind-unsafe has been removed and replaced by ng-html-bind
(which has been removed from ngSanitize.) ng-bind-html provides
ng-html-bind-unsafe like behavior (innerHTML's the result without
sanitization) when bound to the result of $sce.trustAsHtml(string).
When bound to a plain string, the string is sanitized via $sanitize
before being innerHTML'd. If $sanitize isn't available, it's logs an
exception.
Diffstat (limited to 'src/ngSanitize')
| -rw-r--r-- | src/ngSanitize/directive/ngBindHtml.js | 25 | ||||
| -rw-r--r-- | src/ngSanitize/sanitize.js | 65 |
2 files changed, 32 insertions, 58 deletions
diff --git a/src/ngSanitize/directive/ngBindHtml.js b/src/ngSanitize/directive/ngBindHtml.js deleted file mode 100644 index 150e6bdc..00000000 --- a/src/ngSanitize/directive/ngBindHtml.js +++ /dev/null @@ -1,25 +0,0 @@ -'use strict'; - - -/** - * @ngdoc directive - * @name ngSanitize.directive:ngBindHtml - * - * @description - * Creates a binding that will sanitize the result of evaluating the `expression` with the - * {@link ngSanitize.$sanitize $sanitize} service and innerHTML the result into the current element. - * - * See {@link ngSanitize.$sanitize $sanitize} docs for examples. - * - * @element ANY - * @param {expression} ngBindHtml {@link guide/expression Expression} to evaluate. - */ -angular.module('ngSanitize').directive('ngBindHtml', ['$sanitize', function($sanitize) { - return function(scope, element, attr) { - element.addClass('ng-binding').data('$binding', attr.ngBindHtml); - scope.$watch(attr.ngBindHtml, function ngBindHtmlWatchAction(value) { - value = $sanitize(value); - element.html(value || ''); - }); - }; -}]); diff --git a/src/ngSanitize/sanitize.js b/src/ngSanitize/sanitize.js index 110b3a64..70932899 100644 --- a/src/ngSanitize/sanitize.js +++ b/src/ngSanitize/sanitize.js @@ -68,8 +68,7 @@ var ngSanitizeMinErr = angular.$$minErr('ngSanitize'); '<p style="color:blue">an html\n' + '<em onmouseover="this.textContent=\'PWN3D!\'">click here</em>\n' + 'snippet</p>'; - // ng-bind-html-unsafe requires a $sce trusted value of type $sce.HTML. - $scope.getSceSnippet = function() { + $scope.deliberatelyTrustDangerousSnippet = function() { return $sce.trustAsHtml($scope.snippet); }; } @@ -78,57 +77,57 @@ var ngSanitizeMinErr = angular.$$minErr('ngSanitize'); Snippet: <textarea ng-model="snippet" cols="60" rows="3"></textarea> <table> <tr> - <td>Filter</td> + <td>Directive</td> + <td>How</td> <td>Source</td> <td>Rendered</td> </tr> - <tr id="html-filter"> - <td>html filter</td> - <td> - <pre><div ng-bind-html="snippet"><br/></div></pre> - </td> - <td> - <div ng-bind-html="snippet"></div> - </td> + <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="escaped-html"> - <td>no filter</td> + <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> - <tr id="html-unsafe-filter"> - <td>unsafe html filter</td> - <td><pre><div ng-bind-html-unsafe="getSceSnippet()"><br/></div></pre></td> - <td><div ng-bind-html-unsafe="getSceSnippet()"></div></td> - </tr> </table> </div> </doc:source> <doc:scenario> - it('should sanitize the html snippet ', function() { - expect(using('#html-filter').element('div').html()). + 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('#escaped-html').element('div').html()). + 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 inline raw snippet if filtered as unsafe', function() { - expect(using('#html-unsafe-filter').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($sce) { - input('snippet').enter('new <b>text</b>'); - expect(using('#html-filter').binding('snippet')).toBe('new <b>text</b>'); - expect(using('#escaped-html').element('div').html()).toBe("new <b>text</b>"); - expect(using('#html-unsafe-filter').element('div').html()).toBe('new <b>text</b>'); + 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>"); }); </doc:scenario> </doc:example> |
