rel=noopener ? N'ouvrez pas la fenêtre !

Un client, qui administre deux sites, nous a soumis un cas intéressant : depuis quelques mois, il constate une chute spectaculaire des statistiques de référencement entre ses deux sites : les liens fonctionnent correctement mais Google Analytics ne semble plus en mesure de comptabiliser l'un ou l'autre site comme origine du clic. Le phénomène n'a pas été constaté avec d'autres sites référents.

Après quelques recherches, nous avons pu percer le mystère !

Il ne faut pas se tromper de cible

Ceux qui rédigent des articles à destination d'Internet savent que lorsqu'ils désirent insérer un lien interne (vers une autre page du site) ou externe (vers un autre site) ils doivent faire un choix :

• soit ouvrir la nouvelle page dans la même fenêtre que l'article d'origine, donc en remplacement de celui-ci. C'est le comportement par défaut des navigateurs.
• soit ouvrir la page de destination dans une nouvelle fenêtre (avec un appareil mobile) ou un nouvel onglet (avec un navigateur récent sur un ordinateur de bureau).

Une convention tacite préconise que les liens internes s'ouvrent dans la même fenêtre tandis que les liens externes déclenchent l'ouverture d'un nouvel onglet. L'idée générale est d'éviter que les visiteurs ne se "perdent" dans le nouveau site ouvert et qu'ils puissent revenir facilement au vôtre en fermant l'onglet.

Je plaide coupable d'avoir souvent souscrit à cette "convention" sur mes sites. Mais en écrivant ces lignes pour cet article, je me rends compte à quel point cela ne repose en réalité sur aucun argument valable. Il s'agit plutôt d'une (mauvaise) habitude qui présente plusieurs inconvénients :

• sur les téléphones mobiles, la gestion de nouvelles fenêtres ne se fait pas aussi facilement que sur un navigateur d'ordinateur
• du point de vue de l'accessibilité, si vous envoyez - sans le prévenir - un utilisateur sur un autre site, il ne pourra pas revenir en arrière en cliquant sur le bouton de son navigateur.

Dans ces deux cas, le retour vers le site d'origine est compliqué au lieu d'être favorisé.

Enfin, et on revient au sujet de cet article, ouvrir une page dans une nouvelle fenêtre présente un risque important pour la sécurité.

Les attributs de liens et la sécurité

Il y a quelques temps déjà, on s'est aperçu qu'ouvrir un lien vers une autre fenêtre présentait une faille de sécurité très grave : si la page de destination contient un script malveillant, celui-ci peut injecter du contenu sur la page d'origine, par exemple pour piéger les visiteurs avec une tentative d'hameçonnage (phishing, en anglais).

C'est pourquoi les traitements de texte TinyMCE et JCE editor^* (l'éditeur de texte pour Joomla!^® que nous recommandons) ajoutent automatiquement deux valeurs à un attribut particulier des liens Web. C'est l'une de ces valeurs qui est la cause de la perturbation des statistiques analytiques. Notez cependant qu'il ne s'agit que d'un problème de traçabilité et que le référencement naturel du site n'est absolument pas affecté.

La suite de cet article paraîtra sans doute rébarbative à ceux qui ne sont pas familiers avec le langage HTML. Je les invite à passer directement à la conclusion pour l'application concrète.

* depuis sa version 2.6.9.

Attribut de relation contenu - cible

Il existe toute une série de valeurs possibles à l'attribut REL qui est associé à un lien Web. La plus courante est  rel="nofollow", qui indique aux robots des moteurs de recherche de ne pas suivre le lien. On la trouve en général sur les liens présents dans les commentaires ou les publications dans les forums.

Dans le cas des liens qui utilisent la cible target="_blank", donc qui forcent l'ouverture dans une nouvelle fenêtre, il est possible de se protéger contre l'injection de code malveillant en utilisant l'attribut rel="noopener".

