Sécuriser l’ouverture d’un lien dans un nouvel onglet

Ouvrir un lien dans un nouvel onglet grâce à l’attribut target="_blank" est une pratique courante sur le web. Cependant, cette méthode peut présenter certains risques pour la sécurité et l’expérience utilisateur si elle est mal utilisée. Dans cet article, nous verrons pourquoi target="_blank" était autrefois déconseillé, comment les standards ont évolué, et surtout quelles bonnes pratiques adopter aujourd’hui pour l’utiliser sans mettre en danger vos visiteurs.

Pourquoi target="_blank" était déconseillé

Initialement, target="_blank" n’était pas validé par les anciennes normes HTML en raison de problèmes d’accessibilité et de navigation. De plus, il exposait à des risques de sécurité, notamment le tabnabbing, où la page ouverte pouvait manipuler la page d’origine via window.opener pour rediriger l’utilisateur vers des sites malveillants. Ces limitations ont conduit à une prudence généralisée quant à son utilisation.

L’évolution des standards

Avec l’arrivée de HTML5, target="_blank" est devenu un attribut standard, reconnu et validé. Les spécifications ont évolué pour intégrer cette pratique tout en sensibilisant aux risques de sécurité associés.

Pour pallier les vulnérabilités comme le tabnabbing, il est désormais recommandé d’ajouter l’attribut rel="noopener noreferrer" en complément. Ces valeurs empêchent la page ouverte d’accéder à la fenêtre parente, protégeant ainsi l’utilisateur contre les redirections malveillantes.

Grâce à ces évolutions, utiliser target="_blank" est aujourd’hui une pratique sûre, à condition de respecter les bonnes pratiques.

Bonnes pratiques et sécurité

Pour éviter les risques liés à target="_blank", il est essentiel d’ajouter l’attribut rel="noopener noreferrer" sur les liens qui ouvrent une nouvelle fenêtre ou onglet.

• noopener empêche la page ouverte d’accéder à l’objet window.opener, bloquant ainsi les manipulations malveillantes.
• noreferrer empêche le navigateur d’envoyer l’URL de la page d’origine dans l’en-tête HTTP Referer, renforçant la confidentialité.

Cette combinaison assure que l’ouverture d’un nouvel onglet ne compromet pas la sécurité ni la vie privée des utilisateurs.

Par ailleurs, il est conseillé de n’utiliser target="_blank" que lorsque cela apporte une vraie valeur à l’expérience utilisateur, par exemple pour ouvrir des liens externes, afin d’éviter la surcharge d’onglets.

En pratique

Ci-dessous un exemple de code :

<a href="URL_EXTERNE" target="_blank" rel="noopener noreferrer">Lien externe sécurisé</a>