From dae694739b9581bea5dbc53522ec00d87b26ae55 Mon Sep 17 00:00:00 2001
From: Chirayu Krishnappa
Date: Fri, 19 Jul 2013 16:04:51 -0700
Subject: 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.
---
 src/ngSanitize/sanitize.js | 65 +++++++++++++++++++++++-----------------------
 1 file changed, 32 insertions(+), 33 deletions(-)

(limited to 'src/ngSanitize/sanitize.js')

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>&lt;div ng-bind-html="snippet"&gt;<br/>&lt;/div&gt;</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>&lt;div ng-bind-html="snippet"&gt;<br/>&lt;/div&gt;</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>&lt;div ng-bind-html="deliberatelyTrustDangerousSnippet()"&gt;<br/>&lt;/div&gt;</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>&lt;div ng-bind="snippet"&gt;<br/>&lt;/div&gt;</pre></td>
                <td><div ng-bind="snippet"></div></td>
              </tr>
-             <tr id="html-unsafe-filter">
-               <td>unsafe html filter</td>
-               <td><pre>&lt;div ng-bind-html-unsafe="getSceSnippet()"&gt;<br/>&lt;/div&gt;</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("&lt;p style=\"color:blue\"&gt;an html\n" +
                 "&lt;em onmouseover=\"this.textContent='PWN3D!'\"&gt;click here&lt;/em&gt;\n" +
                 "snippet&lt;/p&gt;");
        });
 
-       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 &lt;b&gt;text&lt;/b&gt;");
-         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 &lt;b onclick=\"alert(1)\"&gt;text&lt;/b&gt;");
        });
      </doc:scenario>
    </doc:example>
-- 
cgit v1.2.3