Merge pull request #2 from sirdarckcat/isolate-scripts

Replace CSP support with Isolated Scripts

Author: sirdarckcat

app.yaml

@@ -1,6 +1,7 @@
 runtime: python27
 api_version: 1
 threadsafe: true
+default_expiration: "0"
 
 # [START handlers]
 handlers:
@@ -11,6 +12,11 @@ handlers:
 - url: /bootstrap
   static_dir: bootstrap
 
+- url: /js
+  static_dir: js
+  http_headers:
+    Isolated-Script: "true"
+
 - url: /tasks/.*
   script: guestbook.app
   login: admin

guestbook.py

@@ -81,20 +81,23 @@ def get(self):
 
         template_values = {
             'user': user,
-            'guestbook_name': urllib.quote_plus(guestbook_name),
+            'guestbook_name': guestbook_name,
             'url': url,
             'url_linktext': url_linktext,
             'nonce': nonce,
         }
 
         template = JINJA_ENVIRONMENT.get_template('index.html')
-        self.response.headers.add("Content-Security-Policy","script-src 'nonce-%s'; object-src 'none'"%nonce)
+        self.response.headers.add("X-XSS-Protection","0")
+        self.response.headers.add("Set-Cookie","__isolatedScript-foo=1;httpOnly;secure")
         self.response.write(template.render(template_values))
 # [END main_page]
 
 # [START guestbook]
 class Guestbook(webapp2.RequestHandler):
     def get(self):
+        if not self.request.cookies.get('__isolatedScript-foo'):
+            return
         guestbook_name = self.request.get('guestbook_name',
                                           DEFAULT_GUESTBOOK_NAME)
         greetings_query = Greeting.query(

index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-{% autoescape true %}
+{% autoescape false %}
 <html>
   <head>
     <!-- [START css] -->
@@ -70,34 +70,7 @@
 
       <a href="{{ url|safe }}">{{ url_linktext }}</a>
     </div>
-    <script nonce="{{ nonce }}">
-      var submit = document.getElementById("gbsubmit");
-      var name = document.getElementById("gbname");
-      var form = document.getElementById("gbform");
-      var row = document.getElementById("gbrow");
-      var rows = [];
-      var table = row.parentNode;
-      function updateGuestbook() {
-        var url = "?guestbook_name="+encodeURIComponent(gbname.value);
-        submit.elements.guestbook_name.value = gbname.value;
-        history.pushState(null, "", url);
-        // Remove old rows.
-        rows.forEach(r=>r.parentNode.removeChild(r));
-        rows=[];
-        fetch("/guestbook" + url, {credentials: "include"}).then(r=>r.json()).then(j=>{
-          j.forEach(m=>{
-            var elem = table.insertBefore(row.cloneNode(true), table.firstChild);
-            rows.push(elem);
-            // Note this is an XSS.
-            elem.getElementsByTagName("blockquote")[0].innerHTML=m.content;
-          });
-        }).catch(e=>{
-          alert("Error loading guestbook comments");
-        });
-        return false;
-      }
-      gbform.onsubmit = window.onload = updateGuestbook;
-    </script>
+    <script src="js/app.js"></script>
   </body>
 </html>
 {% endautoescape %}

js/app.js

@@ -0,0 +1,28 @@
+var submit = document.getElementById("gbsubmit");
+var name = document.getElementById("gbname");
+var form = document.getElementById("gbform");
+var row = document.getElementById("gbrow");
+var rows = [];
+var table = row.parentNode;
+function updateGuestbook() {
+  var url = "?guestbook_name="+encodeURIComponent(gbname.value);
+  submit.elements.guestbook_name.value = gbname.value;
+  history.pushState(null, "", url);
+  // Remove old rows.
+  rows.forEach(r=>r.parentNode.removeChild(r));
+  rows=[];
+  fetch("/guestbook" + url, {credentials: "include"}).then(r=>r.json()).then(j=>{
+    j.forEach(m=>{
+      var elem = table.insertBefore(row.cloneNode(true), table.firstChild);
+      rows.push(elem);
+      // Note this is an XSS.
+      elem.getElementsByTagName("blockquote")[0].innerHTML=m.content;
+    });
+  }).catch(e=>{
+    alert("Error loading guestbook comments");
+  });
+  return false;
+}
+gbform.onsubmit = updateGuestbook;
+
+setTimeout(updateGuestbook, 1);