I’m not sure if I should post in bugzilla or here… Anyway…
I understand the need to protect against malicious sites, but this “back button intervention” seems to make history.replaceState() and history.pushState() useless functions. I have a single-page app that will inject a hash on “navigation (hashchange)”. The reason is to allow the user to press the back button to return to the previous page and state (scroll, zoom, etc) while also having that state saved in browser history so that the user can copy/paste the link and get to the same view or return when a session is restored.
When I enable the pref “browser.navigation.requireUserInteraction” the expectation is broken. The history entry is skipped when the back button is pressed. The history.back() function works, so I could implement my own “back button”, but that seems silly.
Is there a way to “properly” use history.replaceState() and history.pushState() such that the browser respects them? How can I be a good citizen in the eyes of the browser and keep some basic functionality?
The below is a minimal example. Serve the webpage with something like python -m http.server. If you click “goto1” and then press the back button you never reach the “#inject” anchor. If you click “goto1” and then press the button for history.back() then you reach the “#inject” anchor. Ideally the back button would reach the anchor as well.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
function hashTest(event) {
let newHash = event.newURL.split('#')[1];
if (newHash == 'goto1') {
window.history.replaceState({'url': '#inject'}, '', '#inject');
window.history.pushState({'url': '#' + newHash}, '', '#' + newHash);
}
}
window.addEventListener('hashchange', hashTest);
</script>
</head>
<body>
<a href="#goto1">Goto1</a>
<button onclick="history.back()">history.back() works correctly</button>
</body>
</html>