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.

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.

• javascript
• html
• angular
• grafana

• 1 Please provide a Stackblitz or any other minimal-reproducible-example to reproduce your error. – zerocewl Commented Oct 8, 2019 at 8:18
• @zerocewl it's kinda plicated 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. – denisb411 Commented Oct 10, 2019 at 12:48
• 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 plex to manage all the permutations, but it sounds like the iframe should really be display-only anyway. – dandavis Commented Oct 10, 2019 at 17:27
• @dandavis 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./grafana/grafana/issues/17614 – denisb411 Commented Oct 15, 2019 at 20:16

3 Answers 3

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

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

Without the effective implementation of the iframe is difficult to suggest the best way to act.

The simplest solution that es 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./tags/att_iframe_sandbox.asp