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/sanitize.js | |
| 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/sanitize.js')
| -rw-r--r-- | src/ngSanitize/sanitize.js | 65 | 
1 files changed, 32 insertions, 33 deletions
| 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> | 
