Protect your privacy by displaying Maths without Javascript

Spoiler: Because some visitors can legitimately disable javascript to protect their privacy, the arsouyes site challenged the impossible to provide its content with an ever more pleasant browsing experience.

As you probably know, respect for privacy is part of our values. And to respect your data, we do not collect any. It’s simple, practical and for a bit, it even saves a few baby seals.

It’s fine to say it, write it and do it, but you still have to be able to trust us. When we watched the documentary series Dopamine (we recommend it), we noticed that this confidence could be ruined by a simple Facebook button:

Sur la plupart des sites web que tu visites, se trouve un petit bouton Facebook qui est conçu pour collecter tes données à ton insu. Tu crois que ce bouton est juste une bête icone et que si tu ne clique pas dessus, tu es tranquille. Mais tu as tout faux : le bouton Facebook est en fait un mouchard. Il aspire tes données de navigation lorsque ta page se charge et les envoie à Facebook.

dopamine’s Facebook episode

Dopamine, the facebook button is a tracker

Hence the question: can we trust a website not to track us?

We checked the dopamine sample site. The button in the example is just an icon that launches the code if you click on it. But since I can’t double-check every day, I can’t guarantee that this is still the case today either. I also cannot guarantee that another part of this site is not full of trackers because I have not read all of their source code.

So unless you read (and understand) all the code your browsers download before executing it, you can never be sure that there isn’t JS snooping on you… Then you are left with three options:

  1. Grieve your private life and accept that, in cyberspace, you are spied on as in any self-respecting dystopia,
  2. Leave the web completely and take refuge in more obscure respectfull protocols (e.g. gemini even if it does not prevent everything),
  3. Blocking javascript (e.g. with extensions like NoScript), it doesn’t prevent everything either.

Because we don’t want you to mourn your privacy by coming here, and because we find that gemini is too extreme in its approach, we have chosen the third option: restrict our use of JS as much as possible so you can come here without needing to activate it.

ErikaWittlieb @ pixabay

Math without JavaScript

Beyond respect for privacy, it is in fact a question of respect for our visitors. For us, Javascript should be considered like cookies; used if strictly necessary for the delivery of a service, i.e. very rarely.

In our opinion, we should be able to access any content without the need for javascript. Doing calculations on the client’s workstation, without asking their permission, or even notifying them, is not very polite.

It’s nice to dream… when a pop-up warning: “In order to save electricity on our servers, we have chosen to run our programs on your hardware, thank you for your participation.”

On the other hand, javascript can bring real functionality to a website. It is then sometimes necessary, and other times, alternatives are possible. We have therefore inventoried our rare use cases and evaluated these alternatives.

  1. The specific calculation forms (i.e. Caesar’s number), which are optional because you can very well appreciate the articles without these little extras,
  2. The display of mathematical equations, more problematic because reading basic math is not always easy, but if this math is coded (in Tex to be precise) we will lose all our visitors.

Fortunately, there are alternatives for displaying math, including MathML, a web standard designed since 1998 to describe, and therefore display, mathematical equations. Version 3 having been standardized in 2016 in the standard ISO/IEC 40314:2016. That’s good, our tool that produces our web pages (pandoc) knows how to use this format, just give it the option --mathml when compiling as follows:

pandoc --mathml readme.md -o readme.html

But it would have been too good if all browsers supported the standards… As always when we talk about web applications, we realize that the ultimate super feature is not compatible with 25% of visitors.

Chrome had decided, in 2013, to no longer support mathml (advising to use javascript libraries like Mathjax), they rolled back and support it again since version 109…

In 2023, 75% of users can read MathML

The only other alternative being to use images (but pay for your accessibility), we chose to use MathJax on browsers that do not support MathML.

The Mozilla Documentation provides the basic principles as well as an example code which we have therefore taken over and adapted at the top of all our pages (code extract as of January 27, 2023):

(function () {
    // Execute the whole stuff once the page is loaded
    window.addEventListener("load", function () {
        var box, div, script, namespaceURI;
        // Check that the page contains mathml
        namespaceURI = "http://www.w3.org/1998/Math/MathML";
        if (document.body.getElementsByTagNameNS(namespaceURI, "math")[0]) {
            // Create and add a test element
            document.body.insertAdjacentHTML("afterbegin", "<div style='border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;'><math xmlns='" + namespaceURI + "'><mpadded height='23px' width='77px'></mpadded></math></div>");
            div = document.body.firstChild;
            // Check size of test element
            box = div.firstChild.firstChild.getBoundingClientRect();
            // delete the test node (no longer usefull)
            document.body.removeChild(div);
            // If mathml is not handled, add mathjax
            if (Math.abs(box.height - 23) > 1  || Math.abs(box.width - 77) > 1) {
                script = document.createElement("script");
                script.src = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";
                document.head.appendChild(script);
            }
        }
    });
}());

In English: after the page has loaded, we first check that there is math, then that MathML is not recognized and if so, we load MathJax (via the provided CDN). With this method we can manage the different browsers…

Firefox, Safari, chrome and edge. You can disable Javascript and enjoy the view. Apart from a few rare forms, you will not lose anything.

IE, opera & cie. You will only admire our equations with the help of javascript and mathjax CDN (otherwise you will have to read MathML). But if your privacy is so important to disable javascript, you should switch browsers.

And after ?

Since you are interested in protecting your privacy, these articles may be of interest to you.

GDPR, feedback

October 14, 2019 By dint of placing orders or registering on websites, we are all at the head of countless online accounts. But what happens when you want to delete them?

Remove ads with pfBlockerNG

October 8, 2018. To remove advertisements globally, you might as well do it at the source, via the network firewall. That’s good, pfSense has a package that does it for us and we’ll show you how.