Ouvrir dans un nouvel onglet HTML : comment le faire en toute sécurité ?

Ouvrir un lien dans un nouvel onglet est une pratique courante en développement web, souvent utilisée pour préserver la page courante tout en permettant à l’utilisateur de consulter une ressource externe. Pourtant, ce geste apparemment anodin soulève des questions de sécurité, de confidentialité et d’expérience utilisateur. Cet article détaille comment utiliser target= »blank » de manière sûre, pourquoi ajouter rel, comment informer les utilisateurs, et quelles alternatives privilégier selon le contexte.

Le basique : target= »blank »

L’attribut target= »blank » indique au navigateur d’ouvrir la destination du lien dans un nouvel onglet ou une nouvelle fenêtre. Exemple simple :

blank">Visiter Exemple

Ce comportement est pratique pour des liens vers des ressources externes, des documents ou des pages d’aide. Il permet à l’utilisateur de rester sur le site d’origine sans perdre la page courante. Cependant, il existe un risque associé que l’on ne doit pas négliger.

Le risque : window.opener et reverse tabnabbing

Lorsqu’un lien s’ouvre avec target= »blank », la page cible obtient une référence vers la page parente via window.opener. Une page malveillante peut utiliser cette référence pour rediriger la page parente vers une URL de phishing ou modifier son contenu. Cette attaque est appelée reverse tabnabbing. Même si l’attaque a été popularisée il y a plusieurs années, elle reste pertinente et exploitée si aucune protection n’est mise en place.

La solution : rel= »noopener noreferrer »

Pour empêcher la page ouverte d’accéder à window.opener, ajoutez rel= »noopener ». L’attribut rel= »noreferrer » empêche en plus l’envoi de l’en-tête Referer vers la page cible, améliorant la confidentialité. Exemple recommandé :

blank" rel="noopener noreferrer">Visiter Exemple (nouvel onglet)

rel= »noopener » est suffisant sur la majorité des navigateurs modernes. rel= »noreferrer » est utile pour une compatibilité plus large et pour éviter que la page cible reçoive des informations de provenance. Notez toutefois que l’absence du referer peut impacter vos analytics et le suivi des origines de trafic.

Accessibilité et expérience utilisateur

Ouvrir un nouvel onglet change le flux de navigation. Les utilisateurs, notamment ceux utilisant des lecteurs d’écran ou des dispositifs mobiles, peuvent être surpris. Il est recommandé d’informer explicitement lorsqu’un lien ouvre un nouvel onglet, par exemple avec un indicateur textuel, un attribut title ou aria-label, ou une icône compréhensible.

Exemples d’indications :

• Ajouter « (s’ouvre dans un nouvel onglet) » dans le texte du lien lorsque c’est pertinent.
• Utiliser title ou aria-label pour fournir l’information aux lecteurs d’écran : blank » rel= »noopener noreferrer » aria-label= »Visiter Exemple, s’ouvre dans un nouvel onglet »>Visiter Exemple.
• Éviter d’ouvrir systématiquement de nouveaux onglets : privilégier l’ouverture dans le même onglet pour la plupart des liens internes afin de préserver la continuité de lecture.

Cas des applications monopage (SPA)

Pour les applications React, Vue, Angular et autres SPA, utilisez le routage interne pour les liens internes afin de préserver l’état, l’historique et les transitions sans rechargement. target= »blank » reste pertinent pour des destinations externes, fichiers à télécharger ou pages hors domaine. Si vous devez ouvrir une route interne dans un nouvel onglet pour des raisons UX, assurez-vous que l’état essentiel est accessible ou persistant (par exemple via l’URL ou stockage local).

const win = window.open('https://exemple.com', 'blank');

Attention : les bloqueurs de popups et les règles de sécurité des navigateurs peuvent empêcher window.open si l’appel n’est pas déclenché par une interaction explicite de l’utilisateur (clic, touche). De plus, la nouvelle fenêtre présentera les mêmes risques de window.opener sauf si vous définissez rel ou manipulez la référence côté fenêtre ouverte.

Liens dans les emails

Dans les emails, le JavaScript est généralement désactivé et la prise en charge des attributs peut varier selon les clients mail. target= »blank » est souvent respecté, mais rel est parfois ignoré. Dans ce contexte, privilégiez des URLs claires, des labels explicites et évitez les redirections opaques. Testez le rendu et le comportement sur Gmail, Outlook, Apple Mail et clients mobiles principaux.

• N’utilisez target= »blank » que lorsque cela apporte un bénéfice utilisateur réel.
• Ajoutez rel= »noopener noreferrer » pour les liens externes afin de protéger contre le reverse tabnabbing et réduire les fuites de referer si souhaité.
• Informez les utilisateurs via le texte du lien, title ou aria-label quand un nouvel onglet s’ouvrira.
• Privilégiez le routage interne pour les SPAs et conservez l’état essentiel dans l’URL ou le stockage persistant.
• Testez le comportement sur plusieurs navigateurs (Chrome, Firefox, Safari) et sur mobile.
• Considérez l’impact sur les analytics si vous utilisez rel= »noreferrer ».

Ouvrir un lien dans un nouvel onglet reste une option utile quand elle est utilisée à bon escient. L’ajout systématique de rel= »noopener noreferrer » protège vos utilisateurs d’attaques par reverse tabnabbing et améliore la confidentialité. Pensez aussi à l’accessibilité et à l’expérience utilisateur : informez les visiteurs lorsque l’événement modifie leur flux de navigation et limitez les ouvertures inutiles. En combinant ces bonnes pratiques, vous assurez une navigation à la fois sûre, claire et respectueuse des attentes des utilisateurs.