Complete isolation of javascript in the iframe from the same domain - javascript

Assume we have a window and an iframe with some javascript in it. The iframe sourcecode is defined directly in "srcdoc" attribute of the iframe.
Is it possible to somehow force the browser to behave like the iframe is loaded from another domain?
I mean I don't want the javascript in the iframe to be able to access the main window via "window.parent" or anything like that, because the iframe contents is not trusted. But the problem is that it's stored on the same domain and I even want to use the same request to load both the main window and the iframe contents (with that "srcdoc" attribute).
So is it possible at all?
Thanks!

You could prepend the string:
"<script> parent = top = null; </script>"
To the srcdoc. That should prevent the rest of the code in the srcdoc form accessing the parent through window.parent and window.top.
I'm not sure if there are any other ways to access the parent of an iframe.

Related

load event inside iframe

I am trying to run some javascript inside an iframe after it loads and am having trouble. I'm not sure if it means my concept of what is happening is wrong or if my code is just wrong.
What I want to do is load a javascript file in the iframe environment and then call a function. (the iframe contents are static web pages captured with singlefile and served from my server. I want to be able to pop up menus for the images in the iframe page). Is this possible, or is it blocked for security considerations? I can get the contentDocument from the iframe and see what is in it but not make any changes to it. Adding a load event listener to the iframe runs in the top-level DOM, not the iframe.
An ugly workaround would be to add a line loading the script to each of my served html files, but I'm reluctant to do that since it seems kind of fragile. Is that my only option?
you can select the iframe element and access its internal window object.
to do this first assign an id to your iframe element
<iframe id="chosen-iframe" ...></iframe>
and to access the window use the following
const iframe = document.getElementById('chosen-iframe');
const iFrameWindowElement = iframe.contentWindow;
and with access to the window, you can create a script tag that contains the script you want to inject inside the iframe
var injectedScript = iFrameWindowElement.document.createElement("script");
injectedScript.append(...);
iFrameWindowElement.document.documentElement.appendChild(script);

How to Access window on Iframe that is inside another iframe

I have issue with accessing iframe that is inside another iframe.
I was trying something like this:
window.getElementById("parentIframe").contentWindow.document.getElementById("childIframe").contentWindow
But id did not worked (in my browser console i get something like "Inaccessible")
I want to know if there is a way to access nested iframe window object ?
To make things harder top parent window is on different port then iframe content. (So we have CORS to block any access from child iframe content)
Another issue is that i have no way to modify middle iframe content.
I can only embed another iframe inside of it.
My question is about accessing iframe that is inside another iframe NOT ABOUT CORS reletaed issues.

Change element style on a image inside a iframe

Is there a way to change the element-style of the img inside the iframe using jquery. The iframe epubjs-iframe change the id on every page load. What I want is to change the style = heigh="98%" to max-height:467 and width:auto on every page load.
Html-code
Yes, IF the src of your iframe is pointing to SAME domain.
Eg.
var iframe = $("#iframe"); // Selector to get the iframe
$("#elemInIframe", iframe.contents()).css("color", "blue"); //Or whatever method you want
And Of course, if the src of iframe is in different domain, due to security reasons, You will not be able to access the contents in javascript. Sorry about the same!!
Not know if it is the case here, but when working with iframes You may need to overcome Same Origin Policy: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
You can use PostMessage for cross-frame communication. To do so:
You need to be in control of the code both host page and embedded one
Or use the PostMessage API provided by page You want to embed
More about PostMessage: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

How do I check if a textfield in iframe is empty?

Pretty much the question sums it up. I'm trying to do something similar to Gmail, where if you've entered stuff in a text field then the website will prompt you to to confirm if you want to leave the page.
But what if the text field in question is in an iframe? Obviously I can assign the iframe an id, but is there any javascript command or something that can check if a field in an iframe is empty or not? Is this even possible?
Edit: The iframe source and page the iframe is embedded in are from the same domain.
var value = document.getElementById('iframeID').contentDocument
.getElementById('theTextBoxId').value;
And yes, it's possible, you just need to get access to the <iframe> document with contentDocument.
From the DOM iframe element, scripts can get access to the window object of the included HTML page via the contentWindow property. The contentDocument property refers to the document element inside the iframe (this is equivalent to contentWindow.document), but is not supported by Internet Explorer versions before IE8.
Scripts trying to access a frame's content are subject to the same-origin policy, and cannot access most of the properties in the other window object if it was loaded from a different domain.
MDN
Just set onbeforeunload as you would as if the iframe'd page were the top-level page. If you try to navigate away in the parent frame or the child frame, it will be interrupted by the confirmation.
Using JQuery you can access the iframe content:
$("#iFrame").contents().find("#text")

Access child iFrame DOM from parent page

Here is the deal:
domain.com/page -- Parent page (document.domain=domain.com) contains an iframe
sub.domain.com/page -- Child iframe (document.domain=not set) is on a subdomain
Is there any way to access the DOM of that iframe or am I out of luck?
Does same origin policy block me from forcing a document.domain on an iframe contained within a parent page? I suppose that would defeat the purpose of the same origin policy... If that is the case, is there any workaround to access the DOM of the iframe on the rendered parent page?
There is a way. When the page in the iframe loads, have it do the following
parent.childGetElementById = function (id) {return document.getElementById(id);}
parent.childLoaded();
This will make a function in the global scope of the parent page (that contains the iframe). Then in the parent, just have the following
function childLoaded() {var dom = childGetElementById('someid');}
This is along as you have control of the page your loading into the iframe... if you do not, you are out of luck.
This is a browser security measure, otherwise everybody would be wrapping your banking websites and skimming off your passwords when you logged in.
You can talk from the iframe to the parent, but not back into an iframe again.
You're out of luck, as far as I know. You can talk between them using the hash-bang in the URL though, see this for a decent discussion.

Categories