Tu te crois discret sur le web ? Détrompe-toi. Aujourd'hui, on va voir comment n'importe quel site peut récupérer un tas d'informations sur ton appareil, sans piratage, sans virus, juste en se servant du bon vieux JavaScript. Ton navigateur, c'est une vraie balance. Et crois-moi, il parle beaucoup trop. Cet article va te montrer, étape par étape, comment des scripts en apparence inoffensifs peuvent dresser un portrait-robot de ton appareil et, par extension, de toi. De ta position GPS à l'état de ta batterie, en passant par les capteurs de ton téléphone, tout y passe. Info ! Toutes les techniques présentées ici sont parfaitement légales et reposent sur des APIs publiques du navigateur. L'objectif est de t'éduquer sur ce qui est possible, pas de te pousser à faire des bêtises. La connaissance est la première étape de la protection. Alors accroche-toi. Voici 15 façons de soutirer des infos de ton appareil avec du JS. Et à la fin ? Un petit défi pour tester ce que tu as appris. On va commencer par les infos "basiques" que ton navigateur expose sans broncher. Puis on rentre dans le vif : géolocalisation, caméra, micro… les trucs qui font flipper. Et on terminera avec les capteurs et les données plus subtiles mais tout aussi révélatrices. 1. Informations de base sur l'appareil (User Agent & co) On commence gentiment avec la carte d'identité que ton navigateur distribue à qui veut l'entendre. Le User-Agent seul est une mine d'or : il révèle ton système d'exploitation, le navigateur que tu utilises et sa version. Combiné à la langue et à la résolution de l'écran, on peut déjà deviner si tu es sur un PC Windows francophone ou un iPhone dernier cri. const infoDiv = document.getElementById('basic-info');infoDiv.innerHTML = ` User-Agent : ${navigator.userAgent} Langue : ${navigator.language} Plateforme : ${navigator.platform} Résolution écran : ${screen.width}x${screen.height} Orientation : ${screen.orientation?.type || 'Non disponible'}`; 2. Adresse IP publique (via une API externe) Ton adresse IP, c'est ton adresse postale sur Internet. JavaScript ne peut pas la lire directement, mais il suffit d'une petite requête à un service externe comme ipinfo.io ou api64.ipify.org pour la récupérer. Ces services peuvent même fournir ta ville, ta région et ton fournisseur d'accès à Internet. Pratique, non ? Chargement de l'IP... fetch("https://api64.ipify.org?format=json") .then(res => res.json()) .then(data => { document.getElementById("ip-info").innerHTML = `Adresse IP publique : ${data.ip}`; }) .catch(err => { document.getElementById("ip-info").textContent = "Impossible de récupérer l'adresse IP."; }); 3. Géolocalisation précise (GPS) Là, on monte d'un cran. Si l'utilisateur clique sur "Autoriser", l'API navigator.geolocation peut accéder aux coordonnées GPS de l'appareil avec une précision redoutable, souvent à quelques mètres près. Idéal pour les services de cartographie... ou pour savoir exactement où tu te trouves. Afficher ma position function getLocation() { const geoP = document.getElementById("geo"); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(pos => { const { latitude, longitude, accuracy } = pos.coords; geoP.textContent = `Latitude : ${latitude.toFixed(4)}, Longitude : ${longitude.toFixed(4)}, Précision : ${accuracy} mètres.`; }, err => { geoP.textContent = "Accès refusé ou erreur."; }); } else { geoP.textContent = "La géolocalisation n'est pas supportée par ce navigateur."; }} 4. Accès à la caméra Oui, un site peut voir à travers tes yeux, ou du moins ceux de ta webcam. Avec l'API mediaDevices.getUserMedia, il est possible de streamer en direct le flux vidéo de la caméra. Bien sûr, une autorisation est requise. Mais qui lit vraiment les pop-ups ? navigator.mediaDevices.getUserMedia({ video: true }) .then(stream => { document.getElementById("video-stream").srcObject = stream; }) .catch(err => { document.getElementById("video-stream").style.display = 'none'; document.getElementById("video-status").textContent = `Impossible d’accéder à la caméra : accès refusé ou appareil non trouvé.`; }); 5. Accès au microphone Ce qui est vrai pour la vidéo l'est aussi pour l'audio. La même API permet d'activer le microphone et d'écouter tout ce qui se passe autour de toi. Parfait pour les applications de chat vocal, ou pour des écoutes un peu moins... avouables. Demande d'accès au micro... navigator.mediaDevices.getUserMedia({ audio: true }) .then(() => { document.getElementById("mic-status").textContent = "Accès au micro accordé (flux non utilisé)."; }) .catch(err => { document.getElementById("mic-status").textContent = "Accès au micro refusé ou appareil indisponible."; }); 6. État de la batterie Moins intrusif, mais tout aussi intéressant pour le profilage. L'API navigator.getBattery() révèle le pourcentage de batterie restant et si l'appareil est en charge. Certains géants du web ont déjà été suspectés d'ajuster leurs prix en fonction du niveau de ta batterie, pariant sur ton "désespoir" pour te faire payer plus cher ! if (navigator.getBattery) { navigator.getBattery().then(battery => { const statusDiv = document.getElementById('battery-status'); statusDiv.innerHTML = ` Niveau de batterie : ${Math.round(battery.level * 100)}% En charge : ${battery.charging ? "Oui" : "Non"}`; });} else { document.getElementById('battery-status').textContent = "L'API de la batterie n'est pas supportée.";} 7. Contenu du presse-papier (Clipboard) Tu viens de copier un mot de passe ou un message privé ? Un site peut tenter de le lire. Heureusement, les navigateurs modernes exigent une interaction de l'utilisateur (comme un clic) et une autorisation explicite pour lire le presse-papier. Mais l'écriture, elle, est souvent plus permissive. Écrire dans le presse-papierLire le presse-papier function readClipboard() { navigator.clipboard.readText().then(txt => { document.getElementById("clip-content").textContent = `Contenu lu : "${txt}"`; }).catch(err => { document.getElementById("clip-content").textContent = `Erreur de lecture : l'autorisation est probablement requise.`; });} 8. Capteurs de mouvement (Accéléromètre) Ton téléphone sait quand tu bouges, et ton navigateur aussi. Grâce à l'accéléromètre et au gyroscope, un site peut détecter les mouvements de ton appareil. C'est la base pour les jeux sur mobile ou les expériences en réalité virtuelle, mais cela peut aussi servir à analyser ton activité physique. Bouge ton téléphone pour voir les données. if ('DeviceMotionEvent' in window) { window.addEventListener("devicemotion", event => { const x = event.acceleration.x?.toFixed(2); const y = event.acceleration.y?.toFixed(2); const z = event.acceleration.z?.toFixed(2); document.getElementById("motion-data").textContent = `Accélération (X, Y, Z): ${x}, ${y}, ${z}`; });} else { document.getElementById("motion-data").textContent = "Aucun capteur de mouvement détecté.";} 9. Cookies Les bons vieux cookies. On les connaît, mais on oublie leur puissance. Accessibles en JavaScript, ils permettent de te suivre de site en site, de sauvegarder tes préférences et de construire un profil publicitaire détaillé. Un simple document.cookie suffit à les manipuler. // Écrire un cookiedocument.cookie = "username=super_spy; path=/; max-age=3600";// Lire tous les cookiesdocument.getElementById('cookie-display').textContent = `Cookies actuels : ${document.cookie}`; 10. Stockage local (localStorage et sessionStorage) Encore plus puissants que les cookies, localStorage et sessionStorage permettent de stocker de plus grandes quantités de données directement dans le navigateur, sans date d'expiration pour le premier. C'est l'endroit idéal pour un site qui veut se souvenir de toi pour très, très longtemps. localStorage.setItem("secretPersistant", "Je sais ce que tu as fait l'été dernier");sessionStorage.setItem("secretTemporaire", "Je suis là juste pour cette session");document.getElementById('storage-info').innerHTML = ` localStorage : ${localStorage.getItem("secretPersistant")} sessionStorage : ${sessionStorage.getItem("secretTemporaire")}`; 11. Type de connexion réseau L’API navigator.connection est une petite curieuse. Elle indique si tu es en Wi-Fi, 4G, 3G ou même en 2G. Utile pour un site qui veut adapter la qualité de son contenu, mais aussi pour deviner si tu es chez toi (Wi-Fi) ou en déplacement (cellulaire). const connection = navigator.connection;if (connection) { document.getElementById('network-type').textContent = `Type de connexion effectif : ${connection.effectiveType}`;} else { document.getElementById('network-type').textContent = `API de connexion non supportée.`;} 12. Taille de l'historique de session Rassure-toi, un script ne peut pas lire les URLs que tu as visitées. Ce serait une faille de sécurité énorme. Par contre, il peut savoir combien de pages tu as parcourues dans l'onglet actuel grâce à history.length. Une info anodine ? Pas tant que ça, elle peut mesurer ton niveau d'engagement sur un site. document.getElementById('history-length').textContent = `Pages visitées dans cet onglet : ${history.length}`; 13. Permissions déjà accordées Pourquoi demander une permission si elle est déjà accordée ? L'API navigator.permissions permet à un site de vérifier en silence l'état d'une autorisation (géolocalisation, notifications, micro...) avant même de la demander. C'est une façon discrète de savoir quelles portes sont déjà ouvertes. if (navigator.permissions) { navigator.permissions.query({ name: "geolocation" }).then(result => { document.getElementById("permission-status").textContent = `Statut de la permission de géolocalisation : ${result.state}`; });} else { document.getElementById("permission-status").textContent = `API des permissions non supportée.`;} 14. Orientation et inclinaison de l'appareil Plus précis que le simple "portrait" ou "paysage", l'événement deviceorientation donne les angles d'inclinaison de ton appareil sur trois axes (alpha, beta, gamma). C'est essentiel pour la réalité augmentée, mais c'est aussi une autre donnée comportementale à collecter. Incline ton téléphone pour voir les données. window.addEventListener("deviceorientation", (event) => { document.getElementById("orientation-data").textContent = `Alpha: ${event.alpha?.toFixed(1)} | Beta: ${event.beta?.toFixed(1)} | Gamma: ${event.gamma?.toFixed(1)}`;}, true); 15. Mémoire RAM et cœurs du processeur C'est la cerise sur le gâteau du fingerprinting (prise d'empreinte digitale de ton appareil). Certaines APIs expérimentales comme navigator.deviceMemory et navigator.hardwareConcurrency exposent la quantité de RAM et le nombre de cœurs logiques de ton processeur. Ces caractéristiques matérielles sont très stables et permettent de t'identifier de manière quasi-unique. document.getElementById('hardware-info').innerHTML = ` Mémoire de l'appareil (Go) : ${navigator.deviceMemory || 'Non supporté'} Processeurs logiques : ${navigator.hardwareConcurrency || 'Non supporté'}`; Conclusion : Tu n'es jamais vraiment seul Voilà, tu viens de voir comment, sans aucune autorisation spéciale pour la plupart, un simple site web peut aspirer une quantité impressionnante d'informations sur ton appareil. Et ce n'était que la partie émergée de l'iceberg. Des techniques plus avancées comme le Canvas Fingerprinting permettent d'aller encore plus loin pour créer une empreinte unique de ton navigateur. Conseil de pro : Si tu veux te protéger, la paranoïa est une bonne chose. Utilise des navigateurs axés sur la vie privée (Brave, Firefox avec des réglages stricts), installe des extensions comme uBlock Origin et Privacy Badger, et surtout, sois extrêmement méfiant envers les pop-ups d'autorisation. Défi final 🎯 Maintenant, c'est à toi de jouer. Crée une page HTML qui implémente un "tableau de bord de l'espion" en récupérant le maximum d'infos que tu viens de voir. Pas de framework, juste du JavaScript pur. Affiche tout ça dans une interface propre et lisible. Puis, envoie le lien à un ami... et observe sa réaction. Si t’as tout suivi, félicitations : bienvenue dans la team des développeurs conscients et (un peu) paranoïaques. 😈Coding Team