Using Google Drive in an iFrame doesn't work

Question

I'm running into some problems using Google Drive in an iFrame. Normally, using it in an iFrame wouldn't be a good idea anyways, but this is for teaching Google Drive, where a student codes up something and then they can preview it.

The preview needs to happen in an iFrame, because that way it's sandboxed, and won't potentially disturb the rest of the page. I've been attempting to do this in a few different ways. I'm thinking it's related to a limitation of using OAuth an iframe, but open to other suggestions.

Here's the non-iframe version which works. This just sets up a Google Picker using my client_id and developer_key. It works fine. http://sandbox.codeschool.com.s3.amazonaws.com/dart/drive.html

Attempt #1

If you try to run this same script in an iframe, things go wrong. Here's an example of this: http://sandbox.codeschool.com.s3.amazonaws.com/dart/loader-src.html

The entire code for this page is

<iframe height='600' width='800' src='drive.html' sandbox='allow-scripts'></iframe>

Google loader gapi loads, and calls the auth callback correctly, but the script doesn't properly load. This gives this error on this code:

gapi.auth.authorize({
  'client_id': clientId,
  'scope': ['https://www.googleapis.com/auth/drive']
}, handleAuthentication);

Uncaught TypeError: Cannot call method 'authorize' of undefined Uncaught TypeError: Cannot read property 'prototype' of undefined

So somehow Google Drive is saying the library loaded, but auth isn't being defined.

Attempt #2

Rather than loading everything in from an iframe via the src, attempting to create an iframe dynamically via JavaScript and write the content in. Here's the link to this example: http://sandbox.codeschool.com.s3.amazonaws.com/dart/loader-js.html Basically something like this:

iframe = document.getElementsByTagName('iframe')[0];
iframe.sandbox = 'allow-scripts';
doc = iframe.contentDocument;
doc.open();
doc.write(htmlContent());
doc.close();

This seems to get us a step farther. Rather than getting the JS error on authorize, the script progresses down to where it creates the picker before failing when it tries to set the developer key.

This gives an error: "The API developer key is invalid.".

I'm initially thinking this is because the browser key referrers are set wrong. Here's what they're set at for this developer key:

• http://sandbox.codeschool.com.s3.amazonaws.com/*
• http://*
• *

Last two were really just to test things. Anyone have any suggestions on possible ways of getting around this restriction?