logo javascript

A quoi ça sert ?

Tous les développeurs front-end connaissent l’attribut target=_blank, bien utile pour ouvrir un lien dans un nouvel onglet ou une nouvelle fenêtre du navigateur.

Outre les difficultés de navigation que cela peut impliquer pour le visiteur, il est alors possible via javascript de modifier le contenu de la fenêtre source à partir de la nouvelle fenêtre via la propriété window.opener.

En effet, window.opener retourne une référence à l’objet window de la fenêtre source et permet ainsi par exemple de manipuler le document de celle-ci.

 

window.document.write(‘Texte écrit dans la nouvelle fenêtre !’);

window.opener.document.write(‘Texte écrit dans la fenêtre d’origine !’);

 

Il en va évidemment de même si l’on utilise la méthode window.open() pour ouvrir une nouvelle fenêtre en lieu et place de l’attribut target, mais son utilisation est vivement conseillé (nous allons y revenir !).

Limitations et risques

La propriété window.opener est sujette au standard CORS et ne peut donc être utilisée sur un domaine différent de la page d’origine.

En revanche la propriété window.opener.location qui permet de récupérer et modifier l’url de la page parent est accessible quelque soit l’origine.

Vous l’aurez deviné, ceci peut permettre à des propriétaires de sites mal intentionnés de rediriger une page d’origine (qui n’est plus directement visible dans le navigateur, car vous avez changer de page !) vers une autre url, comme par exemple un site de phishing qui ressemblerait comme deux gouttes d’eau à votre site mais qui contiendrais un formulaire demandant à l’utilisateur de renseigner des informations confidentielles !

Quelques recommandations

Tout d’abord, je conseil de limiter au maximum l’utilisation l’attribut target=_blank sur les liens de vos sites.

Celui-ci devrait être utilisé uniquement pour les liens externes à votre site, dans un soucis de navigation principalement car je crois que le choix devrait revenir à l’utilisateur d’ouvrir un lien de votre site dans un nouvel onglet ou non, et aussi car même si l’impact sur le SEO n’a pour l’instant pas été démontré, il est évident que les robots des moteurs de recherche peuvent détecter ces attributs et ainsi « savoir » que vous souhaitez forcer l’internaute à naviguer de telle manière sur votre site et il n’est pas impossible que cette pratique soit sanctionnée à l’avenir.

Dans le cas où vous devriez l’utiliser, il existe plusieurs solutions pour se protéger :

  • L’attribut rel=noopener placé sur vos liens assure window.opener = null sur Chrome et Opéra
  • En utilisant window.open() au lieu de target=_blank, vous pouvez modifier la valeur de window.opener pour la nouvelle fenêtre :

    var newWindow = window.open(url);
    newWindow.opener = null;