chore: WIP

Still experimenting with using appcache to limit access to network requests. When it works, it works well, but the big issue is when users sign in, the browser doesn't always get the right cache manifest delivered, so the network blocking gets in a mess.
jsbin · Apr 23, 2017 · 632f3e6 · gnijuohz · May 25, 2017 · 632f3e6
1 parent d670dc6
commit 632f3e6
Show file tree

Hide file tree

Showing 15 changed files with 812 additions and 208 deletions.
diff --git a/lib/addons/memcached/index.js b/lib/addons/memcached/index.js
@@ -44,7 +44,6 @@ module.exports = function (app, connection) {
   }
 
   app.use(function (req, res, next) {
-    console.log('session middleware');
     // stick this all behind a feature flag
     if (!feature('serverSession', req)) {
       return next();
@@ -101,11 +100,9 @@ module.exports = function (app, connection) {
 
   app.use(function (req, res, next) {
     memcached.items().then(function (results) {
-      console.log('session.count: %s', results.length);
       metrics.gauge('sessions.count', results.length);
       next();
     }, function (e) {
-      console.log('failed', e);
       next();
     });
   });

diff --git a/lib/app.js b/lib/app.js
@@ -141,7 +141,7 @@ app.set('url prefix', options.url.prefix);
 app.set('url ssl', options.url.ssl);
 app.set('url full', 'http://' + app.get('url host') + app.get('url prefix'));
 app.set('basepath', app.get('url prefix'));
-app.set('is_production', app.get('env') === app.PRODUCTION);
+app.set('is_production', process.env.NODE_ENV === app.PRODUCTION);
 
 if (options.url.static) {
   app.set('static url', 'http://' + app.get('url static'));

diff --git a/lib/handlers/bin.js b/lib/handlers/bin.js
@@ -148,6 +148,10 @@ module.exports = Observable.extend({
     next();
   },
   testPreviewAllowed: function (req, res, next) {
+    if (!req.bin) {
+      console.log('404 on', req.url);
+      return next(new Error(404));
+    }
     /**
      * if the bin does not have a user who create it
      * and it was made 2 hours ago

diff --git a/lib/routes.js b/lib/routes.js
@@ -206,9 +206,11 @@ function mountRouter(expressApp) {
     var statik = sandbox.helpers.urlForStatic(undefined, true);
     res.set('content-type', 'text/cache-manifest');
     res.set('Cache-Control', 'public, max-age=0'); // don't cache
+    console.log(req.session);
     res.render('manifest-appcache', {
       version: req.app.settings.version,
       root: statik,
+      open: req.session.open,
       layout: false,
     });
   });
@@ -320,30 +322,25 @@ function mountRouter(expressApp) {
 
   // Runner - if in production, let nginx pick up the runner
   // if (expressApp.locals.is_production) {
-    expressApp.render('runner', {
-      scripts: scripts.runner,
-      'static': sandbox.helpers.urlForStatic(undefined, true),
-    }, function (error, html) {
-      console.log(html);
-      fs.writeFile(__dirname + '/../public/runner.html', html, () => {});
-    });
+    // expressApp.render('runner', {
+    //   scripts: scripts.runner,
+    //   'static': sandbox.helpers.urlForStatic(undefined, true),
+    // }, function (error, html) {
+    //   fs.writeFile(__dirname + '/../public/runner.html', html, () => {});
+    // });
   // }
 
   app.get('/runner', function (req, res) {
-    var statik = sandbox.helpers.urlForStatic(undefined, req.secure);
+    console.log('runner', req.query.pro);
+    req.session.open = !!req.query.pro;
     res.render('runner', {
-      scripts: app.get('is_production') ? false : scripts.runner,
-      'static': statik
+      scripts: res.app.locals.is_production ? false : scripts.runner,
+      'static': sandbox.helpers.urlForStatic(undefined, true),
     });
   });
 
-  app.get('/runner-wrapper', function (req, res) {
-    const { username = 'anon', pro = false } = req.session.user || {};
-    res.render('runner-wrapper', {
-      layout: false,
-      username,
-      pro,
-    });
+  app.get('/runner-inner', function (req, res) {
+    res.send('<html manifest="/manifest.appcache"></html>');
   });
 
   app.post('/processor', features.route('processors'), function (req, res) {

diff --git a/package.json b/package.json
@@ -84,11 +84,11 @@
   },
   "devDependencies": {
     "glob": "^7.0.5",
-    "grunt": "~0.4.1",
+    "grunt": "^1.0.1",
     "grunt-cli": "~0.1.11",
-    "grunt-contrib-concat": "~0.3.0",
+    "grunt-contrib-concat": "^1.0.1",
     "grunt-contrib-jshint": "~0.1.1",
-    "grunt-contrib-uglify": "~0.2.2",
+    "grunt-contrib-uglify": "^2.3.0",
     "hbs-utils": "0.0.3",
     "mocha": "~1.21.4",
     "proxyquire": "^1.7.10",

diff --git a/public/_runner.html b/public/_runner.html
@@ -20,7 +20,6 @@
     width: 100%;
   }
 </style>
-<iframe src="/runner-wrapper"></iframe>
 <div id="sandbox-wrapper"></div>
   <script src="https://rem.jsbin-dev.com/js/prod/runner-3.40.3.min.js"></script>
 

diff --git a/public/js/embed.min.js b/public/js/embed.min.js
diff --git a/public/js/render/live.js b/public/js/render/live.js
@@ -350,7 +350,11 @@ var renderLivePreview = (function () {
     iframe.setAttribute('frameBorder', '0');
     iframe.setAttribute('name', '<proxy>');
     $live.prepend(iframe);
-    iframe.src = jsbin.runner;
+    var src = jsbin.runner;
+    if (jsbin.user.pro) {
+      src += '?pro=1';
+    }
+    iframe.src = src;
     try {
       iframe.contentWindow.name = '/' + jsbin.state.code + '/' + jsbin.state.revision;
     } catch (e) {

diff --git a/public/js/runner/runner.js b/public/js/runner/runner.js
@@ -2,7 +2,7 @@
  * JS Bin Runner
  * Accepts incoming postMessage events and updates a live iframe accordingly.
  * ========================================================================== */
-
+/*globals sandbox loopProtect window alert */
 var runner = (function () {
   'use strict';
   var runner = {};
@@ -105,7 +105,7 @@ var runner = (function () {
       // Note that each document.write fires a DOMContentLoaded in Firefox.
       // This method exhibits synchronous and asynchronous behaviour, depending
       // on the browser. Urg.
-      // childDoc.write('');
+      childDoc.write('');
 
       // Give the child a reference to things it needs. This has to go here so
       // that the user's code (that runs as a result of the following
@@ -132,6 +132,7 @@ var runner = (function () {
       // why the source is rendered above (processor.render) – it should be one
       // string. IE's a sensitive soul.
       childDoc.write(source);
+      // childDoc.documentElement.innerHTML = source;
 
       // Close the document. This will fire another DOMContentLoaded.
       childDoc.close();

diff --git a/public/js/runner/sandbox.js b/public/js/runner/sandbox.js
@@ -3,6 +3,8 @@
  * Handles creating and insertion of dynamic iframes
  * ========================================================================== */
 
+/*globals window document */
+
 var sandbox = (function () {
 
   var sandbox = {};
@@ -13,18 +15,20 @@ var sandbox = (function () {
   sandbox.target = null;
   sandbox.old = null;
   sandbox.active = null;
+  sandbox.state = {};
   sandbox.guid = +new Date(); // id used to keep track of which iframe is active
 
   /**
    * Create a new sandboxed iframe.
    */
   sandbox.create = function () {
     var iframe = document.createElement('iframe');
-    iframe.src = window.location.origin + '/runner-wrapper';
+    iframe.src = window.location.origin + '/runner-inner';
     iframe.setAttribute('sandbox', 'allow-modals allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts');
     iframe.setAttribute('frameBorder', '0');
     iframe.setAttribute('name', 'JS Bin Output ');
     iframe.id = sandbox.guid++;
+    sandbox.active = iframe;
     return iframe;
   };
 
@@ -35,36 +39,34 @@ var sandbox = (function () {
    */
   sandbox.use = function (iframe, done) {
     if (!sandbox.target) throw new Error('Sandbox has no target element.');
-    sandbox.old = sandbox.active;
-    var state = sandbox.saveState(sandbox.old);
-    sandbox.active = iframe;
+    // sandbox.old = sandbox.active;
+    // sandbox.active = iframe;
     prependChild(sandbox.target, iframe);
 
-    iframe.onload = function () {
-      console.log('done', sandbox.guid);
-      done();
-      // if (done) setTimeout(done, 10);
-    };
-
     // setTimeout allows the iframe to be rendered before other code runs,
     // allowing us access to the calculated properties like innerWidth.
     setTimeout(function () {
       // call the code that renders the iframe source
       // if (done) done();
-
-      // remove *all* the iframes, baring the active one
-      var iframes = sandbox.target.getElementsByTagName('iframe'),
-          length = iframes.length,
-          i = 0,
-          id = sandbox.active.id,
-          iframe;
-
-      for (; iframe = iframes[i], i < length; i++) {
-        if (iframe.id !== id) {
-          iframe.parentNode.removeChild(iframe);
-          length--;
+      sandbox.active.contentWindow.addEventListener('load', function () {
+        console.log('IFRAME LOADED');
+        if (done) done();
+
+
+        // remove *all* the iframes, baring the active one
+        var iframes = sandbox.target.getElementsByTagName('iframe'),
+            length = iframes.length,
+            i = 0,
+            id = sandbox.active.id,
+            iframe;
+
+        for (; iframe = iframes[i], i < length; i++) {
+          if (iframe.id !== id) {
+            iframe.parentNode.removeChild(iframe);
+            length--;
+          }
         }
-      }
+      });
     }, 0);
   };
 

diff --git a/public/runner.html b/public/runner.html
@@ -19,9 +19,7 @@
     width: 100%;
   }
 </style>
-
 <div id="sandbox-wrapper"></div>
-<iframe src="/runner-wrapper"></iframe>
   <script src="https://rem.jsbin-dev.com/js/vendor/polyfills.js"></script>
 <script src="https://rem.jsbin-dev.com/js/vendor/stringify.js"></script>
 <script src="https://rem.jsbin-dev.com/js/runner/utils.js"></script>

diff --git a/views/manifest-appcache.html b/views/manifest-appcache.html
@@ -1,21 +1,37 @@
 CACHE MANIFEST
-# v1-{{version}}
-/runner
-/runner-wrapper
-/js/prod/runner-{{version}}.min.js
-{{root}}/js/vendor/polyfills.js
-{{root}}/js/vendor/stringify.js
-{{root}}/js/runner/utils.js
-{{root}}/js/vendor/loop-protect.min.js
-{{root}}/js/runner/proxy-console.js
-{{root}}/js/runner/processor.js
-{{root}}/js/runner/sandbox.js
-{{root}}/js/runner/runner.js
-{{root}}/js/runner/index.js
+# v1-{{version}}-{{open}}
 
-# prevent all network traffic
+# only allow these CDNs
 NETWORK:
-https://code.jquery.com/
-
-FALLBACK:
-* /runner
+{{#if open}}
+*
+{{else}}
+{{root}}
+{{root}}/js/prod/runner-{{version}}.min.js
+https://maxcdn.bootstrapcdn.com
+https://ajax.googleapis.com
+https://cdn.firebase.com
+https://cdn.jsdelivr.net
+https://cdn.popcornjs.org
+https://cdn.ractivejs.org
+https://cdn.rawgit.com
+https://cdnjs.cloudflare.com
+https://code.jquery.com
+https://fb.me
+https://modernizr.com
+https://rawgit.com
+https://unpkg.com
+https://www.promisejs.org
+https://yui.yahooapis.com
+https://zeptojs.com
+https://aui-cdn.atlassian.com
+https://cdn.sencha.io
+https://code.getmdl.io
+https://code.ionicframework.com
+https://da7xgjtj801h2.cloudfront.net
+https://enyojs.com
+https://extjs.cachefly.net
+https://nightly.enyojs.com
+https://static.jsbin.com
+https://vjs.zencdn.net
+{{/if}}
diff --git a/views/runner-wrapper.html b/views/runner-wrapper.html
@@ -1,7 +1,3 @@
-<!-- {{#unless pro}} -->
-<html manifest="/manifest.appcache?user={{username}}">
+<html manifest="/manifest.appcache">
   <script>console.log('wrapper ready')</script>
 </html>
-<!-- {{else}} -->
-<!-- <html></html> -->
-<!-- {{/unless}} -->
diff --git a/views/runner.html b/views/runner.html
@@ -1,4 +1,5 @@
 <!doctype html>
+<html manifest="/manifest.appcache">
 <meta charset=utf-8>
 <title>JS Bin Runner</title>
 
@@ -19,9 +20,8 @@
     width: 100%;
   }
 </style>
-
+<iframe src="{{root}}/runner-inner"></iframe>
 <div id="sandbox-wrapper"></div>
-<iframe src="/runner-wrapper"></iframe>
 {{#if settings.is_production}}
   <script>
   if ('serviceWorker' in navigator && location.origin.indexOf('null') !== -1) {