Un développeur web front-end recommande l'utilisation de "rel=noopener"

Un développeur web front-end recommande l'utilisation de "rel=noopener"
pour empêcher les attaques d'hameçonnage lancées en se servant du window.opener

En HTML, l’attribut “rel” peut être utilisé sur les balises <a> (qui permet de créer un lien hypertexte pointant vers un document en spécifiant l'URL de celui-ci au niveau de l'attribut "href” et qui permet également de définir des ancres au sein d'un document et les liens pour y accéder), <area> (qui permet de définir une zone particulière d'une image et peut lui associer un lien hypertexte) et <link> (qui permet de définir l'emplacement d'un fichier qui sera accessible au sein de la page où elle est déclarée couramment utilisée pour mettre en relation d’autres documents comme les feuilles de style).

Dans ces différentes balises, il est utilisé pour détailler la relation existante entre le document courant et le document qui sera ouvert par le lien et il prend pour valeur des éléments d’une liste de différentes relations dont les valeurs sont séparées par des virgules (par exemple “alternate”, “author”, “bookmark”, “help”, “license”, “next”, “nofollow”, “noreferrer”, “prefetch”, “prev”, “search”, “tag”).

Mathias Bynens, un développeur web front-end dans la ville de Termonde en Belgique, a voulu partager avec la communauté des développeurs web les bienfaits de l’une des valeurs de l’attribut “rel”, notamment “noreferrer” qui permet entre autres de résoudre un problème, mais lequel ?

En guise de démonstration, dans un billet blog il a proposé une petite expérience. Bynens propose les URL index.html et index/malicious.html. En définissant un lien vers la seconde URL avec l’attribut “target” qui avec la valeur “_blank”, cela va déclencher l’ouverture de la page cible dans une nouvelle fenêtre (dans ce cas la page malicious.html). Pour rappel, lorsqu'une fenêtre est ouverte depuis une autre fenêtre, elle conserve une référence à cette première fenêtre dans window.opener. Si la fenêtre courante n'a pas été ouverte par une autre fenêtre, la méthode renvoie null.

Bynens note que « le document malicious.html dans cette nouvelle page a l’élément windows.opener qui pointe vers l’élément window du document que vous regardez actuellement, c’est-à-dire index.html. Ce qui signifie que lorsque l’utilisateur clique sur le lien, malicious.html a un contrôle total sur l’objet window du document ». Dans le cas d’espèce, malicious.html vient remplacer l’onglet contenant index.html par index.html#hax, qui affiche un message caché.

« Ceci est un exemple relativement inoffensif, mais le lien aurait pu rediriger vers une page d’hameçonnage conçue pour ressembler à la vraie page index.html, demandant des informations de connexion. L'utilisateur ne l’aurait probablement pas remarqué, parce que l'accent est mis sur la page malveillante dans la nouvelle fenêtre tandis que la redirection se passe en arrière-plan. Cette attaque pourrait être encore plus subtile en ajoutant un retard avant de rediriger vers la page de phishing en arrière-plan », a-t-il avancé.

Dans cet exemple, index.html et index/malicious.html ont la même origine. Mais Bynens a indiqué qu’il est possible d’effectuer la même attaque avec des origines différentes.

Que faire pour empêcher que les pages n’abusent de window.opener ? Bynens recommande simplement de se servir de “rel=noopener”, « cela va permettre de vous assurer que window.opener a la valeur “null” sur Chrome 49 et Opera 36. Pour les navigateurs plus anciens, vous pouvez vous servir de “rel=noopener” qui va également désactiver l’en-tête HTTP “Refer”, ou alors vous servir de ce script JavaScript qui va potentiellement activer le bloqueur de popup
Code:

1 2 3 var otherWindow = window.open(); otherWindow.opener = null; otherWindow.location = URL;
Ne vous servez pas de “target=_blank” (ou tout autre “target” qui ouvre un nouveau contexte de navigation) en particulier pour les liens dans le contenu généré par l’utilisateur, à moins que vous n’ayez une bonne raison ».

Il a déjà averti les éditeurs de navigateurs dans des rapports de bogues. Le problème semble corrigé du côté de Chrome et Opera, mais pas encore chez Firefox, Safari et Edge.

Source : billet Mathias Bynens

Effectivement :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test</title>
    </head>
    <body>
        <p id="test"> text<p>
        <p><a href="page_mechant.html">lien</a></p>
 
    </body>
</html>

qui point sur

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test</title>
    </head>
    <body>
 
        <script>
            var win = window.opener;
            win.document.getElementById("test").innerHTML = "<strong> yolo </strong>";                                                                                                                         
        </script>
    </body>
</html>

modifie la première page.

J'ai une question du coup : qu'elle était l'utilité de "window.opener" au départ ? Que l'on puisse conserver une référence ver la page précédente, je veux bien, mais vers le DOM ?

Citation:

Envoyé par Max Lothaire

J'ai une question du coup : qu'elle était l'utilité de "window.opener" au départ ? Que l'on puisse conserver une référence ver la page précédente, je veux bien, mais vers le DOM ?

Ouvrir une page (popup à l'ancienne) qui permet interagir avec la page mère : changer des valeurs, changer des éléments, sauf que les popups ça tend à mourir avec l'utilisation des onglets. Surtout que <dialog> devrait l'achever, même si la popup peut encore avoir des utilités dans ces cas devenus assez rares aujourd'hui.

Après, si le site « méchant » c'est sur un domaine différent, pour moi “window.opener” devrait être forcement à “null” ou “undefined”, si ce n'est pas le cas je dirais qu'il y a un problème du côté des navigateurs. Sur un même domaine, c'est un problème à la charge de celui qui a le site. :aie:

Chrome

A noter que sous Chrome (contrairement à IE et Firefox), window.opener sera null si le lien est de la forme <a href="page_mechante.html">.
Cela fonctionnera par contre avec <a onclick="window.open('page_mechante.html')">

Window.open vs SPA

slt,
on est en 2023...en lisant ce post, je suis surpris de ne pas voir plus de participations. ou
bien tout le monde est passé à la SPA. :)
2016...2023...