Comment utiliser HTML pour ouvrir un lien dans un nouvel onglet

Les onglets sont super, n'est-ce pas? Ils permettent au multitâche en chacun de nous de jongler avec un tas de 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'ouvrira 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 (texte, image, etc.) dans un élément anchor ( ) et définir son hrefattribut sur l'URL vers laquelle vous souhaitez créer un lien .

Check out freeCodeCamp.

Découvrez freeCodeCamp.

Si vous cliquez sur le lien ci-dessus, le navigateur ouvrira le lien dans la fenêtre ou l'onglet en cours. Il s'agit du comportement par défaut dans chaque navigateur.

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

L'attribut cible

Cet attribut indique au navigateur comment ouvrir le lien.

Pour ouvrir un lien dans un nouvel onglet, définissez simplement l' targetattribut sur _blank:

Check out freeCodeCamp.

Désormais, lorsque quelqu'un clique sur le lien, il s'ouvrira dans un nouvel onglet, ou éventuellement une nouvelle fenêtre en fonction des 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' targetattribut:

Check out freeCodeCamp.

Cela se traduit par la sortie suivante:

Découvrez freeCodeCamp.

L' relattribut définit la relation entre votre page et l'URL liée. Le paramétrer noopener noreferrerpour éviter un type de phishing appelé tabnabbing.

Qu'est-ce que le tabnabbing?

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

Avec tabnabbing, une page vers laquelle vous créez un lien peut entraîner la redirection de votre page vers une fausse page de connexion. Ce serait difficile à remarquer pour la plupart des utilisateurs, car le focus serait sur l'onglet qui vient de s'ouvrir - pas sur l'onglet d'origine avec votre page.

Ensuite, lorsqu'une personne revient à l'onglet avec votre page, elle verra la fausse page de connexion à la place et pourrait entrer ses informations de connexion.

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

Si vous souhaitez voir un coffre - fortexemple de travail, consultez cette page et son dépôt GitHub pour plus d'informations sur l'exploit et l' relattribut.

En résumé

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

  1. L' hrefattribut défini sur l'URL de la page vers laquelle vous souhaitez créer un lien
  2. L' targetattribut défini sur _blank, qui indique au navigateur d'ouvrir le lien dans un nouvel onglet / fenêtre, en fonction des paramètres du navigateur
  3. L' relattribut défini sur noreferrer noopenerpour empêcher d'éventuelles attaques malveillantes à partir des pages auxquelles vous accédez

Encore une fois, voici l'exemple de travail HTML:

Check out freeCodeCamp.

Ce qui entraîne la sortie suivante dans le navigateur:

Découvrez freeCodeCamp.

Merci encore d'avoir lu. Bon codage.