Analyseur User Agent : Décoder les informations du navigateur et de l'appareil

31 mars 2026 · 12 min de lecture

Comprendre les User Agents

Chaque fois que vous visitez un site web, votre navigateur envoie un petit morceau de texte appelé « chaîne user agent ». Cette chaîne dresse un portrait de votre navigateur, de votre système d'exploitation et de sa version. Ce n'est pas du charabia aléatoire — chaque partie de la chaîne a son rôle.

Imaginez être une application web. Vous voudriez savoir si le visiteur utilise Chrome ou Safari, n'est-ce pas ? Cela aide les sites web à présenter le contenu d'une manière qui correspond aux capacités du navigateur. Par exemple, un site pourrait désactiver les animations pour les navigateurs qui ne les prennent pas bien en charge, améliorant ainsi les performances et l'expérience utilisateur.

Un autre élément vital est le système d'exploitation. Les sites web peuvent offrir différentes fonctionnalités selon qu'ils ont affaire à des utilisateurs Windows ou Mac. Par exemple, si une fonctionnalité n'est compatible qu'avec la dernière version de MacOS, connaître le système d'exploitation peut aider un site web à résoudre des problèmes ou à informer directement l'utilisateur des incompatibilités potentielles.

Comprendre le type d'appareil de l'utilisateur — comme un téléphone ou une tablette — c'est comme lire la salle avant de faire un discours. C'est une clé essentielle pour adapter efficacement votre approche. Les utilisateurs mobiles attendent des interactions différentes de celles des utilisateurs desktop, et les décisions de conception responsive reposent souvent sur une détection précise de l'appareil.

Qu'est-ce qu'un analyseur User Agent ?

Voici l'analyseur user agent. Il récupère cette chaîne et lui donne du sens pour vous. Considérez-le comme un décodeur pour déterminer quel navigateur et quel appareil quelqu'un utilise.

Ce n'est pas juste un truc technique de geek. C'est super utile pour l'analyse, la personnalisation des expériences utilisateur et la correction d'erreurs. Considérez que 72 % des internautes abandonneront complètement un site web s'il n'a pas l'air bien sur leur appareil. C'est là que connaître l'appareil de votre utilisateur devient crucial.

Un analyseur user agent prend une chaîne brute comme celle-ci :

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Et la transforme en données structurées et exploitables :

• Navigateur : Chrome 121.0.0.0
• Système d'exploitation : Windows 10
• Type d'appareil : Desktop
• Architecture : 64-bit

L'analyseur fait le gros du travail de correspondance de motifs, d'extraction de version et de classification d'appareils. Sans lui, vous seriez coincé à écrire des expressions régulières complexes et à maintenir des listes interminables de signatures de navigateurs — un cauchemar qu'aucun développeur ne veut affronter.

Pourquoi l'analyse User Agent est importante

Voici pourquoi les développeurs et les entreprises s'appuient sur l'analyse user agent :

• Analyse et rapports : Comprendre les données démographiques de votre audience à un niveau technique
• Détection de fonctionnalités : Servir les fonctionnalités appropriées selon les capacités du navigateur
• Suivi de bugs : Identifier plus rapidement les problèmes spécifiques aux navigateurs
• Optimisation du contenu : Livrer des images, vidéos et mises en page adaptées à l'appareil
• Sécurité : Détecter le trafic de bots suspects et les scrapers automatisés
• Tests A/B : Segmenter les utilisateurs par navigateur ou appareil pour des expériences ciblées

Anatomie d'une chaîne User Agent

Les chaînes user agent suivent un format semi-standardisé, bien qu'elles soient devenues de plus en plus complexes au fil des ans. Décomposons les composants que vous rencontrerez généralement.

La structure de base

La plupart des chaînes user agent contiennent ces éléments :

1. Jeton de produit : Commence généralement par « Mozilla/5.0 » pour des raisons historiques
2. Informations de plateforme : Détails du système d'exploitation et de l'architecture entre parenthèses
3. Informations sur le moteur : Le moteur de rendu (comme WebKit ou Gecko)
4. Informations sur le navigateur : Le nom et la version réels du navigateur

Voici un exemple concret disséqué :

Mozilla/5.0 (iPhone; CPU iPhone OS 17_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.2 Mobile/15E148 Safari/604.1

Motifs courants selon les navigateurs

Différents navigateurs ont leurs propres particularités dans la façon dont ils formatent les chaînes user agent. Voici quelques exemples :

Chrome sur Windows :

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Firefox sur macOS :

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:122.0) Gecko/20100101 Firefox/122.0

Edge sur Windows :

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36 Edg/121.0.0.0

Vous remarquez que Chrome et Edge se ressemblent presque ? C'est parce qu'Edge est maintenant construit sur Chromium. La seule différence est le jeton « Edg » à la fin.

Comment décoder les chaînes User Agent

Décoder manuellement les chaînes user agent est fastidieux et sujet aux erreurs. C'est pourquoi utiliser un analyseur ou un outil dédié est l'approche intelligente. Explorons les méthodes manuelles et automatisées.

Analyse manuelle (non recommandée)

