Noopener : sécurité et performance de vos liens target=_blank avec rel=noopener

author

Boris Schapira

15 mai 2022 | 3 minutes - Temps de lecture

Last Updated: Jan 3, 2023


Supporté par tous les navigateurs (ou presque), les valeurs “_blank” et “noopener” sont encore malheureusement confondues… Prenons donc le temps de revenir sur ces valeurs, qui sont utilisées dans l’un des contrôle de Speed Analysis, et qui répondent à des enjeux de sécurité comme de performance.

L’attribut target=”_blank” sur vos liens, un problème de sécurité

Mathias Bynens l’a illustré de manière très explicite : l’utilisation d’un attribut target=”_blank” sur un lien hypertexte permet à la page web ouverte de déclencher un changement de page dans la fenêtre d’origine. Son article propose également des pages de démonstration si vous souhaitez visualiser le problème.

En bref : si vous autorisez des internautes à publier des liens sur votre site et que ces derniers utilisent l’attribut target=”_blank”, vous vous exposez à ce qu’un attaquant redirige l’internaute vers une autre page. Non pas dans l’onglet qui a été ouvert en cliquant sur le lien, mais dans l’onglet d’origine (votre site). Et ce sans aucun avertissement. Une méthode qui peut donc s’avérer très efficace pour du phishing par exemple.

Par défaut, une page a en effet accès à l’éventuelle page appelant par l’attribut window.opener, et elle peut en modifier l’attribut location, même si les 2 pages ne sont pas sur le même domaine.

L’attribut target=”_blank” sur vos liens, un problème de performance ?

Comme l’a montré Jake Archibald, les liens ouverts dans de nouvelles fenêtres sont aussi impactés en matière de performance. Ici encore, vous pourrez trouver dans l’article une page de démonstration. Le problème est le suivant : sur la plupart des navigateurs, lorsque vous ouvrez ainsi une nouvelle fenêtre ou un nouvel onglet depuis une page existante, les 2 fenêtres se retrouvent à partager le même processus système. L’utilisation commune de ce processus peut donc conduire à des interférences entre les 2, des traitements intensifs sur une fenêtre inactive pouvant impacter la fluidité de la page utilisée par l’internaute.

Résoudre les problèmes avec rel=”noopener”

Rappelons tout d’abord que la plus simple des solutions est de ne pas utiliser target=”_blank”, qui peut aller à l’encontre des bonnes pratiques d’accessibilité si l’utilisateur n’est pas informé de ce comportement (comme le rappelle le référentiel Opquast).

Si vous devez utiliser cet attribut, vous devriez alors l’accompagner d’un autre : rel=noopener. Cet attribut rendra nulle la valeur de window.opener (interdisant donc tout changement d’URL sur la page appelante).

À noter que vous pouvez également utiliser rel=noreferrer, largement supporté, qui aura le même effet que “noopener”. Mais comme son nom l’indique, il privera également le site de destination de la réception d’un en-tête HTTP Referer fournissant l’origine du trafic.

Speed Analysis en vidéo

Plongez dans les pages et les parcours pour obtenir des informations et des alertes approfondies sur les performances Web !

Voir la vidéo

Rel=”noreferrer” et rel=”noopener” sur tous vos liens ?

Si vous acceptez du contenu contributif pouvant inclure des liens (typiquement les commentaires sur les blogs), assurez-vous de ne pas utiliser de target=”_blank” ou de prendre les mesures nécessaires. Pour les liens externes dont vous avez la responsabilité, le risque de sécurité est fortement mitigé car son exploitation impliquerait que l’attaquant injecte du javascript sur une page ainsi liée. Enfin s’il s’agit de liens internes, le risque de sécurité ne se pose pas mais les enjeux de performance persistent.

Une solution plus globale est disponible avec l’en-tête HTTP Cross Origin Opener Policy (communément appelé COOP). À l’image de Content Security Policy qui régit la manière dont le navigateur doit gérer les contenus, COOP régit la manière dont les contextes de navigation doivent être transmis lors de la navigation vers des liens. L’usage d’une telle politique globale à la page permet d’éviter d’avoir à préciser un attribut sur chaque lien.

Plaire aux robots de Google 

> Optimisez les performances de votre site Web 
> Séduire les algorithmes des moteurs de recherche 

Découvrir le guide