Dans le monde du développement web, les liens HTML sont la base de la navigation entre les pages web. Cependant, même ces éléments fondamentaux peuvent comporter des risques de sécurité. C’est là que l’attribut rel= »noopener noreferrer » entre en jeu, offrant une couche de protection pour votre site web et ses visiteurs.

Quelles sont les parties de cet attribut ?

Décomposons les deux composants de cet attribut :

  • noopener : Cette partie traite d’une vulnérabilité de sécurité qui survient lorsque vous ouvrez des liens dans de nouveaux onglets ou fenêtres en utilisant l’attribut target= »_blank ». Un site web malveillant ouvert de cette manière pourrait prendre le contrôle partiel de la fenêtre d’origine (celle où vous avez cliqué sur le lien). L’attribut noopener empêche cela en coupant la connexion entre l’onglet nouvellement ouvert et la page d’origine.
  • noreferrer : Cette partie concerne la confidentialité. Lorsque vous cliquez sur un lien, le site web sur lequel vous atterrissez reçoit généralement des informations sur votre provenance (le référent). L’attribut noreferrer masque ces informations de référent. Cela peut être utile lorsque vous liez à des sites externes que vous ne souhaitez pas nécessairement approuver et que vous voulez protéger la confidentialité de vos visiteurs.

Pourquoi utiliser « noopener noreferrer » ?

  1. Sécurité : Cet attribut est principalement utilisé pour améliorer la sécurité. En empêchant les onglets ou fenêtres nouvellement ouverts de contrôler la page d’origine, vous protégez vos utilisateurs contre d’éventuelles exploitations.
  2. Confidentialité : Si vous ne souhaitez pas transmettre des informations de référent à des sites externes, l’attribut noreferrer garantit que l’historique de navigation de vos visiteurs reste un peu plus privé.
  3. Performance (Indirecte) : Bien que ce ne soit pas un effet direct, noopener peut entraîner des améliorations mineures de performance. Sans cette connexion à la page d’origine, le nouvel onglet peut se charger légèrement plus rapidement.

Comment utiliser l’attribut

Incorporer rel= »noopener noreferrer » dans vos liens HTML est simple :

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visit Example Website</a>

Note WordPress : WordPress ajoute automatiquement cet attribut à tous les liens que vous configurez pour s’ouvrir dans un nouvel onglet ou une nouvelle fenêtre, offrant une protection intégrée.

Dois-je toujours l’utiliser ?

Bien qu’il soit généralement considéré comme une bonne pratique d’utiliser rel= »noopener noreferrer » sur les liens externes, il existe quelques exceptions :

  • Sites Web de confiance : Si vous liez à des sites web bien connus et fiables, vous pouvez omettre l’attribut.
  • Liens internes : Il n’est pas nécessaire d’utiliser cet attribut lorsque vous liez à des pages au sein de votre propre site web.

Impact sur le SEO

La bonne nouvelle est que l’utilisation de rel= »noopener noreferrer » ne devrait pas avoir d’impact négatif direct sur l’optimisation pour les moteurs de recherche (SEO) de votre site web. Cela dit, le composant noreferrer pourrait rendre plus difficile le suivi du trafic de référence dans les outils d’analyse si vous dépendez fortement de ces données.

L’attribut rel= »noopener noreferrer » peut sembler être un petit détail, mais il joue un rôle important dans la sécurité des sites web et la confidentialité des utilisateurs. En comprenant et en incorporant cet attribut, vous créez une expérience en ligne plus sûre et plus responsable.

Comprendre les bases de l’attribut rel= »noopener noreferrer »

Liens HTML et l’attribut target= »_blank »

La base de la navigation sur le web réside dans le lien HTML humble, souvent représenté par la balise . Décomposons-le :

  • La structure de base : <a href= »https://www.examplewebsite.com »> Cliquez ici pour le site Exemple <>
  • href spécifie la destination du lien
  • Le texte entre les balises d’ouverture <a> et de fermeture <> est ce que l’utilisateur voit et sur quoi il clique.
  • La magie de target= »_blank » : Cet attribut indique au navigateur d’ouvrir le lien dans un nouvel onglet ou une nouvelle fenêtre, offrant une expérience utilisateur plus fluide lorsque vous souhaitez garder les visiteurs sur votre site tout en leur permettant d’explorer des ressources supplémentaires.

Vulnérabilités potentielles de sécurité

Bien que pratique, l’attribut target= »_blank », lorsqu’il est utilisé sans précautions, peut involontairement ouvrir une fenêtre d’opportunité pour des acteurs malveillants. Voici pourquoi :

La propriété window.opener : Dans un scénario normal, les sites web ont un accès limité aux autres onglets ou fenêtres que vous avez ouverts. Cependant, lorsqu’un nouvel onglet est ouvert en utilisant target= »_blank », une propriété JavaScript spéciale appelée window.opener établit un lien vers l’onglet ou la fenêtre d’origine.

