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