Que signifient les attributs rel=noreferrer et rel=noopener
Depuis la mise à jour 4.7.4 de WordPress, les sites réalisés avec le CMS intègrent systématiquement les attributs rel=noopener et rel=noreferrer dans les liens en target=_blank. Si les développeurs sont aujourd’hui très familiers à ces deux attributs, il faut dire que cela n’a pas toujours été le cas. Bew Web Agency vous propose dans ce billet de découvrir ce qu’ils signifient et leurs impacts pour un site Internet.
Ce que signifient les attributs rel=noopener et rel=noreferrer
Les deux attributs rel=noopener et rel=noreferrer que WordPress ajoute désormais automatiquement à tous les liens en target blank ont des objectifs quasi similaires.
Les attributs rel=noopener
En réalité, « noopener » et « noreferrer » sont des mots-clés distincts que l’on peut affecter à l’attribut « rel ». Noopener est une mesure de sécurité que le CMS WordPress ajoute à un lien en target blank afin de corriger les éventuelles failles sécuritaires.
Lorsque vous créez un lien devant s’ouvrir dans une nouvelle fenêtre de navigateur, vous pouvez, sans même le vouloir, créer une faille de sécurité. Par exemple, par le passé, lorsque les internautes cliquaient sur un lien qui s’ouvre dans une autre fenêtre, ils pouvaient tomber sur une fausse page. Cette dernière pouvait alors être utilisée pour voler les données personnelles sensibles des utilisateurs ou pour leur envoyer des codes malveillants. On parle d’attaque de phishing par tabulation inversée. Grâce à l’attribut rel=noopener, une page externe peut s’ouvrir sans que la fonctionnalité Javascript window.opener, responsable de la faille de sécurité, ne soit appelée. Avec noopener, la valeur de window.opener est automatiquement définie sur null. Cela a pour conséquence de bloquer toute tentative de manipulation illicite de l’URL de la page de provenance du lien.
Sur le navigateur Mozilla, les liens en target blank empêchent automatiquement la mise en place de la fonctionnalité window.opener, même en l’absence de l’attribut rel=noopener. Mais pour protéger votre site web, WordPress préfère intégrer cet attribut automatiquement. En effet, tous les navigateurs web (Opera par exemple) ne prennent pas systématiquement en charge la suppression de window.opener.
Les attributs rel=noreferrer
L’attribut rel=noreferrer joue un rôle sensiblement similaire à celui de rel=noopener. Mais ce qui fait la spécificité du mot-clé noreferrer, c’est qu’une fonction de protection de confidentialité s’ajoute au site. C’est un attribut qui a vocation à empêcher les liens externes d’obtenir des informations sur l’origine du trafic. Lorsque l’un de vos liens externes contient l’attribut rel=norefferer, le site bénéficiaire ne peut pas identifier la source du trafic que lui génère le backlink. Dans Google Analytics, la source s’affichera simplement en tant que trafic direct. Aucun nom de domaine ne sera explicitement affiché. Lorsqu’on l’utilise seul, l’attribut rel=noreferrer que WordPress ajoute désormais automatiquement aux liens en target=_blank peut parfois poser un problème. C’est pour cela que le CMS l’associe à rel=noopener pour renforcer la sécurité de votre site.
Comment vérifier la présence des deux attributs rel=noopener et rel=noreferrer ?
Avant de pouvoir gérer les attributs rel=noopener et rel=noreferrer, il est important de savoir les détecter sur votre site Internet. La procédure de vérification de ces deux attributs est assez simple. Rendez-vous sur une page qui contient le lien externe et faites un clic droit sur ce dernier. Choisissez ensuite l’option « Inspecter » afin d’atteindre le code HTML de la page. Sur la page qui s’affiche, vous pouvez analyser le code HTML du lien en target blank et vérifier la présence des attributs rel=noreferrer et rel=noopener.
Il faut savoir que l’attribut rel=noreferrer cause des problèmes de tracking. Vous pouvez enlever la mention noreferrer avec un plugin WordPress pour permettre aux logiciels de web analytics d’analyser votre site.
Une différence avec les attributs rel=nofollow et rel=sponsorised ?
En réalité, le mot-clé nofollow n’a pas le même objectif que les mots-clés noopener et noreferrer. Lorsque vous l’ajoutez à un lien en target=_blank, vous demandez implicitement aux robots des moteurs de recherche de ne pas suivre l’URL. C’est donc un mot-clé qui s’avère très utile pour le référencement SEO. L’attribut rel=nofollow sur un lien externe ne joue aucun rôle pour la sécurisation d’un site WordPress. Il ne joue pas non plus un rôle pour sa confidentialité.
En outre, on n’observe aucune transmission de jus de lien. Par le passé, pour les liens achetés ou sponsorisés, Google recommandait aux développeurs d’utiliser l’attribut rel=nofollow. Les mots-clés nofollow et sponsorised semblent avoir le même fonctionnement. Mais aujourd’hui, la firme américaine propose, voire impose l’utilisation de « sponsorised ». En d’autres termes, l’attribut rel=sponsorised est aussi différent de rel=noreferrer et de rel=noopener. Dans l’idéal, on l’utilise sur des liens provenant des forums ou des sections « commentaires » des sites web.
En conclusion, les attributs rel=noopener et rel=noreferrer sont intéressants uniquement pour leur rôle dans la sécurisation et la confidentialité. Et vous, lequel de ces deux attributs trouvez-vous réellement utiles ?
