Les liens vers des destinations multi-origines sont dangereux

Lorsque vous ajoutez un lien vers une page d'un autre site à l'aide de l'attribut target="_blank", vous risquez d'exposer votre site à des problèmes de performances et de sécurité:

  • L'autre page peut s'exécuter sur le même processus que la vôtre. Si l'autre page exécute beaucoup de code JavaScript, les performances de votre page peuvent en pâtir.
  • L'autre page peut accéder à votre objet window avec la propriété window.opener. L'autre page risque alors de rediriger votre page vers une URL malveillante.

Ajoutez rel="noopener" ou rel="noreferrer" à vos liens target="_blank" pour éviter ces problèmes.

Échec de l'audit de destination multi-origine de Lighthouse

Lighthouse signale les liens non sécurisés vers des destinations multi-origines:

Audit Lighthouse montrant des liens non sécurisés vers des destinations multi-origines

Lighthouse utilise le processus suivant pour identifier les liens comme non sécurisés:

  1. Rassemblez toutes les balises <a> qui contiennent l'attribut target="_blank", mais pas les attributs rel="noopener" ou rel="noreferrer".
  2. Filtrez les liens associés au même hôte.

Étant donné que Lighthouse filtre les liens à hôte identique, il existe un cas particulier dont vous devez tenir compte si vous travaillez sur un site volumineux : si une page contient un lien target="_blank" vers une autre page de votre site sans utiliser rel="noopener", les conséquences de cet audit sur les performances s'appliquent toujours. Toutefois, vous ne les verrez pas dans vos résultats Lighthouse.

Améliorer les performances de votre site et prévenir les failles de sécurité

Ajoutez rel="noopener" ou rel="noreferrer" à chaque lien identifié dans votre rapport Lighthouse. En général, lorsque vous utilisez target="_blank", ajoutez toujours rel="noopener" ou rel="noreferrer":

<a href="https://examplepetstore.com" target="_blank" rel="noopener">
  Example Pet Store
</a>
  • rel="noopener" empêche la nouvelle page d'accéder à la propriété window.opener et s'assure qu'elle s'exécute dans un processus distinct.
  • rel="noreferrer" a le même effet, mais empêche également l'envoi de l'en-tête Referer à la nouvelle page. Consultez Type de lien "noreferrer".

Pour en savoir plus, consultez l'article Partager des ressources multi-origines en toute sécurité.

Ressources