Qu’est-ce que le tabnabbing et comment pouvez-vous protéger votre site Elementor contre cela ?


Je suis récemment tombé sur le terme « tabnabbing ».

En bref, le tabnabbing est une attaque de phishing qui manipule des pages Web. Cela peut nuire à la fois à votre site Web (et à sa réputation) et à vos visiteurs.

Naturellement, je voulais en savoir plus sur la façon dont nous, en tant que propriétaires de sites Web, pouvons aider à protéger nos visiteurs. J’ai donc creusé un peu…

Dans ce court article, j’expliquerai plus en détail ce qu’est le tabnabbing et ce que vous pouvez faire pour l’atténuer.

Qu’est-ce que le Tabnabbing de toute façon ?

Le tabnabbing est une attaque de phishing qui peut se produire lorsqu’un visiteur du site clique sur un lien qui s’ouvre dans un nouvel onglet ou une nouvelle fenêtre. Cette action permet aux pirates de placer une redirection vers un site en double qui est totalement sous leur contrôle.

Quel est le point de tabnabbing?

L’objectif ici est assez simple. Le pirate informatique reliera les visiteurs à un site en double dans l’espoir d’accéder aux informations de connexion et à d’autres informations sensibles.

Le JavaScript dans le nouvel onglet peut faire tout ce que le JavaScript normal peut faire. Il peut manipuler la page, modifier des données, envoyer des demandes, lire des cookies pour ce site, etc. Il peut également obtenir des détails et apporter des modifications à la fenêtre parente. Par exemple, il peut rediriger la page d’origine vers une fausse (qui semble légitime) et demander aux visiteurs leurs informations d’identification.

Pour des raisons évidentes, cela peut être très dangereux.

Que pouvez-vous faire pour empêcher le tabnabbing ?

En tant que visiteurs du site, empêcher le tabnabbing est difficile car il résulte rarement du fait qu’une victime clique sur un lien qui semble suspect. Cependant, en tant que créateur de site Web, vous pouvez vérifier certaines choses.

Rel = « noopener »

Avant tout, assurez-vous toujours que vos liens externes pointent vers des sources fiables. Deuxièmement, les liens vers des sites externes qui s’ouvrent dans un nouvel onglet doivent généralement toujours avoir un rel="noopener" attribut. Cela rend le nouvel onglet opener pas être défini, et ainsi, le JavaScript n’aura pas accès à l’onglet qui l’a ouvert.

Rel = « noreferrer »

De même, en ajoutant rel="noreferrer" à un lien indique au navigateur de ne pas indiquer au serveur du site Web du nouvel onglet de quelle page vient le visiteur, en omettant le referrer.

Nous avons contacté un certain nombre de plateformes d’affiliation pour confirmer si oui ou non le rel="noreferrer" attribut affecterait le suivi. Voici ce qu’on nous a dit :

[Affiliate links with this attribute will be] impacté lors de l’utilisation du module complémentaire pro Suivi de lien direct car il s’appuie sur l’URL de référence à fournir pour créditer l’affilié de crédit. Sinon, les cookies devraient toujours pouvoir être ajoutés au navigateur du visiteur, c’est ainsi que l’affilié_id est suivi sur le site et utilisé lorsqu’un achat/une conversion est effectué.

AffiliéWP

L’utilisation de cet attribut ne devrait pas avoir d’impact sur la précision de notre suivi.

PartagerASale

Si le client a utilisé un lien de suivi de partenaire valide, l’action sera toujours attribuée même si l’URL du référent est nulle. Aucun domaine référent signifie qu’il s’agissait d’un « trafic direct ». Le trafic direct, c’est quand quelqu’un tape simplement une URL dans son navigateur Web. Cela est probablement dû au fait que des personnes ont copié le lien de suivi des partenaires et l’ont collé dans leur navigateur Web, ce qui est probablement le cas s’ils prennent le lien d’une publication Facebook. Vous ne trouverez pas toujours un domaine référent dans cette section car il dépend de la méthode utilisée par le client pour générer l’action.

Impacter

Pour résumer, en général, l’attribut noreferrer ne devrait pas affecter vos liens d’affiliation. Cependant, il peut y avoir des circonstances où cela se produit, alors assurez-vous de vérifier auprès de votre partenaire affilié lors de la définition des attributs.

WordPress

L’éditeur Gutenberg (ou éditeur de blocs) définit automatiquement le rel="noopener noreferrer" à tous les liens qui sont configurés pour s’ouvrir dans un nouvel onglet de navigateur. WordPress a introduit cette fonctionnalité spécifiquement pour remédier aux vulnérabilités de sécurité décrites ci-dessus.

Voici un exemple de ce à quoi ressemblerait un lien externe en HTML :

<p><strong><a href="https://www.wpmayor.com/" target="_blank" rel="noreferrer noopener">WP Mayor</a></strong></p>

Élémentor

Malheureusement, Elementor ne définit pas ces attributs automatiquement. Si vous créez ou exécutez votre site Web avec ce constructeur de pages populaire, il est assez facile de l’ignorer. Cependant, il existe une solution de contournement.

Lors de la création d’un lien vers une source externe dans Elementor, cliquez sur l’icône d’engrenage à droite de la Lien domaine. Cela ouvre le Attributs personnalisés section dans le widget Elementor.

Ici, ajoutez rel|noopener noreferrer et enregistrez votre travail.

Ajout d'attributs aux liens externes dans Elementor.

Sur le front-end, le code source révèle que le rel="noopener noreferrer" les attributs ont été attribués.

Code source

Nous avons contacté Elementor pour avoir un aperçu de leurs réflexions sur le tabnabbing. Voici quoi Shilo Eish Yemini, chef de produit de l’éditeur @ Elementor dû dire :

La raison pour laquelle Elementor n’a pas ajouté ce comportement par défaut jusqu’à présent est d’éviter de nuire aux sites Web existants sans leur consentement et d’endommager potentiellement le suivi de ces sites.

À partir de Web.dev:
À partir de la version 88 de Chromium, les ancres avec target= »_blank » obtiennent automatiquement le comportement noopener par défaut.

Comme mentionné dans [this] article intéressant, nous permettons aux utilisateurs d’ajouter ces attributs `rel` manuellement. Cela étant dit, nous sera ajouter bientôt l’attribut `noopener` à tous les liens externes, afin de s’assurer qu’aucun visiteur du navigateur hérité ne sera affecté. Nous n’ajouterons pas automatiquement le « noreferrer » pour éviter les problèmes de suivi sur les sites existants, et pour la raison qu’ils servent tous les deux à des fins similaires.

Résumé

Si vous utilisez Elementor, je vous encourage à réviser vos en-têtes, pieds de page, barres latérales, annonces et modaux pour vous assurer que les liens vers des pages tierces ont la noopener et noreferrer valeurs dans le rel attribut.

Cela vous protégera non seulement, vous et votre site Web, mais également vos visiteurs.

Partagez cet article

Newsletter

Inscrivez-vous à notre newsletter pour profiter de toutes nos astuces !

Laissez une réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *