Un blog plus respectueux de la vie privée
Vincent Bernat
Quand j’ai commencé ce blog, j’ai adopté certains services gratuits, comme Disqus ou Google Analytics. Ces services sont assez envahissants pour la vie privée des utilisateurs. Au fil des années, j’ai essayé de corriger cela pour arriver à un point où je ne repose plus sur aucun service « hostile ».
Analyse d’audience#
- Avant : Google Analytics
- Après : rien
Google Analytics est la solution universelle pour obtenir gratuitement une solution d’analyse d’audience. C’est aussi un excellent moyen de fournir gratuitement des données sur vos visiteurs à Google. Il existe des solutions auto-hébergées comme Matomo, GoatCounter ou Plausible.
J’ai opté pour une solution plus simple : pas d’analyse d’audience. Cela me permet aussi de penser que mon blog attire des milliers de visiteurs par jour.
Mise à jour (02.2019)
Concernant les traces côté serveur, les adresses IP sont anonymisées à l’aide de ipscrub, un module pour nginx. Toutefois, les ressources autres que HTML sont services par Amazon CloudFront1.
Polices de caractères#
- Avant : Google Fonts
- Après : auto-hébergement
Google Fonts est une bibliothèque de polices et un service
d’hébergement très populaire. Il repose sur les règles de
confidentialité de Google. Le service
google-webfonts-helper permet d’auto-héberger facilement n’importe
quelle police issue de Google Fonts. De plus, à l’aide de
pyftsubset
, les polices n’incluent que les caractères
utilisés dans ce blog. Les fichiers sont plus légers et plus
complets : pas de problème pour écrire « Antonín Dvořák ».
Vidéos#
- Avant : YouTube
- Après : auto-hébergement
Certains articles sont accompagnés par une vidéo (comme « OPL2LPT :
une carte son AdLib sur port parallèle »). Par le passé, j’utilisais YouTube,
principalement parce que c’était la seule plateforme gratuite avec une
option pour désactiver les publicités. La diffusion de vidéos à la
demande est généralement jugée assez difficile. Notamment, si vous
utilisez simplement la balise <video>
, vous risquez de servir un
fichier trop volumineux pour les personnes ayant une connexion
lente. Cependant, la difficulté est exagérée : hls.js permet de
livrer la vidéo coupée en segments disponibles dans différents
débits. Les utilisateurs avec JavaScript désactivé se rabattent sur
une version classique de qualité moyenne.
Dans « Auto-hébergement de vidéos avec HLS », j’explique cette approche plus en détail.
Commentaires#
Disqus est une solution de commentaires populaire pour les pages statiques. Ils ont été récemment acquis par Zeta Global, une société de marketing dont le modèle économique repose entièrement sur le profilage. Côté technique, Disqus charge également plusieurs centaines de kilo-octets de ressources. Par conséquent, de nombreux sites n’activent Disqus qu’à la demande. C’est ce que je faisais. Cela ne résout pas le problème de respect de la vie privée. J’avais aussi le sentiment qu’on était moins désireux de laisser un commentaire si une action supplémentaire était requise.
Mise à jour (01.2019)
Un an plus tard, je peux confirmer que le nombre de commentaires a significativement augmenté après le retrait de cette étape supplémentaire. Entre 2011 et 2015, le site récoltait environ 140 commentaires. En 2016, Disqus n’était plus chargé automatiquement et le nombre de commentaires s’est retrouvé divisé par deux. En 2018, après être passé à Isso et chargement automatique, il y a eu 158 commentaires.
Pendant un certain temps, j’ai pensé à mettre en place mon propre système de commentaires autour des flux Atom. Chaque page recevrait son propre flux de commentaires. Un morceau de JavaScript transformerait ces flux en HTML et les commentaires pourraient toujours être lus sans JavaScript grâce au rendu par défaut des navigateurs. Les lecteurs pourraient aussi s’abonner à ces flux : pas besoin de notifications par courrier ! Les flux seraient servis sous forme de fichiers statiques et mis à jour lors de nouveaux commentaires par un petit morceau de code côté serveur. Encore une fois, cela pourrait fonctionner sans JavaScript.
Je pense toujours que c’est une bonne idée, mais je n’avais pas envie de développer et de maintenir un nouveau système de commentaires. Il existe plusieurs alternatives auto-hébergés, notamment Isso et Commento. Isso est un peu plus complet avec notamment un import imparfait depuis Disqus. Les deux rencontrent des difficultés pour assurer la maintenance et essaient de devenir pérennes via une version hébergée payante2. Commento est plus orienté vers le respect de la vie privée avec sa non-utilisation des cookies. Cependant, les cookies ne sont pas indispensables au bon fonctionnement d’Isso et ils peuvent être filtrés avec nginx :
proxy_hide_header Set-Cookie; proxy_hide_header X-Set-Cookie; proxy_ignore_headers Set-Cookie;
Isso ne propose actuellement pas de notifications par
courrier mais j’ai ajouté un flux Atom pour chaque fil de
commentaires.
Mise à jour (01.2019)
La notification par courrier a été ajoutée récemment et je viens d’activer à l’instant cette fonctionnalité ici. J’ai également désactivé les flux Atom étant donné qu’ils n’ont jamais été utilisés.
Une autre option aurait été de fermer les commentaires. Cependant, j’ai d’excellentes contributions en commentaires et je pense aussi qu’ils peuvent faire office de comité de lecture pour articles de blog : c’est une petite garantie que le contenu n’est pas totalement faux.
Moteur de recherche#
- Avant : Google Search
- Après : DuckDuckGo
Un moyen de fournir un moteur de recherche pour un blog personnel est de fournir un formulaire pointant sur un moteur de recherche public, comme Google. C’est ce que je faisais. J’ai aussi glissé un peu de JavaScript sur le dessus pour intégrer l’ensemble.
La solution consiste à passer à DuckDuckGo. Il permet de personnaliser un peu l’expérience de recherche :
<form id="lf-search" action="https://duckduckgo.com/"> <input type="hidden" name="kf" value="-1"> <input type="hidden" name="kaf" value="1"> <input type="hidden" name="k1" value="-1"> <input type="hidden" name="sites" value="vincent.bernat.ch/fr"> <input type="submit" value=""> <input type="text" name="q" value="" autocomplete="off" aria-label="Search"> </form>
La partie JavaScript est supprimée car DuckDuckGo ne fournit pas d’API. Comme il est peu probable que plus de trois personnes utilisent le moteur de recherche dans une année, cela semble une bonne idée de ne pas s’éterniser sur cette fonctionnalité annexe.
Mise à jour (07.2023)
Comme alternative, Pagefind est un moteur de recherche destiné aux sites statiques et reposant sur JavaScript. Dans mon cas, pour ne pas perdre de temps, je préfère continuer à utiliser DuckDuckGo.
Bulletin d’information#
- Avant : flux RSS
- Après : flux RSS
mais aussi une publication par courrier via MailChimp
De nos jours, les flux RSS sont moins populaires. Je ne comprends pas bien cette tendance concernant le public technophile, mais certains lecteurs préfèrent recevoir les mises à jour par courrier électronique.
MailChimp est une solution courante pour l’envoi de bulletins. Il fournit une intégration simple avec les flux RSS pour déclencher un courrier à chaque mise à jour. Du point de vue de la vie privée, MailChimp semble être un bon citoyen : la collecte de données est principalement limitée à ce qui est nécessaire au service. Les utilisateurs soucieux de leur vie privée peuvent toujours éviter ce service et utiliser le flux RSS.
Mise à jour (12.2019)
J’ai retiré la publication via MailChimp. J’avais peu d’inscrits (une quarantaine) et cela me culpabilisait de faire de la publicité pour un tel service. À la place, je propose deux services permettant de recevoir des flux RSS par courrier électronique.
Moins de JavaScript#
- Avant : du code JavaScript hébergé chez des tiers
- Après : du code JavaScript auto-hébergé
Beaucoup de personnes soucieuses de leur vie privée désactivent JavaScript via des extensions telles que uMatrix ou NoScript. À l’exception des commentaires, je n’utilisais JavaScript que pour des choses annexes :
- rendu des formules (comme dans « Déni de service TLS : quelles solutions ? »)
- déplacement les notes de pied de page dans la marge quand il y a de la place3
- livraison améliorée des vidéos (voir « Auto-hébergement de vidéos avec HLS »)
- amélioration des galeries de photos (voir « Installation de Debian sur un ThinkPad Edge 11” »)
Pour les formules mathématiques, je suis passé de MathJax à KaTeX. Ce dernier est plus rapide et permet le rendu côté serveur : JavaScript côté client n’est plus nécessaire.
Pour les notes en marge, j’ai converti le code JavaScript faisant la transformation en Python, avec pyquery. Plus de JavaScript côté client pour cet aspect non plus.
Le code restant est toujours là, mais il est auto-hébergé.
Mémento : CSP#
L’en-tête HTTP Content-Security-Policy
contrôle les resources qu’un
navigateur est autorisé à charger pour le rendu d’une page. Il s’agit
d’un garde-fou et d’une documentation pour les ressources externes
utilisées. Le mien est modérément complexe et montre à quoi s’attendre
du point de vue de la protection de la vie privée :
Content-Security-Policy: default-src 'self' blob:; script-src 'self' blob: d2pzklc15kok91.cloudfront.net 'sha256-Yv7kZY+BkmpZYTujeN0YNmI0uRKpS5CY7E4enn1TRL0='; style-src 'self' 'unsafe-inline' data: d2pzklc15kok91.cloudfront.net; font-src 'self' data: d2pzklc15kok91.cloudfront.net; object-src 'self' d2pzklc15kok91.cloudfront.net media.bernat.ch; img-src 'self' data: d2pzklc15kok91.cloudfront.net; frame-src d2pzklc15kok91.cloudfront.net media.bernat.ch; worker-src blob:; media-src 'self' blob: about: media.bernat.ch d2pzklc15kok91.cloudfront.net; connect-src 'self' media.bernat.ch comments.luffy.cx; base-uri 'none'; frame-ancestors 'none'; form-action duckduckgo.com;
Je suis plutôt satisfait d’avoir pu atteindre ce résultat ! 😊
-
Je n’ai pas de problème avec l’utilisation d’un CDN comme CloudFront : c’est un service payant et Amazon n’est pas une entreprise qui se spécialise dans l’espionnage des utilisateurs. ↩︎
-
Pour Isso, jetez un œil sur comment.sh.Pour Commento, regardez commento.io. ↩︎ -
Vous avez peut-être remarqué mon affection excessive pour les notes de pied de page. ↩︎