JavaScript security tricks for pages
Hey All,
Today I am going to share few JavaScript tricks that can really enhance your pages or applications productivity. Lets take few examples:
a.) You are building an online test site and you don't want your users to copy questions & search it on google for answers.
b.) You are building a quiz and you don't want your users to leave this current tab.
c.) User accidently closed the window and he was in middle of lets say answering questions.
There can be mutiple scenarios. To overcome these things, I have noted down few tricks mentioned below.
Tricks
-
Disable selection on your pages. There is a very small css property to disable it. Apply it to your body tag and it will do the work.
body{ -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Likely future */ } -
Disable context menu. Anyone can simply right click and inspect elements in console. Disable this feature so that user can't go to developer tools of browser directly.
<body oncontextmenu="return false"> -
Disable moving away of users. Disable users to moving away from your current window or page. In this, window will simply show an alert if users try to move away from current window by opening a new tab or window, any browser or any application. This is quite handy as it is very useful to track how much time user left the current window.
window.onblur = function () { alert('You are trying to move away'); //logic to perform any action or save state of user }; window.onFocus = function(){ console.log('back in current window'); //logic to perform any action or save state of user //calculate time left by user } -
Confirm window close. This is much needed as user might accidently click on close window button. It is best practice to show a confirmation dialog asking confirmation to close the window. This enhances user's experience.
window.onbeforeunload = function(){ return 'You clicked on close button.'; } -
Isolate the tab. Isolate tab means that you don't want user to do anything else except your page. This scenario is generally for online tests websites. Tab can be isolated by forcing current tab/window into full screen mode. I don't have any hand-ons experience with it but reasearch can be started with following basic links:
If anyone has any doubt, let me know :)