Malheureusement, rien n'est jamais simple sur Internet et, à l'heure actuelle, seul environ les trois quarts des navigateurs sont compatibles avec cette instruction, comme le montre - en vert - le tableau ci-dessous.

Source : https://caniuse.com/#search=noop

Pour les 25 % restants, il est possible d'utiliser en plus l'attribut rel="noreferrer" qui procure la même protection, mais avec l'inconvénient d'empêcher l'identification du site "référent" du lien : Google Analytics (et les autres logiciels analytiques) ne parvenant plus à identifier la source du clic, il le comptabilise avec le support "direct". C'est le problème rencontré par notre client et qui explique les variations brutales dans ses statistiques. 

Que faire en pratique ?

Solution recommandée

A moins d'avoir une très bonne raison de faire autrement, la meilleure solution consiste à ne jamais ouvrir de lien dans une nouvelle fenêtre. Conservez le comportement par défaut pour tous vos liens, vous ferez plaisir à vos utilisateurs mobiles ou déficients visuels et vous profiterez d'une meilleure sécurité. N'oubliez pas que l'utilisateur d'un navigateur moderne a toujours la possibilité d'ouvrir n'importe quel lien dans un nouvel onglet s'il le désire. Laissez-lui ce choix et ne lui forcez pas la main. Si vous utilisez l'éditeur JCE, vérifiez dans les paramètres des plug-ins, pour le gestionnaire de liens, que le paramètre pour la Cible est réglé sur --Non défini-- (--Not set--, en anglais) ou, mieux, sur  Afficher dans la même fenêtre. 

Attention, changer la configuration du traitement de texte n'aura pas d'effet sur les liens déjà créés. Pour ceux-ci, vous devrez modifier les articles et corriger les liens existants en changeant éventuellement la cible sur  Afficher dans la même fenêtre.

Alternative n°1

Si malgré tout, vous tenez à ce que certains liens s'ouvrent dans une nouvelle fenêtre, TinyMCE ajoutera automatiquement l'attribut rel="noopener noreferrer". Vous serez donc couverts au niveau de la sécurité mais si le lien pointe vers un de vos sites - comme c'est le cas pour notre client - vos statistiques analytiques seront affectées.

Remarque importante : l'éditeur JCE, depuis sa version 2.6.20, a fait un peu machine arrière et n'ajoute plus que rel="noopener" aux liens ayant une cible "_blank". La protection n'est donc pas totale et vous ne devriez pas autoriser des liens s'ouvrant dans de nouvelles fenêtres vers des sites dont vous ne contrôlez pas la sécurité. Ce conseil vaut particulièrement pour les sites dont les articles sont écrits par de nombreux collaborateurs. Dans ce cas, vous devriez leur attribuer un profil JCE dans lequel vous fixez la cible des liens à Afficher dans la même fenêtre et où vous interdisez la modification de la cible.

Alternative n°2

Pour ceux que le code HTML n'effraie pas, il y a une autre solution qui permet à la fois de profiter de la protection par "noopener" et de conserver l'attribution du site référent en ajoutant le code Javascript suivant au lien :

var otherWindow = window.open();
otherWindow.opener = null;
otherWindow.location = href;
return false;

Vous devrez basculer l'éditeur en mode HTML pour insérer ce code car il n'est pas possible de l'introduire via le gestionnaire de lien. Voici un exemple du résultat final (remplacez "domaine.tld" par l'url véritable du lien) :

a href="https://www.domaine.tld" target="_blank" rel="noopener" onclick="var otherWindow = window.open(); otherWindow.opener = null; otherWindow.location = href; return false;"

Conclusion

Quand vous créez un lien dans un article, utilisez le comportement par défaut des navigateurs (ouverture dans la même fenêtre) et ne forcez pas l'ouverture dans une nouvelle fenêtre. Il s'agit là d'une faille de sécurité particulièrement sous-estimée et un lien, quel qu'il soit, peut très bien s'ouvrir dans la même fenêtre.  La sécurité de votre site passe avant tout.