How I handle disabled JavaScript

This time I would like to share something technical. As this is a very easy trick for hackers to break the website security or find out website vulnerability.

e.g. You have to build a membership registration form for a website. You have put some form validation using javascript or any jquery plugin. That will definitely help us get authentic & validate data from that form. But what if you disable javascript in browser settings? As that option is given in most of the browsers. Then people will be able to easily bypass the form validations and will submit the trash data.

To overcome such issues, there are several solutions. Specifically, in the example I gave, you can make it more secure by adding validations using server-side scripting.

Another simple solution is to find out if javascript is disabled and then show some different output on the browser. I use this solution most of the time. For this, we have to use NoScript tag.

Here is how W3Schools explains “NoScript” tag :

The <noscript> tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn’t support client-side scripting.

The NoScript element can contain all the elements that you can find inside the body element of a normal HTML page. The content inside the NoScript element will only be displayed if scripts are not supported, or are disabled in the user’s browser.

Here is how I use NoScript tag on all my sites. Take a look at the following code.

Add this to Head tag :

<style type="text/css"> 
#javascript_error{ 
	display:none; 
} 
</style> 

<noscript> 
	<style type="text/css"> 
		#page{ display:none; } 
		#javascript_error{ display:block; font-size:20px; color:red; } 
	</style> 
</noscript>

Add this into the Body tag where you want to display your error :

<div id="javascript_error">Please enable javascript into your browser.</div>

Here what I have done is, I have added one div block into my body javascript_error which will show a message only when the JavaScript is disabled. So default it is kept hidden and in NoScript tag, I have added another style to make this block visible. And to Hide the full page container which is identified as page (in your sites, it depends on what id you choose for div block to wrap whole body code)

And that’s it. Hope this simplifies your security process for browsers with disabled javascript.

If you like it, Sharing is Caring!