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](https://developer.chrome.com/static/docs/lighthouse/best-practices/external-anchors-use-rel-noopener/image/lighthouse-audit-showing-b1f47b11d85bc.png?authuser=19&hl=fr)
Lighthouse utilise le processus suivant pour identifier les liens comme non sécurisés:
- Rassemblez toutes les balises
<a>
contenant l'attributtarget="_blank"
. mais pas les attributsrel="noopener"
ourel="noreferrer"
. - 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êteReferer
vers la nouvelle page. Voir Type de lien "noreferrer".
Consultez Partager des ressources multi-origines en toute sécurité. pour en savoir plus.