Article original : How to Use HTML to Open a Link in a New Tab

Les onglets sont géniaux, n'est-ce pas ? Ils permettent à chacun de nous de jongler avec plusieurs tâches en ligne en même temps.

Les onglets sont si courants maintenant que, lorsque vous cliquez sur un lien, il est probable qu'il s'ouvre dans un nouvel onglet.

Si vous vous êtes déjà demandé comment faire cela avec vos propres liens, vous êtes au bon endroit.

L'élément d'ancrage

Pour créer un lien sur une page web, vous devez envelopper un élément d'ancrage (<a>) autour du texte, puis définir son attribut href vers l'URL que vous souhaitez lier.

<p>Consultez <a href="https://www.freecodecamp.org/">freeCodeCamp</a>.</p>

Consultez freeCodeCamp.

Si vous cliquez sur le lien ci-dessus, le navigateur ouvrira le lien dans la fenêtre ou l'onglet actuel. C'est le comportement par défaut dans tous les navigateurs.

Pour ouvrir un lien dans un nouvel onglet, nous devons examiner certains des autres attributs de l'élément d'ancrage.

L'attribut Target

Cet attribut indique au navigateur comment ouvrir le lien.

Pour ouvrir un lien dans un nouvel onglet, il suffit de définir l'attribut target sur _blank :

<p>Consultez <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a>.</p>

Maintenant, lorsque quelqu'un clique sur le lien, il s'ouvrira dans un nouvel onglet, ou éventuellement dans une nouvelle fenêtre, selon les paramètres du navigateur de la personne.

Problèmes de sécurité avec target="_blank"

Je vous recommande fortement d'ajouter toujours rel="noreferrer noopener" à l'élément d'ancrage chaque fois que vous utilisez l'attribut target :

<p>Consultez <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>

Cela donne le résultat suivant :

Consultez freeCodeCamp.

L'attribut rel définit la relation entre votre page et l'URL liée. Le définir sur noopener noreferrer permet de prévenir un type de hameçonnage connu sous le nom de tabnabbing.

Qu'est-ce que le tabnabbing ?

Le tabnabbing, parfois appelé reverse tabnabbing, est une faille qui utilise le comportement par défaut du navigateur avec target="_blank" pour obtenir un accès partiel à votre page via l'API window.object.

Avec le tabnabbing, une page vers laquelle vous créez un lien pourrait provoquer la redirection de votre page vers une fausse page de connexion. Cela serait difficile à remarquer pour la plupart des utilisateurs car l'attention serait portée sur l'onglet qui vient de s'ouvrir – et non sur l'onglet d'origine avec votre page.

Ensuite, lorsque la personne revient à l'onglet avec votre page, elle verrait la fausse page de connexion et pourrait entrer ses identifiants.

Si vous souhaitez en savoir plus sur le fonctionnement du tabnabbing et sur ce que les mauvais acteurs peuvent faire avec cette faille, consultez l'article d'Alex Yumashev et celui de OWASP.

Si vous souhaitez voir un exemple de travail sécurisé, consultez cette page et son dépôt GitHub pour plus d'informations sur la faille et l'attribut rel.

En résumé

Il est facile d'utiliser HTML pour ouvrir un lien dans un nouvel onglet. Vous avez simplement besoin d'un élément d'ancrage (<a>) avec trois attributs importants :

  1. L'attribut href défini sur l'URL de la page que vous souhaitez lier,
  2. L'attribut target défini sur _blank, qui indique au navigateur d'ouvrir le lien dans un nouvel onglet/fenêtre, selon les paramètres du navigateur, et
  3. L'attribut rel défini sur noreferrer noopener pour prévenir les éventuelles attaques malveillantes provenant des pages que vous liez.

Voici à nouveau un exemple complet fonctionnel :

<p>Consultez <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>

Ce qui donne le résultat suivant dans le navigateur :

Consultez freeCodeCamp.

Merci encore d'avoir lu. Bon codage.