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 suivre 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 votre page vers une URL malveillante.

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

Échec de l'audit des destinations multi-origines Lighthouse

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

Audit Lighthouse montrant les 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> contenant l'attribut target="_blank". mais pas les attributs rel="noopener" ou rel="noreferrer".
  2. Filtrez tous les liens du même hébergeur.

Étant donné que Lighthouse filtre les liens du même hôte, Il existe un cas limite que vous devez connaître 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 continuent de s'appliquer. Toutefois, ces liens ne s'afficheront pas dans vos résultats Lighthouse.

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

Ajouter rel="noopener" ou rel="noreferrer" à chaque lien identifié dans votre rapport Lighthouse. En général, lorsque vous utilisez target="_blank", ajoutez 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 pour 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'en-tête Referer vers la nouvelle page. Voir Type de lien "noreferrer".

Consultez Partager des ressources multi-origines en toute sécurité. pour en savoir plus.

Ressources