I have a script that create an iframe like this, and I use the iframe to check authentication then redirect the main window :
var target "https://my.website.it"
var iframe = document.createElement("iframe");
iframe.id = "my-frame";
iframe.src = "/my-url/that?redirect=true&target=" + target
iframe.onload = function() {
iframeFn();
};
into the iframeFn() function I want to check the location of the iframe itself to perform some controls before redirect:
function iframeFn() {
var myFrame = document.getElementById("my-frame");
var iframeWindow = myFrame.contentWindow;
if (iframeWindow.location.search.search(/fail/) >= 0) {
window.location = '/'
}
I put this script in a cdn and I use this script in a website with the same origin url of the redirect target (https://my.website.it), and it works. But if I try to use this script in a website with different origin (https://different.website.it) I got this error:
Uncaught DOMException: Blocked a frame with origin "https://different.website.it" from accessing a cross-origin frame.
at reloadInIFrame (https://static.website.it/my-script.js:34:29)
at HTMLIFrameElement.iframe.onload (https://static.website.it/.js:82:5)
at this line
if (iframeWindow.location.search.search(/fail/) >= 0) {
I've read this: SecurityError: Blocked a frame with origin from accessing a cross-origin frame but I can't figure out how to use window.postMessage in my case.
NB: the second level domain is the same in both cases (website.it)
Thanks for your help!
I'm using JavaScript code in IOS swift. I can execute the Javascript and jquery code for the action trigger in rendered web-view.
I can set values in other all pages like user information, shipping details pages but on the payment card details page all input tags render from the cross-origin iframe.
I'm trying to set the value attribute of that input tag in payment page ( This document comes from cross-origin iFrame ) but it gives me the below error.
ERROR: VM27055:5 Uncaught DOMException: Blocked a frame with origin “https://www.demo.com” from accessing a cross-origin frame.
**This is my Javascript code:**
var ifrm = document.getElementsByClassName(‘wpwl-wrapper-cardNumber gl-input’)[0].firstChild;
console.log(ifrm);
setTimeout(function() {
var win = ifrm.contentWindow;
console.log(win);
var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
console.log(doc);
var input = doc.getElementsByTagName(‘input’)[0];
console.log(input);
input.setAttribute(‘value’,‘4242424242424242’);
}, 2000);
Help me to resolve this error.
I am trying to input a value from my website to another website loaded in the iframe.
For example, I loaded gmail.com in my iframe and i need to input login credentials from my website.
var iframe = document.getElementById('content_frame');
var doc = iframe.contentDocument || iframe.contentWindow.document;
var elem = document.getElementById('userEmail');
while executing the second line, i've got the below error
SecurityError: Permission denied to access property "document" on cross-origin object
You can not do that because of same-origin policy .
I have a site which has a media player embedded inside an iframe. The media player and the site are on the same domain, preventing cross-origin issues. Each page, the main page as well as the media player page, have a bit of code which finds the height and width of any parent iframe:
var height = $(parent.window).height();
var width = $(parent.window).width();
No problems so far....until:
A client wants to embed my site inside an iframe on his own site. His site is on a different domain. Now, my iframe is inside another iframe and my code is throwing cross-origin errors.
The following does not throw errors:
var test1 = parent.window; // returns my site
var test2 = window.top; // returns client site
The following does throw cross-origin errors:
var test3 = parent.window.document;
var test4 = $(parent.window);
var test5 = window.top.document;
var test6 = $(window.top);
How do I get the height of the iframe on my domain without the cross-origin errors? I'm hoping for a pure javascript/jQuery solution.
Options which will not work for my solution are:
Using document.domain to white list the site.
Modifying the web.config to white list the site.
Like in Inception, I must go deeper. Please help.
You will need to use Javascript's messager. First, you need to define a function like this:
function myReceiver(event) {
//Do something
}
Then you need an event listener:
window.addEventListener("message", myReceiver);
You will need something like this on both sides. Now, you can send a message like this to the iframe:
innerWindow.contentWindow.postMessage({ message: {ResponseKey: "your response key", info1: "something1", info2: "something2"}}, innerWindow.src)
and this is how you can send a message to the parent:
window.parent.postMessage({ message: {ResponseKey: "your response key", info1: "something1", info2: "something2"}}, myorigin);
The only missing item in the puzzle is myorigin. You will be able to find it out in your iframe using event.origin || event.originalEvent.origin in the message receiver event.
However, the pages using your site in their pages inside an iframe will have to include a Javascript library which will handle the communication you need. I know how painful is this research, I have spent days when I have done it before to find out the answer.
Your code is running from the iframe in the middle of the parent and the child window. So, anytime you call
window.parent
and your site is embedded inside an iframe and the parent is a different domain (Same origin policy), an error will be thrown. I would recommend first checking if the parent is the same origin. You need to wrap this check in a try catch.
NOTE: Most browsers, but not Edge, will not throw an error if the parent is http://localhost:xxx and the iframe is http://localhost:zzz where xxx is a different port number than zzz. So, you also need to manually check the origins match by comparing the protocol, domain, and port.
var isEmbeddedInCrossOriginIframe = false;
try {
var originSelf = (window.self.location.protocol + '//' +
window.self.location.hostname +
(window.self.location.port ? ':' +
window.self.location.port : '')).toLowerCase();
var originParentOrSelf = (window.parent.location.protocol + '//' +
window.parent.location.hostname +
(window.parent.location.port ? ':' +
window.parent.location.port : '')).toLowerCase();
isEmbeddedInCrossOriginIframe = originSelf != originParentOrSelf;
}
catch(err) {
isEmbeddedInCrossOriginIframe = true;
//console.log(err);
}
Your solution will then be:
var height = $(isEmbeddedInCrossOriginIframe ? window : parent.window)
.height();
var width = $(isEmbeddedInCrossOriginIframe ? window : parent.window)
.width();
I have a big big trouble. :( I'm trying to get an iFrame innerHTML in order to put that in a div innerHTML. I've tried everything I found on google. Is there any chance to help me with that? Thanks!
My guess is the site in the iframe does not have the same domain, protocol and port as its parent, and therefore, can not be accessed.
This is by design. Check out the Same Origin Policy.
If you are on http://sub.domain.com and want to access http://domain.com, you could use...
document.domain = 'domain.com';
Documentation # MDC.
As for getting the innerHTML, try...
var iframe = document.getElementById('iframe'),
iframeDocument;
if ('contentWindow' in iframe) {
iframeDocument = iframe.contentWindow;
} else {
iframeDocument = iframe.contentDocument;
}
var innerHTML = iframeDocument.innerHTML;