6

In my application, To Hide some information in URL i am using below code.

history.replaceState ({}, "", "bar.html");

It is working in all the browsers except firefox latest version (v56+)

In Firefox, if i press F5 then it is going back to previous URL which i have already replaced with above code.

Any help will be highly appreciated.

Jayesh Dhandha
  • 1,465
  • 18
  • 37
  • did you find out anything on that issue? i've been struggling with a bug that has similar symptoms – Eliran Malka Apr 24 '19 at 13:03
  • In the latest Firefox version, this bug seems fixed. Have a try! – Jayesh Dhandha Apr 24 '19 at 13:40
  • oh shoot, i was hoping for a reproduction on the latest version (i'm seeing this on firefox quantum, i.e. 66.0.3 64-bit). what version exactly do you now have as *latest*, by the way? – Eliran Malka Apr 24 '19 at 15:32
  • 1
    Well, I understand your problem and it's hard to answer :( What i observed related to this issue is that it's coming in certain versions after 56.* But i am not sure from which version it's get fixed. I am also using version 66 right now. – Jayesh Dhandha Apr 25 '19 at 06:06

1 Answers1

5

There is an open issue on Bugzilla.

Video Example 1 and Video Example 2 explain how to reproduce the bug.

Conditions:

  1. Mozilla Firefox version only 56+
  2. Single Page Application
  3. For routing uses history.replaceState, all parameters not null

Steps:

  1. Login & redirect to main page base URL
  2. Navigate on any application tab & replace URL parameters
  3. Press F5, cmd + r or click Refresh button
  4. Ups!.. Again open main page with base URL (but in other browsers we see the selected tab and the correct URL)

The same behaviour is experienced when removing query strings from the url.

It could be caused from the following behaviour (I quote Vadim Goncharov)

The main problem is that after using history.replaceState and then clicking cmd+r/f5 we will see that browser sends replaced (correct) url to server, but shows incorrect url both in location.search and browser url bar. And this behaviour continues (if click to "cmd+r/f5") until we click "enter" on browser url bar.

First Workaround posted from Felix Lee

Before calling history.replaceState, do location.hash = location.hash;

Setting hash to itself has no effect, but makes the bug go away.

This workaround is not ideal and mtomalley adds a second Workaround

The browser is requesting a different URL than what is shown in the location bar....

Additionally, the workaround isn't ideal because if the URL doesn't already have a hash, location.hash = location.hash adds one, calls popstate, and adds a history entry.

An alternate workaround that is much less simple:

  1. Use whatever means available to your backend technology to expose the request URI on the client
  2. On page load (before any client routing code), check the URI against window.location
  3. If they're different, use replaceState to fix it.

The location will briefly show the incorrect URL on any reload, but at least it'll be fixed and routing can work as expected...

Third Workaround proposed from Mathis Wiehl

window.addEventListener('unload', function(event) { location.replace(location) });

This way the state of the js location is flushed to FFs location in cases of refreshes and tab closes (which by the way have the same issue when reopened with e.g. ⌘+⇧+t).

The above workaround from Mathis has the following issue (I quote jimmyhmiller)

Next.js tried using the workaround that Mathis mentioned above and it caused some bad issues for them. Details here: https://github.com/zeit/next.js/pull/6896

A new bug was experienced with the above workaround, explained in the issue #6882

when landing on a page that contains query parameters, the browser becomes "locked" to that page and programmatically or manually navigating to a different same-domain page insta-redirects back to the original. note that this does not start happening until a query parameter is involved in the url, totally bizarre

I also include a list of other mozilla related issues with history.replaceState.

I keep myself available for further analysis, research, improvements to this posts and I am happy to receive your feedback.

Fabrizio Bertoglio
  • 5,555
  • 3
  • 13
  • 47