thisago's blog

Correctly using <noscript> tag

Table of Contents

Do not be confused with the nice NoScript browser extension!

The noscript tag is a native content filtering in HTML, it renders when JavaScript is disabled.

It is extremely simple, the MDN doc is very small, but most of websites uses this, a feature meant to improve user accessibility, to reduce it.

Here I'll list some good and bad uses of the noscript tag, but here's a spoiler: Most annoying use of this tag is to request JavaScript! If it's unsupported or disabled, user may has reasons for that!

Examples that suck

Here is how you threaten and irritate your users.

The Classic One

The most annoying surprise while browsing the internet: Check if disabled to enforce enablement. 

<noscript>
  <p class="critical-like-error-to-creep-user">This website requires JavaScript to function. <i>(and track you)</i></p>
  <p>See <a href="https://www.enable-javascript.com" class="any-biased-how-to-enable-js-site">how to enable it in your browser</a>.</p>
<noscript>

Websites which are rendered completely by JS gives no alternative but keep in mind: This is a bad acessibility!

Worse is when the server-rendered website have intentional soft-locks (scrolling blocking, covering elements, etc) that gets removed by the JavaScript.

The Evil One

Not common as above, but… No words… 

<noscript>
  <!-- Some politeness -->
  <img src="/trackingPixel.gif" />
<noscript>

This loads a image when JavaScript is not available, tracking these users as well!

Some even add a timestamp to it, so their track your time to load the image since you loaded the page.

Examples for better user accessibility

Suggest alternative for feature requiring JS

<!-- Asciinema player initialization -->

<noscript>
  <p>Asciinema player requires JavaScript to play this asciicast (v3). Feel free to watch in your terminal:</p>
  <p><code>asciinema play https://blog.thisago.com/static/asciicasts/20260104/phoneSetup-0.1.0.cast</code></p>
</noscript>

This is a example used in my post about settuping a airgapped phone.

Explain if no workaround is possible

<noscript>
  <p>This interactive feature requires JavaScript to run.</p>
  <p>But you can ...</p>
</noscript>

Example in this blog, about a Nim lib.

Why care?

This is one of the many forms to track users in the modern web. It is only the start. There's a way more techniques to track user without JS enabled (form honeypots, CSS, log analysis, …), and I'm not even talking about the tons of methods by using JavaScript and misusing web APIs.

Obsession on tracking the users is a shame, the erosion in user trust should not be a option. Analytics should be transparent and consent-based. User should know what his computer is running.

And if you don't understand the threat, keep in mind the issue is when no one fights against, and the tracking escalates. We're getting complacent while big technology corporations are expanding their control over user. Once you have a system that understand the intrinsic instinctive behaviors of user, it can manipulate them. Ads and social media recommendations are highly advanced suggestion-based manipulation system. From inducing unwanted decisions to creating bubbles of biases, isolating and fragmenting people.

Final Words

Let's expose this reality to non-technical ones as well and incentive quitting services that considers their users as owned data.

And in the end, I'd suggest server-side rendering for web applications as much as possible. This improves the isolation of business logic and user experience:

  • Lighter navigation
  • Offline-ready with simple browser caching
  • Safer browsing
  • Happier terminal users
  • Reduced bandwidth