How to input a value to textbox in iframe - javascript

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 .

Related

Cannot check iframe window location from a website with different origin

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!

set value attribute for cross origin iframe form input using javascript

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.

Access an Iframe variable from parent window

I have a webpage at url https://parent.com and it has an iframe injected into it with source https://iframe.com. Iframe has a global variable defined called iframe_variable. I want to access the iframe_variable from parent document.
I know browsers don't allow cross origin communication and they provide a postMessage API to do it securely.
Constraint: I do not have access to any of parent or iframe code.
On Browser console, I somehow want to access iframe_variable
I have tried the following:
Get reference of iframe first.
var iframe = document.getElementsByTagName('iframe')[0]; // There is only one iframe on document
Create a listener for message event posted from parent window.
var iframeListener = function(e) {
console.log("Got message from parent");
e.source.postMessage(JSON.stringify({'IFRAME_VARIABLE': window.IFRAME_VARIABLE}));
}
Create a listener for parent window to accept 'message' posted from iframe.
parentListener = function(e) {
console.log('Got message from iframe');
var data = JSON.parse(e.data);
window.VARIABLE = data.IFRAME_VARIABLE;
}
Attach parent_listener to message event.
window.addEventListener('message', parentListener, false);
Now if i try to post a message to iframe from parent as follows:
iframe.contentWindow.postMessage('test message', '*')
It doesn't trigger 'iframeListener'. The reason is because it is not registered against the message event in iframe.
I don't think I can even do that from the browser console when I am on parent.com as any attempt to do iframe.contentWindow.addEventListener will result in an error as it will be an attempt to access a different domain.
Is there a workaround that? Is there anything that I am missing in my understanding and research.
P.S: I have not written the origin checks for simplicity. I know I must check for the origin a message is posted from. Not doing that leaves a huge security hole.

Error when trying to 'Unloading/Removing content from an iFrame'

I'm trying to remove the content from an iFrame and I get this SO question: Unloading/Removing content from an iFrame.
The problem is that when I'm trying to code the solutions given, I get this error on the debug console in the FireBug: Permission denied to access property 'document'.
What I'm doing is this:
var frame = document.getElementById("idFrame"),
frameDoc = frame.contentDocument || frame.contentWindow.document; //error here
frameDoc.removeChild(frameDoc.documentElement);
What is the problem here? What I'm doing wrong?
Same error when I tried to do:
$("#amadeusFrame").contents().find("body").html('');
That's normal. Try:
var frame = document.getElementById("idFrame");
frame.src = "about:blank";
You can't play with the content of iframe because it would be a vector for XSS attack.
You can do this only if the iframe source is in the same domain as containing document.

How do I get the innerHTML of an iframe?

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;

Categories

Resources