Pourquoi utiliser rel='noopener' avec target='_blank'

Dans le cadre du SEO, l’attribut rel en HTML est déjà connu pour indiquer à un crawler s’il doit suivre ou non un lien :

<a href="www.google.com" rel="nofollow">Google</a>

Toutefois, un nouvel attribut a récémment nommé noopener et ce dernier intervient exclusivement lors de l’usage de target="_blank" sur un lien pour en améliorer la sécurité.

En effet, Mathias Bynens (développeur V8 chez Chrome et chercheur en sécurité) a identifié que l’ouverture d’un lien dans une nouvelle fenêtre via target="_blank" permettait à la page cible d’intéragir avec l’ensemble de la page appelante, et cela même si les domaines sont différents !

Cela s’explique par la présence d’un objet opener présent dans le contexte global de la page cible contenant le contexte global de la page appelante !

Exemple détaillé

Pour notre exemple, nous allons créer un simple fichier : index.html

// index.html
<a href="https://www.google.com/" target="_blank">Aller sur Google</a>

Ouvrez ensuite la page index.html puis cliquer sur le lien. Une nouvelle page s’ouvre alors vous amenant sur Google. Jusque là, tout est normal.

Maintenant ouvrez la console Chrome et entrez la commande window.opener, vous récupérez alors un objet JavaScript qui n’est d’autre que notre page index.html ! Pour vous le confirmer, tapez dans la console JavaScript : opener.location = "https://www.google.com/intl/fr_fr/ads/". Vous constatez alors que votre onglet contenant index.html renvoie dorénavant sur une page chez Google.

Bien que Google n’a aucun intérêt à faire cela, certaines personnes mal intentionnées (notamment sur des forums où la contribution est libre) pourrait en profiter pour renvoyer vers leurs propres pages… ou faire du phishing (https://www.wikiwand.com/fr/Hameçonnage).

La solution : rel=“noopener”

Nous allons partir de notre exemple précedent et simplement ajouter rel="noopener" dans notre lien :

<a href="https://www.google.com/" rel="noopener" target="_blank"
  >Aller sur Google</a
>

Et après avoir cliqué dessus, entrez opener.location = "https://www.google.com/intl/fr_fr/ads/" dans la console Chrome. Vous obtiendrez alors une erreur :

Support navigateur

Pour le moment, entre les principaux navigateurs Web, seul Edge fait office de mauvais élève :

Sur Chrome : extension ‘No Opener, no Phishers’

Si vous souhaitez que tous les liens target="_blank" puisse avoir un attribut rel="noopener", il existe une extension Chrome pour cela : https://chrome.google.com/webstore/detail/no-opener-no-phishers/hieejlcohhkjbpiihgphcnaaiehphike