Develop Reference

Iframe src pointing to wrong URL

My document gives the user a choice of what program (effectively URL) to load in an iframe.
The user may select another program later and the browser puts the prior choice in history.
This allows the user to go back to a prior program that was loaded.
No problem and the onload JAVASCRIPT lets the program know when this happens.
Problem is the onload functions looks up the src attribute of the iframe, but instead of getting the URL of what is now (re)loaded in the iframe it lists what was the last change in the src.
I tried accessing the href of the iframe, but that is protected since it is from another site.
Is there a way to retrieve this. I suspect that using replacestate and popstate might be able do the trick. Any ideas?

How can I prevent Iframe messing browser's history after interactions with it?

So in my case I use Iframes to attach Grafana to my page (which provides me beautiful and easy to use graphs).
It's possible to notice that Grafana's Iframes triggers a kind of refresh on my Angular page after each interaction of zoom in or zoom out (using mouse clicks) on the graph thus messing broswer's history. I don't see any changes on Iframe's src to justify this page refresh and it doesn't trigger anything apparently (doesn't trigger any onload, for example).
Is this a normal behavior? How can I prevent this?
I am using a scripted dashboard of Grafana version 6.2.2 along with Angular 6.1.

Hoping to help out, some things that I might try in your scenario:
A blank html page with only a grafana Iframe in it. See if it still refreshes the parent page. If not, then maybe the problem is with angular.
You said sandbox breaks the iframe? Maybe play around with different sandbox values. Like allow-scripts and see if it needs one of those values to work
https://www.w3schools.com/tags/att_iframe_sandbox.asp
Maybe try putting the grafana iframe in another iframe. I've never done this before, but maybe it will try to refresh the parent iframe instead of the parent page.
It could be helpful to post your angular html code to the question too. Might be some hints in there.

Without the effective implementation of the iframe is difficult to suggest the best way to act.
The simplest solution that comes in mind is iframe's sandbox attribute:
<iframe src="my_iframe.html" sandbox></iframe>
What's an iframe sandbox ?
The sandbox attribute enables an extra set of restrictions for the content in the iframe.
When the sandbox attribute is present, and it will:
treat the content as being from a unique origin
block form submission
block script execution
disable APIs
prevent links from targeting other browsing contexts
prevent content from using plugins (through , , , or other)
prevent the content to navigate its top-level browsing context
block automatically triggered features
The value of the sandbox attribute can either be just sandbox (then
all restrictions are applied), or a space-separated list of
pre-defined values that will REMOVE the particular restrictions.
Ref: https://www.w3schools.com/tags/att_iframe_sandbox.asp

You can overwrite the <iframe>'s pushState and replaceState functions:
iframe.contentWindow.history.pushState = new Proxy(iframe.contentWindow.history.pushState, {
apply: () => {},
});
iframe.contentWindow.history.replaceState = new Proxy(iframe.contentWindow.history.replaceState, {
apply: () => {},
});

Remove history from External iFrame redirects and links

I have an iframe pointing to an external link that does some redirections as soon as the iFrame loads. This causes added history into the browser and also when users click on links inside the iframe.
This causes a weird user experience because you have extra back history states pointing to the same parent page.
I was wondering if there was a way to prevent the iframe from ever adding history to the browser?

Since the link is external, the short answer is no. If you are in control of the content of the iframe there are a few things you can do. History will be updated any time the src attribute of an iframe is changed after it has been added to the DOM or if the user follows a link in the iframe. With control of the iframe content, when a user clicked a link, you could use postMessage and have the parent window replace the iframe element with a new one. In the same domain, you could just use window.parent.

You can try to use sandbox="" attribute to prevent the iframe from redirecting.
<iframe src="http://example.com/" sandbox=""></iframe>

There is no way to clear the session history or to disable the back/forward navigation from unprivileged code. The closest available solution is the location.replace() method, which replaces the current item of the session history with the provided URL.
Source (MDN)
location.replace() | MDN

http://jsbin.com/coregedoze/2
Here is a link of my code with an iframe, this has no sandbox attribute- as this attribute only works with HTML5 and limited browser version. I rechecked this code and it wont save any history. Only case is if you change your source of the iframe the whole page reloads and makes another entry into history, which can be avoided using sandbox="value" as mentioned in above answer by JAYDEN LAWSON. Another way around is declare your links in your page out of iframe and call them in iframe like traget="iframe_a" , where iframe_a is your iframe name. hope this helps :-)

No, You can do almost nothing with an iframe which has src set to another domain because of XXS

Force element to be the topmost element on a page

I have a Chrome extension that injects an iframe to a web page.
The iframe element has a z-index = 2147483647.
There's another extension installed on my Chrome that does something similar (i.e. injects an iframe with z-index=2147483647).
The other extension's iframe shows ON TOP of my extension's iframe.
On Chrome (and I guess on other browsers), the last element on the page will show top-most. (again - assuming z-index is at the highest value).
I tried changing my extension name so it will invoke last (after the other extension is loaded) and therefore having my iframe injected at the end. It did not work, it seems that the other extension also wants to be the top-most.
Is there anyway to make sure my iframe will be injected right before the </body> tag? after any other element has been injected/loaded?
I've seen this answer as well as this one, which did not help.
I thought about setting a timer and then after all elements were loaded adding my iframe, but it seems kinda hacky, and if there's another extension that does the same, we will end up with a timers-fight :).

How to detect when iframe scripts are executed?

For example:
I have a main page with an iframe in it and my iframe contains a button. When I press the button inside the iframe some scripts are executed, and the design of iframe is changed. Texts appears and other stuff.
How do I detect when iframe scripts are run? (Or the button was pressed?)
The iframe is from a different domain.

If the contents of the iframe come from a different domain than the outside page, then you can't - the browser deliberately stops you from being able to tell much about what is going on inside the iframe. What you can do though is grab the URL the frame is pointing to if it changes.
If it's running in the same domain, you can just access the elements inside the iframe pretty much the same way as you would normally via the document property of the iframe

If the main page and the iframe are on the same domain, you can make the javascript in the iframe call a function or access the elements of the parent frame.
So at the end of the script in the iframe you can do
parent.script_is_finished();

If you have control over the script in the iframe, you could use window.postMessage to communicate with your main page, even if they are in different domains.
Support for this is limited to FF3+, IE8+, Chrome, Safari(5?), Opera10+
Here's a demo on html5demos.

As an update to the fact that the iframe is from a different domain:
Short answer: No. You can't detect clicks within an iframe from another domain.
Longer but still short answer: The reason you can't is the same reason you can change the contents of the iframe -- it'd be a security risk unless the iframe is on the same domain. You simply can't track user activity within an iframe sourced from a different domain.
Sorry, but I hope that helped!