diff options
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> |