PROJET AUTOBLOG


Le Hollandais Volant

source: Le Hollandais Volant

⇐ retour index

[JavaScript] Voir si un visiteur est connecté à son compte Google, Twitter, Facebook, Microsoft…

jeudi 16 août 2018 à 16:56

Cette astuce montre comment savoir, en JS, si un visiteur est connecté à ses comptes sociaux. C’est tout bête, mais étonnamment ça marche à peu près partout.

Le principe

La plupart des sites ont une page de login :

https://exemple.com/login

Quand on accède à une autre page pour laquelle on doit être connecté, on est redirigé vers la page de login, dont l’URL mentionne alors l’URL ou le chemin qui avait été demandée :

https://exemple.com/login?redir=/page-demandée

L’astuce en JS, c’est de forger l’URL pour un site, en redirigeant sur une image. Typiquement, la favicon (présente sur tous les sites). Comme ça :

https://exemple.com/login?redir=/favicon.ico

On fait donc une requête AJAX et on regarde ce qui se passe :

En JS, ça veut dire que si on met l’URL forgée sur un img.src, alors :
– img.onload() fonctionne si l’utilisateur est connecté (img reçoit bien une image)
– img.error() est lancée si l’utilisation n’est pas connecté (img reçoit un document HTML).

On peut essayer, ça marche sur beaucoup de sites. Sur les liens suivants, si vous voyez l’icône, alors vous êtes connecté. Autrement, vous verrez la page de connexion du site.
Ce test peut très bien être effectué par n’importe quel site web sur tous les sites du monde. N’importe quel site web peut donc voir si vous êtes connecté ou non sur Twitter, Facebook, Amazon…

Essayer ici ?

Vous pouvez tester ici, pour 5 sites :

<script>function socialNetworkTest(){var n=document.getElementById("socialMediaList");[{url:"https://twitter.com/login?redirect_after_login=https%3A%2F%2Ftwitter.com%2Ffavicon.ico",name:"Twitter"},{url:"https://www.facebook.com/login.php?next=https%3A%2F%2Fwww.facebook.com%2Ffavicon.ico%3F_rdr%3Dp",name:"Facebook"},{url:"https://accounts.google.com/ServiceLogin?passive=true&continue=https%3A%2F%2Fwww.google.com%2Ffavicon.ico&uilel=3&hl=de&service=youtube",name:"Google"},{url:"https://login.live.com/login.srf?wa=wsignin1.0&wreply=https%3A%2F%2Fprofile.microsoft.com%2FregsysProfilecenter%2FImages%2FLogin.jpg",name:"Microsoft"},{url:"https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Ffavicon.ico%3Fid%3D1",name:"Github"}].forEach(function(e){var o=document.createElement("img"),t=document.createElement("li");o.src=e.url,o.onload=function(){t.appendChild(document.createTextNode(e.name+" : connecté")),n.appendChild(t)},o.onerror=function(){t.appendChild(document.createTextNode(e.name+" : non connecté")),n.appendChild(t)}})}

Le risque

Ici je ne fais rien de méchant. Par ailleurs, aucune information n’est envoyée à mon site.

Mais j’aurais pu.

J’aurais également pu faire ça massivement, et voir quel pourcentage de mes visiteurs sont connectés à Twitter, ou à Facebook.

Pire, si je vois que vous êtes connectés, alors il peut très bien lancer une requête sur la page de déconnexion et vous déconnecter :

http://example.com/logout?

Ce n’est pas dangereux, ça, mais c’est chiant.

Ce qui peut être dangereux, c’est si j’accède à ce genre de page :

Une solution ?

Pour l’internaute

Installez un bloqueur de requêtes, de scripts externes ou de publicité.

µBlock Origin peut bloquer toutes les requêtes vers les sites tiers.
L’extension kimetrak, elle, montre les requêtes qui sont faites.

Pour les sites

Ça me semble assez simple : quand on accède à la page de login, alors on demande systématiquement de se connecter.
Peu importe si l’utilisateur est connecté ou pas, on exige une reconnexion. Seulement après la reconnexion on procède à la redirection.

C’est ce que fait par exemple Amazon : cette astuce, même avec le bon lien (ici) ne marche pas, car Amazon demande le mot de passe qu’on soit connecté ou pas. C’est bien.
Par contre, étrangement, c’est le cas pour Amazon.FR, mais pas pour Amazon.COM (lien de test), où l’astuce décrite ici fonctionne.

Sources

Ce « problème » n’est pas nouveau. Cet article, datant de 2012, en parle déjà : Detect if visitors are logged into Twitter, Facebook or Google+. Peu de sites semblent s’être bougés, pourtant.

J’ai mentionné Amazon.FR ci-dessus. Flickr et Yahoo semblent également avoir corrigé le problème.
La requête vers Twitter semble aussi poser problème quand elle est faite en AJAX. Pour les autres sites, je n’ai pas tout testé.

Il existe aussi des scripts tout fait avec plein de sites dedans, pour voir si on est connecté : login-check.js.

Sachez que tout ce qu’on navigateur affiche dans une page web, peut finir sur les serveurs de n’importe quel site qui possède un script dans cette page. Pensez-y.

Enfin, pour voir une liste d’informations que votre navigateur sait de vous : https://lehollandaisvolant.net/tout/tools/browser/