Les risques de manipulation : Si un site web malveillant accède à window.opener, il a le potentiel de :

  • Rediriger l’onglet d’origine vers un site web nuisible (phishing, distribution de logiciels malveillants, etc.)
  • Injecter du contenu ou des publicités indésirables sur votre site web
  • Lancer des pop-ups ou des superpositions trompeuses pour piéger les visiteurs
  • Exploiter une classe d’attaques connue sous le nom de « tabnabbing »

Informations de référent et analyses

Chaque fois que vous cliquez sur un lien pour naviguer d’un site web à un autre, votre navigateur envoie généralement une petite information connue sous le nom de « référent ». Cela indique au site de destination d’où vous venez. Voici pourquoi c’est important :

Comprendre le trafic des visiteurs : Les données de référent sont inestimables pour les analyses de sites web. Elles vous aident à :

  • Voir quels sites web et backlinks envoient des visiteurs vers votre site.
  • Suivre le succès des campagnes marketing.
  • Comprendre comment les gens naviguent sur votre site web.

Considérations potentielles en matière de confidentialité : Bien qu’utiles pour les analyses, les informations de référence peuvent également soulever des préoccupations en matière de confidentialité dans certaines situations :

  • Les sites sensibles (par exemple, santé, finance) pourraient ne pas vouloir que l’URL de référence soit librement transmissible.
  • Les utilisateurs préoccupés par le suivi de leur historique de navigation pourraient préférer limiter les données que les sites web reçoivent à leur sujet.

Avec une base dans les liens HTML, les vulnérabilités potentielles et les informations de référence, nous sommes prêts à explorer comment « noopener » et « noreferrer » aident à atténuer ces risques.

Comment fonctionnent « noopener » et « noreferrer »

La balise « noopener »

  • La fonction principale : La balise « noopener » coupe la connexion JavaScript (établie via window.opener) entre le nouvel onglet/fenêtre et le site web d’origine. C’est une mesure de sécurité cruciale.
  • Prévention de la manipulation des onglets : En utilisant « noopener », vous dites essentiellement au navigateur : « Ne donnez aucun moyen au nouveau site web de manipuler l’onglet d’origine. » Cela garantit que vos visiteurs ne peuvent pas être redirigés de manière inattendue ou voir le contenu de votre site modifié.
  • Exemple de code :
<a href="https://externalsite.com" target="_blank" rel="noopener">Visit External Site</a>
  • Avantages au-delà de la sécurité : « noopener » peut également améliorer subtilement les performances du site web. En bloquant ce contrôle potentiel, le navigateur sait qu’il n’a pas besoin de consacrer autant de ressources à surveiller les interactions entre les onglets.

La balise « noreferrer »

Contrôle des informations de référence : La balise « noreferrer » indique au navigateur de ne pas transmettre les informations de référence lorsqu’un utilisateur clique sur le lien. Cela impacte le suivi des analyses de site web.

Confidentialité et cas d’utilisation : Voici quand vous pourriez utiliser « noreferrer » :

  • Liaison vers des sites sensibles où l’anonymat est important.
  • Partenariat avec des sites où vous souhaitez garder les détails d’origine du trafic privés.
  • Prioriser la confidentialité des utilisateurs par rapport à une analyse approfondie du trafic

Exemple de code

Visiter le site externe

Combinaison des balises

Pour une protection et une flexibilité maximales, il est courant de combiner « noopener » et « noreferrer » ensemble :

Maximiser la sécurité : Cette approche traite à la fois le risque de manipulation des onglets et les préoccupations potentielles en matière de confidentialité ou d’analyses en une seule étape.

Exemple de code

<a href="https://externalsite.com" target="_blank" rel="noopener noreferrer">Visit External Site</a>

WordPress, Elementor et « noopener noreferrer »

Comportement par défaut de WordPress

WordPress, connu pour son engagement en matière de sécurité, adopte une position proactive sur les balises « noopener noreferrer ». Voici ce que vous devez savoir :

  • Inclusion automatique : Depuis la version 5.1 de WordPress, « noopener noreferrer » est automatiquement ajouté à tous les liens configurés pour s’ouvrir dans un nouvel onglet ou une nouvelle fenêtre. Cela garantit que même les propriétaires de sites sans connaissances techniques approfondies sont protégés contre les vulnérabilités courantes.

Paramètres de lien Elementor

Elementor, le principal constructeur de sites WordPress, offre des contrôles visuels intuitifs pour simplifier la gestion des liens, y compris l’option d’ouvrir les liens dans de nouveaux onglets :

  • Facilité d’utilisation : Dans l’éditeur d’Elementor, lorsque vous activez l’option « Ouvrir dans un nouvel onglet » pour tout lien (boutons, texte, images), Elementor insère automatiquement « noopener noreferrer » en arrière-plan.
  • Sécurité conviviale : Cette intégration permet aux utilisateurs d’Elementor de créer une expérience web plus sécurisée et conviviale sans modifier manuellement le code HTML.

Considérations et meilleures pratiques en matière de SEO

