User agent switcher : à quoi il sert et quand l'utiliser

Ce que modifie un user agent switcher, pourquoi il ne suffit pas pour une vue mobile, le rôle des client hints et comment choisir une extension sûre.

Un user agent switcher est un outil du navigateur, en général une extension, qui modifie la chaîne user agent envoyée aux sites, pour qu’un site croie que vous utilisez un autre navigateur ou un autre appareil. Les développeurs s’en servent pour voir le contenu servi à certains navigateurs et pour vérifier la détection d’appareils. Mais changer le user agent ne suffit pas à afficher une mise en page mobile : la zone d’affichage, la taille d’écran et le ratio de pixels restent les mêmes. Pour tester sur mobile, il faut un outil qui modifie aussi ces paramètres.

Qu’est-ce qu’un user agent ?

Chaque requête de votre navigateur contient un en-tête User-Agent, une chaîne de texte qui décrit le navigateur, le moteur et le système d’exploitation. Un Chrome récent sous Windows envoie quelque chose comme :

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/<major version>.0.0.0 Safari/537.36

et Chrome sur un téléphone Android quelque chose comme :

Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/<major version>.0.0.0 Mobile Safari/537.36

L’étrange mélange de noms (« Mozilla », « AppleWebKit », « like Gecko », « Safari ») est historique : les navigateurs ont copié les chaînes des autres pour que les sites qui détectaient un navigateur précis n’excluent pas les autres. Le mot Mobile est ce que beaucoup de serveurs vérifient pour décider d’envoyer une page mobile.

User-Agent réduit et client hints

Chrome, Edge et les autres navigateurs Chromium envoient désormais un user agent réduit. La version mineure est remplacée par des zéros, la version d’Android et le modèle d’appareil sont figés sur des valeurs génériques (c’est le Android 10; K ci-dessus) et la version de Windows est fixe. Les informations détaillées sont passées dans les User-Agent Client Hints, des en-têtes comme :

Sec-CH-UA : marque et version majeure du navigateur ;
Sec-CH-UA-Mobile : ?1 sur mobile, ?0 sur desktop ;
Sec-CH-UA-Platform : le système d’exploitation.

Les serveurs peuvent demander d’autres hints (modèle, version complète) s’ils en ont besoin. JavaScript lit les mêmes informations via navigator.userAgentData.

C’est important pour les switchers. Un outil qui ne change que l’en-tête User-Agent en laissant les client hints indiquer « desktop » envoie une image contradictoire, et certains sites s’en apercevront. Les bons outils modifient les deux.

À quoi sert un user agent switcher

Vérifier la détection d’appareils. Si votre serveur, votre CDN ou une extension WordPress sert un HTML différent aux téléphones, changer le user agent vous montre cette version.
Reproduire un rapport de bug. Un visiteur dit que le site casse « sur Samsung Internet ». Utiliser ce user agent peut révéler des chemins de code basés sur le user agent.
Tester les bandeaux « navigateur non pris en charge » et les polyfills propres à un navigateur.
Voir ce que voient les robots, comme le user agent d’un crawler, pour déboguer le SEO ou des règles anti-bots.

Ce qu’un user agent switcher ne peut pas faire

Changer le user agent ne modifie pas :

la largeur de la zone d’affichage : vos media queries CSS ne réagissent pas ;
screen.width, devicePixelRatio ni la prise en charge du tactile signalés à JavaScript ;
le moteur de rendu : se faire passer pour Safari ne fait pas rendre Chrome comme WebKit.

Une fenêtre Chrome de bureau avec un user agent d’iPhone affiche donc souvent un hybride étrange : le HTML mobile du serveur étiré sur une mise en page de largeur desktop. Pour une vraie vue mobile, il faut émuler ensemble la zone d’affichage, le ratio de pixels et le user agent. C’est ce que fait le mode appareil des DevTools de Chrome, tout comme une extension de vue mobile telle que Mobile View Extension, qui applique en une étape le user agent de l’appareil, les client hints pris en charge, la taille d’écran, le ratio de pixels et le profil tactile. Les deux approches sont comparées dans extension de simulateur mobile ou DevTools.

Avez-vous vraiment besoin d’une extension ?

Pour un test ponctuel, non. Les DevTools de Chrome peuvent remplacer le user agent de l’onglet courant dans Network conditions, et le mode appareil le règle automatiquement quand vous choisissez un téléphone. Les étapes sont dans comment changer le user agent dans Chrome.

Une extension vaut la peine si vous changez souvent, voulez des règles par site, ou avez besoin que le réglage persiste quand les DevTools sont fermés.

Comment choisir une extension user agent switcher

Les user agent switchers voient et modifient chacune de vos requêtes : choisissez-les comme n’importe quelle extension à accès étendu.

Politique de confidentialité. Elle doit indiquer clairement qu’aucune donnée de navigation n’est collectée. Évitez les switchers qui injectent de la publicité ou des statistiques.
Client hints. L’extension modifie-t-elle les en-têtes Sec-CH-UA-* et navigator.userAgentData, et pas seulement la chaîne User-Agent ?
Règles par site ou par onglet, pour ne pas oublier un faux user agent sur le site de votre banque.
Préréglages à jour. D’anciens préréglages avec des chaînes Chrome 60 ou iOS 11 déclenchent des avertissements « navigateur obsolète ».
Mises à jour récentes sur le Chrome Web Store.

Confidentialité : un user agent aléatoire vous protège-t-il ?

Les extensions de « user agent aléatoire » promettent de compliquer le pistage. L’effet est limité. Les scripts de fingerprinting utilisent de nombreux signaux (taille d’écran, polices, fuseau horaire, carte graphique), et un user agent qui ne correspond pas au reste peut rendre votre navigateur plus singulier, pas moins. Pour la confidentialité, les navigateurs dotés d’une protection intégrée contre le fingerprinting font mieux que le changement de chaîne.

Questions fréquentes

Que fait un user agent switcher ?

Il modifie les informations sur le navigateur et l’appareil que votre navigateur envoie aux sites, pour qu’ils vous traitent comme un autre navigateur ou un autre appareil.

Changer le user agent affiche-t-il la version mobile d’un site ?

Il affiche le HTML que le serveur envoie aux appareils mobiles, mais pas la mise en page mobile, car la largeur de la zone d’affichage ne change pas. Utilisez l’émulation d’appareil ou une extension de vue mobile qui modifie aussi la zone d’affichage.

Est-il sûr d’utiliser un user agent switcher ?

La technique est sans danger ; le risque vient de l’extension. Choisissez-en une avec une politique de confidentialité claire, des autorisations minimales et des mises à jour récentes, et désactivez-la quand vous n’en avez pas besoin.