Les liens vers des destinations multi-origines sont dangereux

Lorsque vous créez un lien vers une page d'un autre site à l'aide de l'attribut target="_blank", vous pouvez 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. Cela peut permettre à l'autre page de rediriger la vôtre vers une URL malveillante.

Ajouter rel="noopener" ou rel="noreferrer" à vos liens target="_blank" permet d'éviter ces problèmes.

Échec de l'audit Lighthouse sur les destinations cross-origin

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

Audit Lighthouse qui affiche les liens non sécurisés vers des destinations d'origine croisée.

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

  1. Rassemblez toutes les balises <a> qui contiennent l'attribut target="_blank", mais pas les attributs rel="noopener" ni rel="noreferrer".
  2. Filtrez tous les liens vers le même hôte.

Étant donné que Lighthouse filtre les liens vers le même hôte, il existe un cas limite dont vous devez vous méfier lorsque vous travaillez sur un grand site. Si une page contient un lien target="_blank" vers une autre page de votre site sans utiliser rel="noopener", les implications en termes de performances de cet audit s'appliquent toujours. Toutefois, ces liens ne s'affichent 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 garantit qu'elle s'exécute dans un processus distinct.
  • rel="noreferrer" a le même effet et empêche également l'en-tête Referer d'être envoyé à la nouvelle page.

Pour en savoir plus, consultez Partager des ressources d'origines différentes de manière sécurisée.

Ressources