Protéger votre vie privée en affichant des Maths sans Javascript

Divulgâchage : Parce que certains visiteurs peuvent légitimement désactiver javascript pour protéger leur vie privée, le site des arsouyes se plie en quatre pour vous fournir à tous une expérience de navigation toujours plus agréable.

Comme vous le savez sûrement, le respect de la vie privée fait partie de nos valeurs. Et pour respecter vos données, nous n’en collectons pas. C’est simple, pratique et pour un peu, ça sauve même quelques bébé phoques.

C’est bien beau de le dire, l’écrire et le faire, encore faut-il que vous puissiez nous faire confiance. Lorsque nous avons regardé la série documentaire Dopamine (on vous la conseille), nous avons remarqué que cette confiance pouvait être ruinée par un simple bouton Facebook :

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.

Épisode Facebook de dopamine

Dopamine, Le bouton Facebook est en fait un mouchard

D’où la question : peut-on avoir confiance à un site pour ne pas nous fliquer ?

On a vérifié, le site de l’exemple de dopamine. Le bouton de l’exemple n’est qu’une icone qui lance le code si on clique dessus. Mais comme je ne peux pas revérifier tous les jours, je ne peux pas non plus vous garantir que c’est encore le cas aujourd’hui. Je ne peux pas non plus vous garantir qu’un autre bout de ce site n’est pas truffé de trackers car je n’ai pas lu la totalité de leur code source.

Donc, à moins de lire (et de comprendre) tous les codes que vos navigateurs téléchargent avant de les exécuter, vous ne pouvez jamais être sûrs qu’il n’y a pas du JS qui va vous espionner… Il ne vous reste alors que trois options :

  1. Faire votre deuil de votre vie privée et accepter que, dans le cyberespace, vous soyez espionné comme dans toute dystopie qui se respecte,
  2. Quitter le web complètement et vous réfugier dans des protocoles plus obscurs respectueux (e.g. gemini même s’il n’empêche pas tout),
  3. Bloquer le javascript (e.g. avec des extensions comme NoScript), ça n’empêche pas tout non plus.

Parce qu’on ne veut pas que vous fassiez votre deuil de votre vie privée en venant ici, et qu’on trouve que gemini est trop extrémiste dans la démarche, on a choisi la troisième option : restreindre au maximum nos usages du JS pour vous permettre de venir ici sans avoir besoin de l’activer.

ErikaWittlieb @ pixabay

Les maths sans Javascript

Au delà du respect de la vie privée c’est en fait une question de respect de nos visiteurs. Pour nous, le Javascript devrait être considéré comme les cookies ; utilisé s’il est strictement nécessaires pour la délivrance d’un service, c’est à dire très rarement.

D’après nous, on devrait pouvoir accéder à n’importe quel contenu sans avoir besoin du javascript. Faire des calculs sur le poste du client, sans lui demander la permission, ou même l’en avertir, ça n’est pas très poli.

C’est beau de rêver… à quand un pop-up d’avertissement : « Afin d’économiser de l’électricité sur nos serveurs, nous avons choisi d’exécuter nos programmes sur votre matériel, merci de votre participation. »

D’un autre côté, le javascript peut apporter de réelles fonctionnalités à un site web. Il est alors parfois nécessaire, et d’autres fois, des alternatives sont possibles. Nous avons donc inventorié nos rares cas d’utilisations et évalué ces alternatives.

  1. Les formulaires de calcul spécifiques (i.e. Chiffre de César), qui sont facultatifs car vous pouvez très bien apprécier les articles sans ces petits plus,
  2. L’affichage des équations mathématiques, plus problématique car lire des maths, de base, c’est pas toujours facile, mais si ces maths sont codées (en Tex pour être précis) on va perdre tous nos visiteurs.

Heureusement, il existe des alternatives pour afficher des maths parmi lesquelles MathML, un standard du Web conçu depuis 1998 pour décrire, et donc afficher, des équations mathématiques. La version 3 ayant été normalisée en 2016 dans la norme ISO/IEC 40314:2016. Ça tombe bien, notre outils qui produit nos pages web (pandoc) sait utiliser ce format, il suffit de lui passer l’option --mathml lors de la compilation comme suit :

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

Mais c’eut été trop beau si tous les navigateurs supportaient les standards… Comme toujours lorsqu’on parle d’application web, on se rend compte que la super fonctionnalité ultime n’est pas compatible avec 25% des visiteurs.

Chrome avait décidé, en 2013, de ne plus supporter mathml (conseillant d’utiliser des librairies javascript comme Mathjax), ils ont fait marcher arrière et le supporte à nouveau depuis la version 109…

En 2023, 75% des utilisateurs sont compatibles MathML

La seule autre alternative étant d’utiliser des images (mais paye ton accessibilité), nous avons choisi d’utiliser MathJax sur les navigateurs qui ne supportent pas MathML.

La Documentation Mozilla fourni les principes de base ainsi qu’un code d’exemple que nous avons donc repris et adapté en tête de toutes nos pages (extrait de code au 27 janvier 2023) :

(function () {
    // On prépare l'exécution (lorsque la page sera chargée)
    window.addEventListener("load", function () {
        var box, div, script, namespaceURI;
        // On vérifie que la page contient du MathML
        namespaceURI = "http://www.w3.org/1998/Math/MathML";
        if (document.body.getElementsByTagNameNS(namespaceURI, "math")[0]) {
            // Création et ajout d'un élément témoin
            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;
            // Récupération de la taille du témoins
            box = div.firstChild.firstChild.getBoundingClientRect();
            // Suppression du témoins (ni vu ni connu)
            document.body.removeChild(div);
            // Si le MathML n'est pas géré, on ajoute 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);
            }
        }
    });
}());

En français : après que la page se soit chargée, on vérifie d’abord qu’il y a des maths, ensuite que MathML n’est pas reconnu et si c’est le cas, on charge MathJax (via le CDN fourni). Avec cette méthode, nous pouvons gérer les différents navigateurs…

Firefox, Safari, chrome et edge. Vous pouvez désactiver le Javascript et profiter de la vue. Mis à part quelques rares formulaires d’illustrations, vous ne perdrez rien.

IE, opera & cie. Vous n’admirerez nos équations qu’avec l’aide de javascript (sinon, vous devrez lire du MathML). Mais si votre vie privée est si importante au point de désactiver javascript, vous devriez changer de navigateur.

Et après ?

Puisque vous êtes intéressés par la protection de votre vie privée, ces articles pourraient vous intéresser.

RGPD, retour d’expérience

14 Octobre 2019 A force de passer des commandes ou de s’inscrire sur des sites web, nous sommes tous à la tête d’un nombre incalculable de comptes en ligne. Mais ça se passe comment lorsque l’on veut les supprimer ?

Supprimer les publicités avec pfBlockerNG

8 Octobre 2018. Pour supprimer les publicité de manière globale, autant le faire à la source, via le pare-feu du réseau. Ça tombe bien, pfSense dispose d’un package qui le fait pour nous et on va vous montrer comment.