Upgrade to Pro — share decks privately, control downloads, hide ads and more …

eval everything - Running Student Code at Code ...

eval everything - Running Student Code at Code School

Talk originally given at JSConf 2014, My 30, 2014 at 16:30 in track B.

Adam Fortuna

May 30, 2014
Tweet

More Decks by Adam Fortuna

Other Decks in Technology

Transcript

  1. +

  2. iframe var iframe; ! $(function() { var iFrameEl = $('iframe')[0];

    iFrameEl.sandbox = 'allow-scripts'; iframe = iFrameEl.contentDocument; ! ! ! ! ! ! ! }); allow-scripts allow-same-origin allow-forms allow-popups $('textarea').on('keyup', function() { iframe.innerHTML = ''; iframe.open(); iframe.write($(this).val()); iframe.close(); });
  3. self.onmessage = function(message) { ! ! ! }; var worker

    = new Worker('worker.js'); $('textarea').on('change', function() { worker.postMessage({ code: $(this).val() }); }); worker.onmessage = function(message) { // message.data.errors }; JSHINT(message.data.code); importScripts('jshint.js'); self.postMessage({ errors: JSHINT.errors }); app.js worker.js
  4. No DOM access No access to parent page Web Workers

    Background processing Math/Computation Heavy Compression Games & Graphics
  5. describe('angular module', function() { it('Make sure to create an Angular

    module using the `angular.module` method.', function() { … }); });
  6. Browserify chai & sinon & jshint Mocha Custom Tests +

    + test runner question specific Stuff.js + transport
  7. Mocha var code = 'var app;'; ! describe('angular module', function()

    { it('Make sure to create an Angular module using the `angular.module` method.', function() { }); }); Shown only when incorrect in this way
  8. Don’t Really eval eval would contaminate all tests eval(code); var

    code = 'var app;'; it('Make sure to create an Angular module using the `angular.module` method.', function() { }); }); describe('angular module', function() {
  9. Libraries Browserify in some libraries var assert = require('chai').assert, sinon

    = require('sinon'), angular = require('angular'), sandbox = require('javascript-sandbox'); var code = 'var app;'; describe('angular module', function() { it('Make sure to create an Angular module using the `angular.module` method.', function() { }); });
  10. ok, eval in an iframe ! ! ! var sandbox,

    spy; before(function() { spy = sinon.spy(angular, 'module'); sandbox = new Sandbox({ variables: { 'angular': angular } }); sandbox.evaluate(code); }); it(…); Setup an iframe and pass student code in var code = 'var app;'; … describe('angular module', function() { });
  11. it('Make sure to create an Angular module using the `angular.module`

    method.', function() { ! }); spy ! ! ! 
 ! assert(spy.callCount > 0); ! Let the stub do the work var code = 'var app;'; describe('angular module', function() { }); … ! ! …
  12. Dynamic Messages You created a module named banana, but we’re

    looking for one named gemStore. var code = 'var app = angular.module(\'banana\', [])'; it('Not used message', function() { }); var moduleName = spy.getCall(0).args[0]; assert(moduleName == "gemStore", "You created a module named `" + moduleName + "` but we're looking for a module named `gemStore`.”);
  13. Infinite Loop Protection github.com/Constellation/escodegen ! while(true) { ! alert('You shall

    not pass!'); ! } github.com/benjamn/recast var iteration = 0; iteration++; if(iteration > 100000) { throw "Infinite Loop Error"; }
  14. Thanks, ! Adam Fortuna Technical Director Code School @adamfortuna 5

    Minutes of JavaScript Podcast fivejs.envylabs.com Code School codeschool.com