Introduction
In this post, I will show you how to detect if a client has JavaScript enabled or disabled at your backend webserver (on any platform), so you can work with it in your backend code, and use it as a boolean.
Unfortunately, there is no out-of-the-box way to detect it. Browsers do not send http headers/metadata to the webserver that indicates if the browser has JavaScript turned on or off.
So to detect it, we need to do a little manual work.
How To Do It
Backend Code
The trick to detect it, is to set a flag (a cookie) in the client browser that indicates if the browser has JavaScript enabled/disabled.
Then the server can look at that cookie and check if JavaScript the client is indicating its JavaScript is enabled/disabled.
In this example, let's call that cookie
hasjs=false.
So, if the client has the cookie named
hasjs
and has the value
false
, then it means the client is indicating that JavaScript is
off
, otherwise JavaScript is
on
.
So, for every
webrequest
, make a boolean variable in your backend server, and call it
IsJavascriptOn,
and set it to
false
if client has the cookie
hasjs=false
otherwise, set it to
true
.
I will be using ASP.NET MVC as the code examples, but the concept is the same for all platforms.
Below is the example of a function that returns
false
if the client has the cookie
hasjs=false
, otherwise it returns
true
.
bool GetIsJavascriptOn()
if (Request.Cookies.ContainsKey("hasjs") &&
Request.Cookies["hasjs"] == "false")
return false;
else
return true;
And then somewhere in our code, we can set our IsJavascriptOn variable like below:
this.IsJavascriptOn = GetIsJavascriptOn();
And now, we have our boolean that determines if the client has JavaScript enabled/disabled, so now we can use this variable everywhere in our backendcode.
Rendering HTML
So now, we have need to set the hasjs=false cookie if JavaScript is disabled, and delete the hasjs=false cookie if JavaScript is enabled. And that's done when we render the HTML.
We have to render some HTML depending on whether the client is indicating that JavaScript is enabled/disabled. And that's shown below.
We will put this code inside the <head>:
@if (Model.IsJavascriptOn == true)
<noscript>
<meta http-equiv="Set-Cookie" content="hasjs=false; path=/">
<meta http-equiv="Refresh" content="0">
</noscript>
else //Client indicates javascript is disabled (cookie "hasjs=false" exists)
<script>
document.cookie = "hasjs=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
location.reload(true);
</script>
Now we are actually done. If you just want to test it and don't want any explanation, you can skip the rest.
Here, we draw the <noscript> block if our variable IsJavascriptOn equals true, otherwise we draw the <script> block.
The <noscript> block will set the cookie hasjs=false and then refresh the page (yes, you can set a cookie and refresh the page without JavaScript).
The <script> block will delete the cookie hasjs=false and then refresh the page.
So what happens here, is if the client is indicating that JavaScript is on, then we draw the <noscript> block. But the client will not run the <noscript> block, unless it actually was disabled.
So if it runs the <noscript> block, then it means the client told the server that it had JavaScript enabled, but was wrong, and needs to update/set the hasjs to false and then refresh the page.
Then after it has done that, the server will render the <script> block instead, and then the client will never run the <script> block until it enables it again.
So when the client enables JavaScript again, then the client will run the <script> block, delete the cookie hasjs and refresh the page.
And then, the server will draw the <noscript> block and then the client will never run that block until the client disables JavaScript again.
And that's how the cycle goes.
Full Example with ASP.NET MVC
Here is a full example in ASP.NET Core MVC (.NET Framework). It's pretty straight-forward, so hopefully, non-ASP.NET programmers would understand it, since it's almost like pseudocode.
In this example, I will show a minimal website with 3 pages index (homepage), contact and about with no CSS.
HomeController.cs
This file is the starting point of where the code begins when clients request a page on a specific path. It will check if the client has the hasjs=false cookie and set our IsJavascriptOn variable to false if it exists, otherwise set it to true.
using Microsoft.AspNetCore.Mvc;
namespace WebApplication1
public class ViewDataModel
public bool IsJavascriptOn;
namespace WebApplication1.Controllers
public class HomeController : Controller
public ViewDataModel ViewDataModel;
bool GetIsJavascriptOn()
if (Request.Cookies.ContainsKey("hasjs") &&
Request.Cookies["hasjs"] == "false")
return false;
else
return true;
public IActionResult Index()
this.ViewDataModel = new ViewDataModel();
this.ViewDataModel.IsJavascriptOn = this.GetIsJavascriptOn();
return View(this.ViewDataModel);
public IActionResult About()
this.ViewDataModel = new ViewDataModel();
this.ViewDataModel.IsJavascriptOn = this.GetIsJavascriptOn();
return View(this.ViewDataModel);
public IActionResult Contact()
this.ViewDataModel = new ViewDataModel();
this.ViewDataModel.IsJavascriptOn = this.GetIsJavascriptOn();
return View(this.ViewDataModel);
_Layout.cshtml
This is the starting point when we render our HTML. The _Layout is what gets rendered no matter what page we are on, and then it fires the @RenderBody() which is an ASP.NET MVC function that will render the page we are on. And that's going to render in our case either the index.cshtml, contact.cshtml or about.cshtml.
@model ViewDataModel
<!DOCTYPE html>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Detect_Javascript</title>
@if (Model.IsJavascriptOn == true)
<noscript>
<meta http-equiv="Set-Cookie" content="hasjs=false; path=/">
<meta http-equiv="Refresh" content="0">
</noscript>
else //Client indicates javascript is disabled (cookie "hasjs=false" exists)
<script>
document.cookie = "hasjs=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
location.reload(true);
</script>
</head>
<li><a href="/home">Home</a></li>
<li><a href="/home/about">About</a></li>
<li><a href="/home/contact">Contact</a></li>
@RenderBody()
</body>
</html>
Index.cshtml
@model ViewDataModel
<h1>Home page</h1>
<p>This is the home page</p>
@if (Model.IsJavascriptOn == true)
<p>Javascript is enabled</p>
<p>Javascript is disabled</p>
Contact.cshtml
@model ViewDataModel
<h1>Contact page</h1>
<p>This is the contact page</p>
@if (Model.IsJavascriptOn == true)
<p>Javascript is enabled</p>
<p>Javascript is disabled</p>
About.cshtml
@model ViewDataModel
<h1>About page</h1>
<p>This is the about page</p>
@if (Model.IsJavascriptOn == true)
<p>Javascript is enabled</p>
<p>Javascript is disabled</p>
So, here, if you do have JavaScript on, then it will draw Yes, javascript is enabled otherwise, No, javascript is disabled.
Below are two examples on how it should look:
Last Note
Inside the <noscript>, the tag <meta http-equiv="Set-Cookie" content="hasjs=false; path=/">, it's very important to set the path to "/", because cookies can have paths, so if you navigate to different paths/sites in the website, then the client might create many different hasjs=false cookies depending on which path the client is on.
Thanks for reading, I hope this will be helpful to a lot of you. :-)
sorry i do not understand what technique you use to know js is enable at server side. can you please elaborate with sample code.
suppose first time i open your page then i will not get cookie from client side to server side....then your program will think js is disabled at client side....am i right.
not good way i guess.
Sign In·View Thread
Hi Mou_kol. I have given all the code samples you need in the article. If you try to read it more carefully, then it should all work 
When a client has turned javascript off, and enters your site for the first time, then you are right about that it wont give any cookie (hasjs=false) to tell the server that it is turned off.
Then the server will draw the noscript block, and then the client will run that block, and that block will create the hasjs=false cookie, and then refresh the page.
So that means the client will enter your site twice. But its only one time.
Sign In·View Thread
