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

Question

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.

Swig

Please provide a Stackblitz or any other minimal-reproducible-example to reproduce your error. – Henghold

@Henghold it's kinda complicated do this because I would need a Grafana instance serving the iframe content all the time. Grafana is a graphs application that can plot data from several dbs. – Swig

If the url doesn't change, it's pretty likely they are using pushState. So, maybe it's a simple as running history.pushState = history.replaceState; in the iframe to change the call your lib is using into one that doesn't create new history entries. If that doesn't work, you can still likely monitor the navigation events and try to back() them out. Of course if you want to keep the way the back button works, it will be more complex to manage all the permutations, but it sounds like the iframe should really be display-only anyway. – Tierratiersten

@Tierratiersten I think that it should display-only too. I already opened an issue on Grafana's Github but they didn't pay great attention for this. github.com/grafana/grafana/issues/17614 – Swig

Answer 1

Hoping to help out, some things that I might try in your scenario:

1. 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.

2. 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

3. 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.

Turbulence

It all makes sense. I will try these suggestion and later on I come with results. Thanks a lot – Swig

1. The problem persists. 2- The Grafana Iframe stops working when there's another iframe outside. 3 - Tried sandbox="allow-same-origin allow-scripts" in order to work but the problem still persists. – Swig

Answer 2

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: () => {},
});

Gheber

Note that this will not work in cross-origin iframe though – Inharmonious

Answer 3

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

Ooze

it's kinda complicated to illustrate better the scenario because I would need a Grafana instance serving the iframe content all the time. Grafana is a graphs application that can plot data from several dbs. – Swig

Besides that, I already tried using sandbox iframe's attribute but for some reason Grafana can't even load. It just stays on a loading state forever. – Swig

I already opened an issue on Grafana's Github but they didn't pay great attention for this. github.com/grafana/grafana/issues/17614 – Swig