CODEWITHSUNDEEP
javascripthtmlangulargrafana
denisb411
denisb411

Reputation: 611

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.

Upvotes: 7

Views: 4567

Answers (3)

silverwind
silverwind

Reputation: 3926

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

Upvotes: 1

Lucas Crandle
Lucas Crandle

Reputation: 182

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.

Upvotes: 2

Mos&#232; Raguzzini
Mos&#232; Raguzzini

Reputation: 15821

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

Upvotes: 0

Related Questions