Lorsque vous créez un site web, la sécurité et la confidentialité des utilisateurs qui naviguent sur votre site devraient être l’une de vos premières priorités (en parallèle du SEO bien évidemment). L’un des aspects souvent négligé par les développeurs ou webmasters concerne les liens qui ouvrent de nouvelles fenêtres ou onglets. C’est là que les attributs rel="noopener" et rel="noreferrer" entrent en jeu. Je vous explique dans cet article tout ce que vous devez savoir sur ces deux attributs.
Qu’est-ce que rel= »noopener » et rel= »noreferrer » ?
rel="noopener"
L’attribut rel="noopener" empêche les nouvelles pages ouvertes de pouvoir accéder à la page d’origine via l’objet window.opener. Cela permet de bloquer les attaques potentielles dû à une page malveillante qui pourrait changer la page d’origine pour rediriger l’utilisateur vers un site malveillant. De plus, cela optimise les performances car chaque nouvel onglet est traité de manière indépendante par le navigateur.
rel="noreferrer"
L’attribut rel="noreferrer" va un peu plus loin en empêchant le navigateur de passer l’adresse de la page d’origine à la nouvelle page via l’en-tête HTTP Referer. Cela est utile pour la confidentialité car cela empêche les autres sites de savoir que votre site a envoyé du trafic vers eux. Comme noopener, il inclut également toutes les protections de sécurité mentionnées ci-dessus.
Dans quels cas utiliser ces attributs ?
Liens externes
Utilisez rel="noopener noreferrer" pour tous les liens externes que vous ouvrez dans un nouvel onglet (avec target="_blank"). Cela est particulièrement important si vous ne contrôlez pas la totalité du contenu de la destination du lien cible.
Exemple d’application:
<a href="https://www.siteexterne.com" target="_blank" rel="noopener noreferrer">Visitez le site</a>Pourquoi est-ce important ?
- Sécurité : en les mettant en place vous empêcher les nouvelles pages d’accéder à la page d’origine, ce qui réduit le risque de redirections malveillantes et d’autres types de piratage.
- Confidentialité : ne pas transmettre le référant aide à protéger la confidentialité des données, en s’assurant que les sites externes ne voient pas d’où vient leur trafic.
- Performance : l’absence de lien direct entre les onglets (via
window.opener) permet au navigateur de gérer les onglets de manière plus efficace et sécurisée.
Qu’en est il du maillage interne ? Dois-je utiliser ces attributs ?
En général, pour le maillage interne, il n’est pas nécessaire utiliser rel= »noopener » ou rel= »noreferrer ». Ces attributs sont surtout pertinents et recommandés pour les liens externes ouverts dans un nouvel onglet afin de renforcer la sécurité et la confidentialité de l’utilisateur et du site.
Est-ce que le jus SEO sera quand meme transmit ?
Les attributs rel= »noopener » et rel= »noreferrer » n’ont pas d’impact direct sur la transmission du « jus SEO » (link juice), c’est-à-dire sur la façon dont la valeur est transmise d’une page à une autre via des liens.
Conclusion
L’utilisation des attributs rel="noopener" et rel="noreferrer" dans vos liens est une pratique simple qui peut grandement améliorer la sécurité et la confidentialité de votre site web. C’est une étape facile à mettre en œuvre et qui protège à la fois vous et vos utilisateurs. La prochaine fois que vous ajouterez un lien externe sur votre site, pensez à inclure ces attributs pour garantir une meilleure expérience sécurisée pour tous.