Vous pourriez écrire des expressions régulières pour extraire les informations, mais cette approche présente de sérieux inconvénients :

• Les chaînes user agent changent fréquemment à mesure que les navigateurs se mettent à jour
• De nouveaux appareils et navigateurs émergent constamment
• Les cas particuliers et variations sont nombreux
• La maintenance devient un travail à temps plein

Voici un exemple simple de ce à quoi pourrait ressembler l'analyse manuelle en JavaScript :

const userAgent = navigator.userAgent;

// Détecter le navigateur (très simplifié)
let browser = 'Unknown';
if (userAgent.includes('Firefox')) browser = 'Firefox';
else if (userAgent.includes('Edg')) browser = 'Edge';
else if (userAgent.includes('Chrome')) browser = 'Chrome';
else if (userAgent.includes('Safari')) browser = 'Safari';

// Détecter l'OS (très simplifié)
let os = 'Unknown';
if (userAgent.includes('Windows')) os = 'Windows';
else if (userAgent.includes('Mac')) os = 'macOS';
else if (userAgent.includes('Linux')) os = 'Linux';
else if (userAgent.includes('Android')) os = 'Android';
else if (userAgent.includes('iOS')) os = 'iOS';

Ce code est fragile et rate d'innombrables cas particuliers. Ne l'utilisez pas en production.

Utiliser un outil d'analyse User Agent

La meilleure approche est d'utiliser un analyseur dédié. Notre outil Analyseur User Agent fournit une analyse instantanée et précise sans aucun codage requis.

Collez simplement une chaîne user agent et obtenez :

• Nom et version du navigateur
• Système d'exploitation et version
• Type d'appareil (desktop, mobile, tablette)
• Marque et modèle de l'appareil (quand disponible)
• Détails du moteur de rendu

C'est parfait pour une analyse rapide, le débogage ou pour comprendre ce que vos utilisateurs utilisent réellement pour accéder à votre site.

Utiliser des bibliothèques d'analyse

Pour l'analyse programmatique dans vos applications, plusieurs excellentes bibliothèques existent :

JavaScript/Node.js :

• ua-parser-js - Léger et largement utilisé
• bowser - API moderne avec support TypeScript
• platform - Simple et fiable

Python :

• user-agents - Bibliothèque d'analyse complète
• ua-parser - Port du populaire ua-parser

PHP :

• WhichBrowser/Parser - Base de données d'appareils étendue
• donatj/phpuseragentparser - Option légère

Implémenter l'analyse User Agent

Examinons des exemples d'implémentation pratiques dans différents langages de programmation et frameworks.

Implémentation JavaScript

En utilisant la bibliothèque populaire ua-parser-js :

import UAParser from 'ua-parser-js';

const parser = new UAParser();
const userAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36...';

parser.setUA(userAgent);

const result = parser.getResult();

console.log(result.browser.name);    // "Chrome"
console.log(result.browser.version); // "121.0.0.0"
console.log(result.os.name);         // "Windows"
console.log(result.os.version);      // "10"
console.log(result.device.type);     // undefined (desktop)

Dans une application web, vous pouvez accéder directement à l'agent de l'utilisateur actuel :

const parser = new UAParser(navigator.userAgent);
const result = parser.getResult();

// Personnaliser l'expérience selon l'appareil
if (result.device.type === 'mobile') {
  // Charger les ressources optimisées pour mobile
  loadMobileUI();
} else {
  // Charger l'expérience desktop
  loadDesktopUI();
}

Implémentation côté serveur (Node.js/Express)

Analyser les user agents des requêtes entrantes :

import express from 'express';
import UAParser from 'ua-parser-js';

const app = express();

app.get('/api/device-info', (req, res) => {
  const parser = new UAParser(req.headers['user-agent']);
  const result = parser.getResult();
  
  res.json({
    browser: result.browser,
    os: result.os,
    device: result.device
  });
});

// Middleware pour ajouter l'UA analysé à toutes les requêtes
app.use((req, res, next) => {
  req.userAgent = new UAParser(req.headers['user-agent']).getResult();
  next();
});

Implémentation Python

En utilisant la bibliothèque user-agents :

from user_agents import parse

user_agent_string = 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_2 like Mac OS X)...'
user_agent = parse(user_agent_string)

print(user_agent.browser.family)  # "Mobile Safari"
print(user_agent.browser.version_string)  # "17.2"
print(user_agent.os.family)  # "iOS"
print(user_agent.os.version_string)  # "17.2"
print(user_agent.is_mobile)  # True
print(user_agent.is_tablet)  # False
print(user_agent.is_pc)  # False

Implémentation PHP

En utilisant WhichBrowser/Parser :

<?php
require 'vendor/autoload.php';

use WhichBrowser\Parser;

$userAgent = $_SERVER['HTTP_USER_AGENT'];
$result = new Parser($userAgent);

echo $result->browser->name;     // "Chrome"
echo $result->browser->version;  // "121.0"
echo $result->os->name;          // "Windows"
echo $result->os->version;       // "10"
echo $result->device->type;      // "desktop"

if ($result->isMobile()) {
    // Servir du contenu mobile
}
?>

📚 You May Also Like