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?
Related
I am working on a project, and it involves me clicking a reCaptcha element (iframe) in JavaScript. I have found multiple ways to detect if there is a reCaptcha element (".g-recaptcha", role='presentation' on the iframe itself, etc) however upon trying to click it I get console errors. Note that right now I am just executing the code in the web console, and have not actually programmed it into an extension. Basically, the command I am trying to run the console is :
document.querySelector('[role="presentation"]').contentWindow.document.getElementById("recaptcha-anchor").click()
The reason this "should" work is because the iframe element has the unique attribute of "role=presentation", it then goes into the html code embedded in the iframe and tries to click the little box, as noted by "recaptcha-anchor". However, testing this code grants me the following error:
VM8195:1 Uncaught DOMException: Blocked a frame with origin "https://minecraft.buzz" from accessing a cross-origin frame.
at <anonymous>:1:62
(anonymous) # VM8195:1
Does someone have any ways to get around this, or potentially know how I could code something in a JS chrome extension to do this?
We have Dynamics CRM and a webform which is loaded from the ribbon, essentially inside an iframe.
How do we get the logged on user? On the top right, is my name and image as logged in via Active Directory. However, if I do something like:
var UserID = window.parent.Xrm.Page.context.getUserId();
or in C#:
UserPrincipal user = UserPrincipal.Current;
lblUser.Text = user.SamAccountName;
then we get the generic user that CRM is configured to use.
If I do a right click on the entire form and go "View Source", I can see this:
var USER_NAME = 'Rodney Ellis';
In Chrome's developer tools I can run this from the Console, and my name appears:
alert(USER_NAME);
But when I try to access it from javascript in the code it says it can't be found:
Uncaught ReferenceError: USER_NAME is not defined
How can I get the Username from inside the aspx webform, either by c# or js? Cross-side scripting being blocked has stopped a lot of the easy ways, hence why we're looking for a work-around.
The below code should give you what you want. Read more
Xrm.Page.context.getUserName();
But based on popup or inline embedded iframe, you have append in front.
window.parent.Xrm.Page.context.getUserName();
window.opener.Xrm.Page.context.getUserName();
In one of the all time great hacks ... we got around the problem by embedding another iFrame into a web resource!
So the web resource can call Xrm.Page.context.getUserName() and then concatenate that to the querystring which we then pass into an iFrame. because CRM thinks the iframe is just one control, it allows all the webform commands taking place inside of it and doesn't give any 500 errors.
I've looked for answers to this question, but the closest that I could find all had to do with using javascript to create an iframe on a user-owned page. I specifically want to inject javascript into a website via the URL in order to add a frame to Google at the bottom of that website. The syntax which I have been using is as follows:
Javascript: var ifr=document.createElement('iframe');ifr.setAttribute("src","www.Google.com");ifr.width=100+'%';ifr.height=500+'px';document.body.appendChild(ifr); void(0);
Unfortunately, every time that I submit this, the iframe throws a 500 internal server error. Can anybody lend advice as to why this may be happening?
I'm making a chrome extension (content script) that will add text after the "More" in the top black bar in gmail. Those elements are encapsulated in the canvas_frame iframe.
When I try to access those elements with:
document.getElementById('canvas_frame').contentWindow.document.getElementById('gbz').innerHTML = scr;
I get Uncaught TypeError: Cannot read property 'document' of undefined. But if I type that code directly into the chrome developer console it works. Why is this? How can I access and modify that element from my chrome extension.
I'm new with javascript so I am likely missing something obvious. Thanks.
Try
document.getElementById('canvas_frame').contentDocument.document.getElementById('gbz').innerHTML = src;
I have built Chrome Extensions myself and have encountered this issued, there are a couple of ways to mitigate it, one is to run a timer loop in JS looking for #canvas_frame and stop it when you find it, the other is to listen for DOM node insert events and again, if the element you are looking for has been inserted, start doing what you want to do.
While canvas_frame has been the "content area" element for Gmail to interact with if that's what you need to do, currently (as of a few days ago) I've encountered instances of Google Apps Gmail that DO NOT have a content_frame, or rather, have one for an instant when the page loads and then it gets removed, I'm not sure what shenanigans Google is pulling, but since they don't provide an official API for making Gmail Chrome Extensions (so very unfortunately), we are at their mercy as Extension developers...
im using an iframe from the fancybox plugin. I can close the iframe in every browser excpect google chrome with the javascript order:
parent.$.fancybox.close();
or:
parent.jQuery.fancybox.close();
just google chrome refuses to do his job in this case.
The error message of the console is:
Unsafe JavaScript attempt to access frame with URL file:///C:/Users/exampleuser/Desktop/index.html from frame with URL file:///C:/Users/exampleuser/Desktop/Version42/index.html#. Domains, protocols and ports must match.
pidgin.js:357Uncaught TypeError: Cannot read property 'fancybox' of undefined
My frame is local at the moment if that matters.
Try using parent.postMessage() (described here) and listen in on window.onmessage at the parent to invoke $.fancybox.close().
Nothing wrong with your code but Google Chrome won't let you work with ajax or iframes (and fancybox) locally. You need to upload your files to a server to make it work.