iframe sandboxing

parent.js

var sandboxDomain = 'https://different-domain.com'

function invokeCustomScript(scriptId) {
  var iframe, sandbox;
  
  iframe = document.createElement('iframe');
  iframe.src = sandboxDomain + '/custom-scripts/' + scriptId;
  sandbox = iframe.contentWindow || iframe;
  
  sandbox.postMessage({ method: 'init', state: gameState }, sandboxDomain);
}

window.addEventListener('message', function onSandboxMessage(evt) {
  // Verify that we're handling messages from the sandbox domain
  if (evt.origin !== sandboxDomain) {
    return;
  }
  
  if (!customScriptApi[evt.data.method]) {
    console.log('Error: Custom script attempted to call non-existant method ' + evt.data.method);
    return;
  }
  
  customScriptApi[evt.data.method].apply(customScriptApi, evt.data.args);
}, false);

sandbox.js

var parentDomain = 'https://main-domain.com',
    parentWindow

var customScriptApi = {
  doSomething: function doSomething() {
    if (!parentWindow) {
      throw new Error('Custom script sandbox not initialized');
    }
    
    parentWindow.postMessage({ 
      method: 'doSomething', 
      args: Array.prototype.slice.call(arguments)
    }, parentDomain);
  }
}

window.addEventListener('message', function onParentMessage(evt) {
  if (evt.origin !== parentDomain) {
    return;
  }
  
  if (evt.data.method === 'init') {
    parentWindow = evt.source;
    userScript(customScriptApi, evt.data.state);
  }
}, false);

// The user's script
function userScript(api, state) {
  // Inspect state to determine what custom stuff to do...
  api.doSomething('foo', 'bar', 'baz');
}