IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

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


Sujet :

HTML

  1. #1
    Chroniqueur Actualités

    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    Mars 2013
    Messages
    8 385
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations professionnelles :
    Activité : Administrateur de base de données

    Informations forums :
    Inscription : Mars 2013
    Messages : 8 385
    Points : 196 495
    Points
    196 495
    Par défaut 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 JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    Contribuez au club : Corrections, suggestions, critiques, ... : Contactez le service news et Rédigez des actualités

  2. #2
    Membre confirmé Avatar de Max Lothaire
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2014
    Messages
    155
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Moselle (Lorraine)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2014
    Messages : 155
    Points : 578
    Points
    578
    Par défaut
    Effectivement :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 ?

  3. #3
    Expert confirmé Avatar de Zefling
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2007
    Messages
    1 168
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Avril 2007
    Messages : 1 168
    Points : 4 654
    Points
    4 654
    Par défaut
    Citation Envoyé par Max Lothaire Voir le message
    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.

  4. #4
    Membre régulier
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Août 2012
    Messages
    27
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Développeur .NET

    Informations forums :
    Inscription : Août 2012
    Messages : 27
    Points : 87
    Points
    87
    Par défaut 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')">

  5. #5
    Invité
    Invité(e)
    Par défaut 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...

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo