Skip to content

Instantly share code, notes, and snippets.

@tsmd

tsmd/prevent-history-back-dialog.html

Last active January 11, 2024 11:48
Show Gist options
  • Save tsmd/8b702338aea0785668afc8729a8f4397 to your computer and use it in GitHub Desktop.
Save tsmd/8b702338aea0785668afc8729a8f4397 to your computer and use it in GitHub Desktop.
Download ZIP
Prevent history back PoC
Raw
prevent-history-back-dialog.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form</title>
</head>
<body>
<p>
URL: <input id="url" type="text" readonly style="width:60em">
</p>
<p>
<button type="button" onclick="history.back()">Back</button>
<button type="button" onclick="history.forward()">Forward</button>
</p>
<hr>
<p>
<label>
Name
<input type="text" name="name">
</label>
</p>
<p>
<button type="submit" disabled>Submit</button>
</p>
<p>
<a href="#a">#a</a>
<a href="#b">#b</a>
<a href="#c">#c</a>
</p>
<dialog id="confirm">
Are you sure?
<form id="confirm-form" method="dialog">
<button autofocus>No</button>
<button>Yes</button>
</form>
</dialog>
<script>
function updateUrl() {
document.getElementById("url").value = location.href;
}
updateUrl();
window.addEventListener("hashchange", () => {
updateUrl();
});
// Pushing dummy history
if (!history.state?.pushed) {
const currentState = { ...(history.state || {}) };
history.replaceState({ ...currentState, fake: true }, "", location.href);
history.pushState({ ...currentState, pushed: true }, "", location.href);
}
const confirm = document.getElementById("confirm");
const confirmForm = document.getElementById("confirm-form");
window.addEventListener("popstate", () => {
if (!history.state?.fake) {
return;
}
confirm.showModal();
});
confirmForm.addEventListener("submit", (e) => {
switch (e.submitter.textContent) {
case "Yes":
window.removeEventListener("beforeunload", onBeforeUnload);
history.back();
break;
case "No":
history.forward();
break;
}
});
// Preventing closing tab or reload (no effect with iOS Safari)
function onBeforeUnload(evt) {
evt.preventDefault();
evt.returnValue = true;
}
window.addEventListener("beforeunload", onBeforeUnload);
</script>
</body>
</html>
Raw
prevent-history-back.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form</title>
</head>
<body>
<p>
URL: <input id="url" type="text" readonly style="width:60em">
</p>
<p>
<button type="button" onclick="history.back()">Back</button>
<button type="button" onclick="history.forward()">Forward</button>
</p>
<hr>
<p>
<label>
Name
<input type="text" name="name">
</label>
</p>
<p>
<button type="submit" disabled>Submit</button>
</p>
<p>
<a href="#a">#a</a>
<a href="#b">#b</a>
<a href="#c">#c</a>
</p>
<script>
function updateUrl() {
document.getElementById("url").value = location.href;
}
updateUrl();
window.addEventListener("hashchange", () => {
updateUrl();
});
// Pushing dummy history
if (!history.state?.pushed) {
const currentState = { ...(history.state || {}) };
history.replaceState({ ...currentState, fake: true }, "", location.href);
history.pushState({ ...currentState, pushed: true }, "", location.href);
}
window.addEventListener("popstate", () => {
if (!history.state?.fake) {
return;
}
const goAway = confirm("Are you sure?");
if (goAway) {
window.removeEventListener("beforeunload", onBeforeUnload);
history.back();
} else {
history.forward();
}
});
// Preventing closing tab or reload (no effect with iOS Safari)
function onBeforeUnload(evt) {
evt.preventDefault();
evt.returnValue = true;
}
window.addEventListener("beforeunload", onBeforeUnload);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment