Let’s Start with What is it?
– It’s Javascript “windows History” Hack.
window.history.pushState()
Let’s take this with an example:
Example 1:
Actual Login URL: “http://example.com/login” or “http://example.com/login.php” or “http://example.com/login.jsp” or “http://example.com/login.py” or “http://example.com/login.html”
Add below javascript code at the footer of your page:
<script type="text/javascript">
window.history.pushState(null, null, "/user-login")
</script>
Now, whenever user will open “http://example.com/login“, User will see the login page, but your URL will dynamically get changed to: ‘http://example.com/user-login‘
Anyone doing, “Ctrl+U” or “View-Source”, will immediately see either “non-existent page” or if you have set the “/user-login” page with your cool weird text, it will render that.
Try the above code in “Console” right away for this page and then do View-Source, You will see page content other (probably 404 error content) then this page .
Example 2:
Get the Current Path And Append to History State with extra text.
Actual URL: “http://example.com/blog/1/anything-here” or “http://example.com/category/hello-world” or “http://example.com/tag/hello” or “http://example.com/question/1000/what-if-it-rains-today”
<script type="text/javascript">
// Get the current path.
path = location.pathname; // window.location.pathname;
// append with our juice
window.history.pushState(null, null, path+"/fool")
// or, as below
window.history.pushState(null, null, path+"-fool")
</script>
It will automatically change the current URL with above push state URL and When a user tries to view-source, it will give them “404 error” page message or “the message” you have rendered for non-existent pages or above fake pages.
Problem? Yes!
– If the user by mistake refreshes the page, they will see “error page” now and not the actual page. So, What can be done for that? Well, there is a hack for that too:
Override “f5” or “refresh event”
function disableF5(e) {
if ((e.which || e.keyCode) == 116 || ((e.ctrlKey || e.metaKey) && (e.which || e.keyCode) == 82) || (window.event.ctrlKey && e.keyCode == 82)) {
fetchPage(originalURL);
e.preventDefault();
}
}
function fetchPage(originalURL) {
jQuery.get( originalURL, function( data ) {
jQuery( "body" ).html( data );
});
}
Now, When a user tries to refresh the page, they will still see the original page content.
You can find more about “window.history.pushState” code at – https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries
This trick is stupid as the texts are still visible in “Inspect element” or if the user finds your above code and fix it.
Feel free to share your Opinion in below comment and DON’T FORGET to SHARE it with others!