« nofollow » vs. « noreferrer »

Bien que les deux balises impactent les liens, il est crucial de se rappeler qu’elles servent des objectifs distincts :

« nofollow » (rel= »nofollow ») : Cette balise indique principalement aux moteurs de recherche de ne pas suivre le lien ou de ne pas transmettre de « link juice » (pouvoir de classement) au site de destination. Elle est souvent utilisée pour :

  • Liens payants ou contenus sponsorisés
  • Sites non fiables ou commentaires générés par les utilisateurs

« noreferrer » : Axée sur la sécurité, cette balise masque les informations de référence pour la confidentialité et la protection des utilisateurs contre les exploits.

Impact sur le trafic de référence

Comprendre comment « noreferrer » peut affecter les analyses est essentiel pour maintenir des informations précises sur le trafic de votre site web :

Attribution du trafic : Étant donné que « noreferrer » obscurcit le site source, ces visites peuvent apparaître comme « trafic direct » dans les plateformes d’analyse comme Google Analytics, rendant plus difficile le suivi de l’origine des clics.

Solutions et contournements :

  • Paramètres UTM : Des liens soigneusement conçus avec des codes UTM aident à préserver les détails de suivi même avec « noreferrer » en place.
  • Plateformes d’analyse avancées : Certaines solutions peuvent reconnaître automatiquement les sources de référence connues.

Équilibrer sécurité et fonctionnalité

La clé est de prendre des décisions éclairées sur le moment où il faut prioriser la sécurité par rapport à une attribution méticuleuse du trafic :

  • Prioriser la sécurité : Utilisez toujours « noopener noreferrer » sur les liens externes pour protéger vos visiteurs et la réputation de votre site web.
  • Utilisation stratégique de « noreferrer » : Si des données de référence granulaires sont indispensables pour certains liens (par exemple, suivi de campagne approfondi), pesez les risques potentiels avant de supprimer la balise « noreferrer ».
  • Liens internes : Étant donné que vous contrôlez votre propre site web, vous n’avez généralement pas besoin de « noopener noreferrer » sur les liens internes pour des raisons de sécurité.

Quand utiliser « noopener noreferrer »

Liens externes

  • La règle d’or : En tant que meilleure pratique de sécurité, appliquez toujours « noopener noreferrer » à tous les liens menant à des sites que vous ne possédez pas ou ne contrôlez pas. Cela s’applique aux liens dans vos articles de blog, barres latérales, navigation, etc.
  • Pourquoi c’est important : Vous ne pouvez pas garantir les pratiques de sécurité ou les intentions de chaque site web externe. Une protection proactive minimise le risque que votre site et vos visiteurs soient compromis en raison de vulnérabilités que vous ne pouvez pas influencer.

Liens d’affiliation

Sécurité et analyses : Les liens d’affiliation, bien que nécessaires pour les stratégies de monétisation, nécessitent une attention particulière :

  • Sécurité : Protégez-vous et vos visiteurs contre toute manipulation potentielle par des partenaires affiliés.
  • Suivi : Utilisez les paramètres UTM avec « noreferrer » pour préserver les détails de suivi de campagne tout en priorisant la sécurité.

Contenu généré par les utilisateurs

  • L’importance de la vigilance : Lorsque votre site permet des commentaires, des forums ou toute forme de contenu soumis par les utilisateurs incluant des liens, des acteurs malveillants peuvent insérer des liens nuisibles.
  • Protection automatisée : De nombreuses plateformes de sites web peuvent automatiquement ajouter « noopener noreferrer » aux liens générés par les utilisateurs. Vérifiez vos paramètres et utilisez des plugins si nécessaire pour renforcer cette couche de sécurité.

Sites web non fiables

  • Procédez avec prudence : Si vous vous retrouvez à lier un site web dont vous n’êtes pas sûr, même si c’est à des fins d’information/comparaison, « noopener noreferrer » offre une couche de sécurité supplémentaire.
  • Prioriser la réputation de votre site : Protéger vos visiteurs contre les dangers potentiels renforce la confiance qu’ils ont en votre site web.

Au-delà de « noopener noreferrer »

Attributs de sécurité supplémentaires liés aux liens

Bien que « noopener noreferrer » soient les stars de la sécurité des liens, il est utile de noter d’autres attributs pour des cas d’utilisation spécifiques :

  • rel= »ugc » Pour les liens de contenu généré par les utilisateurs, cette balise indique aux moteurs de recherche que vous n’avez pas nécessairement approuvé le contenu lié.
  • rel= »sponsored ». Il est utilisé pour les liens payés ou sponsorisés afin d’assurer la transparence pour les utilisateurs et les moteurs de recherche.

Conclusion

Dans le paysage interconnecté du web, comprendre des concepts apparemment simples comme « noopener noreferrer » vous permet de créer une expérience en ligne plus sûre et optimisée. En priorisant des pratiques de liaison responsables, vous protégez votre site web, ses visiteurs et votre réputation en ligne.