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

tbowan

16 Décembre 2019

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), et surtout l’épisode sur Facebook, 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. »

Extrait de Dopamine, épisode sur Facebook : « Le bouton Facebook est en fait un mouchard »

Extrait de Dopamine, épisode sur Facebook : « Le bouton Facebook est en fait un mouchard »

Alors pour vous permettre de continuer à naviguer sur le site des arsouyes en toute confiance, nous avons trouvé quelques alternatives aux (rares) usages que nous avons du Javascript. C’est très raccourcis écrit comme ça, mais la suite va vous expliquer le pourquoi et le comment.

Les boutons sociaux

Avec la montée en puissance des réseaux sociaux, il est devenu primordial, pour votre exposition médiatique, de générer de l’engagement chez votre public sous la forme de partage sur ces réseaux car cela vous apporte une visibilité chez l’audience de ces visiteurs coopératifs. S'ils vous aiment, les gens qui les aiment eux sont alors au courant et peuvent, ensuite, vous aimer et le cycle continue.

Mais sans aider vos visiteurs, il devront effectuer plusieurs tâches manuelles. Comme copier l’URL (on part du principe qu'ils savent ce que c'est), ouvrir l’application de leur réseau, s’y connecter si leur session a expiré, créer un post (ou autre terminologie), coller l’URL. S’il sont sur mobile, ça peut être encore plus fastidieux. Autant d’étapes rébarbatives qui vont entamer leur énergie et servir de barrière à cet engagement.

Il est bien plus pratique et donc bien plus performant d’ajouter un petit bouton qui fait tout ce travail automagiquement. C’est simple, c’est rapide et ça ne coûte plus aucune énergie à votre visiteur qui peut partager compulsivement.

Cette méthode est en fait doublement efficience car de leur côté, les réseaux sociaux ont conditionné leurs utilisateurs à cliquer sur ce bouton. Lorsqu’ils le voient, leur réflexe est de cliquer dessus. Il leur coûtera même de l’énergie pour ne pas cliquer…

Pour créer un tel bouton pour Facebook (mais ça fonctionne tout pareil chez les autres), la documentation officielle proposes les deux solutions suivantes :

  1. Un div et son javascript qui vont carrément exécuter un programme provenant de Facebook chez vos visiteurs.
  2. Un iframe, qui va carrément embarquer un contenu provenant de Facebook dans votre page, dont du javascript, ce qui revient au même que pour le div.

Ce javascript, en plus d’effectuer les étapes nécessaire au partage, va en profiter pour récupérer les données personnelles disponibles et les envoyer au réseau social correspondant. Ces données enrichiront, entre autre, leur profilage, leur ciblage publicitaire et leurs études sociologiques mais peuvent aussi être vendues à leurs partenaires.

Si un hacker insérait ce genre de chose dans une page, on appellerait ça une attaque Cross-Site scripting, mais comme ça vient du marketing, on appelle ça une fonctionnalité.

Illustration de ErikaWittlieb

Illustration de ErikaWittlieb

Pour les webmasters respectueux, le problème est que si on veut pouvoir toucher une large audience, les réseaux sociaux sont incontournables. Qu’on les aime ou pas, une (large) partie de votre public les utilise et s’attend à trouver sur votre site au moins une référence vers votre présence sur leur réseau social favoris.

Pour respecter vos visiteurs, vous pouvez choisir une alternative en optant pour un lien qui mène vers votre page et utiliser le logo du réseau social correspondant. C’est moins fonctionnel qu’un bouton puisque les visiteurs ne peuvent pas l’utiliser pour partager du contenu, mais ça leur permet de vous retrouver là où ils préfèrent aller.

Chez les arsouyes, c’est ce que nous faisons, en allant même plus loin. Pour éviter que les réseaux sociaux ne sachent que leur icône est affichée sur votre navigateur (et sache donc la page que vous regardez), nous avons copié ces logos et nous vous les fournissons directement. Les réseaux sociaux n’étant pas mis à contribution, ils n’ont alors aucune information sur vous (sauf si vous cliquez, mais là, c’est un peu votre choix).

De cette manière, on répond aux besoins des visiteurs : ceux qui utilisent les réseaux peuvent vous y retrouver et vous aimer. Ceux qui ne veulent pas être suivis par les réseaux sociaux ne le sont pas.

Pour les visiteurs, le problème est alors de faire la différence entre les liens inoffensifs et les mouchards car visuellement, rien ne les distingues les uns des autres. Certains mouchards étant même inséré dans la page sans être affichés du tout… Pour s’assurer de l’innocuité d’une page, il faudrait l’inspecter et l’étudier.

Pour la petite histoire, nous avons vérifié – le 10 décembre 2019 – la page de lutte contre le tabagisme citée dans la vidéo dopamine. Celle-ci ne contient en fait pas de bouton Facebook mais deux liens avec une icône dont le javascript n’est lancé que lorsqu’on clique dessus (et sert pour le SEO du ministère, parce qu’eux aussi aiment bien suivre leurs visiteurs).

Pour éviter de faire ces vérifications fastidieuses systématiquement, vous pourriez empêcher le chargement des mouchards provenant de sites reconnus comme tels, via le filtrage des DNS ou des extensions de vos navigateurs. C’est globalement efficace mais tout comme nous avons copié les logos, il est possible de copier les mouchards et les servir au visiteurs directement sur le site et donc contourner ce filtrage…

Si vous voulez vraiment vous protéger, vous devriez en fait désactiver complètement le Javascript (en plus des filtrages DNS), au risque de perdre des fonctionnalités sur les sites que vous visitez.

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 en faite prise en compte que chez moins d'un quart des visiteurs. Chrome ayant décidé, en 2013, de ne plus le supporter et conseillant d’utiliser des librairies javascript (i.e. Mathjax) à la place…

En 2019, 19,77% (firefox) + 3,84% (safari) soit 23,61% des visiteurs sont compatibles MathML

En 2019, 19,77% (firefox) + 3,84% (safari) soit 23,61% des visiteurs sont compatibles MathML

La seule autre alternative étant d’utiliser des images (mais paye ton accessibilité), nous avons accepté 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 non contractuel) :

(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 = "/MathJax/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 (la copie fournie par les arsouyes, évitant aux CDN et autres tiers de savoir ce que vous faites).

Avec cette méthode, nous pouvons gérer les différents navigateurs…

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

Chrome et Edge. Vous n’admirerez nos équations qu’avec l’aide de javascript (sinon, vous devrez lire du Tex). Mais très franchement, si votre vie privée vous préoccupe au point de désactiver javascript, pas sûr que choisir le navigateur de Google ou de Microsoft soit très cohérent…

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.