browsers.jpg C’est marrant quand on veut fabriquer quelque chose sur un sujet, on en apprend énormément sur le sujet lui-même. Par exemple, je veux faire un petit outil qui affiche à l’écran le nom et la version du navigateur et de l’OS du visiteur à partir de l’user-agent. Très simple pensais-je… Bah non !

L’user-agent, c’est une donnée qu’un navigateur envoie au site qu’il visite et contenant des informations comme son nom et sa version.

Ainsi, Firefox 19 sous Linux envoi ça :
Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:19.0) Gecko/20100101 Firefox/19.0

On retrouve diverses informations, comme le nom « Firefox », sa version (19) ainsi que « Linux ». Tout irait bien, s’il n’y avait que ça : car on voit aussi tout un tas d’autre informations. À quoi elles servent ? Vous allez le voir juste après. Pour l’instant, reconnaissez seulement que l’user-agent de Firefox est assez bordélique. Rassurez-vous, il en va de même pour tous les navigateurs : IE, Chrome, Opera… Tous affichent un user-agent bordélique !

Il n’en a pourtant pas toujours été ainsi : quand on regarde l’histoire de ces user-agent (UA) et son évolution depuis le premier navigateur graphique au monde — NCSA Mozaic — il y a plus de 20 ans, on voit que les premiers navigateurs affichaient quelque chose de simple. NCSA-Mozaic 2.0 sur Windows 3.1 affichait alors :
NCSA_Mosaic/2.0 (Windows 3.1)

C’était cool : une information simple et facile à lire.

La raison qui fait que l’UA est devenu bordélique avec le temps est historique. Cette page, History of the browser user-agent string, écrite par Aaron Andersen explique ce qui s’est passé.
Le texte semble plutôt humoristique, et il l’est, mais on comprend tout très vite et très bien.

Je me permet une traduction libre du texte ici :

Au commencement [1992] il y avait le navigateur NCSA Mosaic.
Il affichait les images en plus du texte et tout le monde était très heureux.

Mosaic s’identifiait comme :
NCSA_Mosaic/2.0 (Windows 3.1)

Peu de temps après arriva un nouveau navigateur appelé Mozilla, raccourcissement de « Mosaic Killer ».
Mosaic n’était pas du tout amusé de cela et Mozilla a dû changer de nom pour Netscape. Ce dernier s’identifia comme
Mozilla/1.0 (Win3.1)

Puis tout le monde était à nouveau très heureux.

Mais Netscape supportait l’affichage de frames [cadres HTML], et les frames devinrent très populaire. Mosaic ne supportait pas les frames et donc naquit la pratique de la détection de l’user-agent : les sites web envoyaient les frames à Mozilla et ne les envoyaient pas aux autres.

Et Netscape se dit « moquons nous un peu de Microsoft, et faisons référence à Windows comme un “pilote pour matériel mal débuggé” »…
Microsoft était furieux, et Microsoft conçu son propre navigateur qu’ils appelèrent Internet Explorer, en espérant qu’il deviendrait un « Netscape Killer ».

Internet Explorer supportait bien les frames, mais comme il n’était pas Mozilla, les sites ne les lui donnaient pas…
Microsoft s’impatienta et ne voulu pas attendre que les webmasters mettent à jour leur site. Du coup Internet Explorer, étant en fin de compte « compatible Mozilla », se fit passer pour Mozilla et s’identifia ainsi :

Mozilla/1.22 (compatible; MSIE 2.0; Windows 95)

Et Internet Explorer recevait bien les frames, et Microsoft était content, mais les webmasters assez confus.
Et Microsoft vendit IE avec Windows, et le rendit mieux que Netscape, et ce fut la guerre pour qui avait le meilleur navigateur. Et finalement, Netscape mourut et Microsoft était vraiment très heureux.

Mais Netscape ressuscita en tant que Mozilla ; Mozilla construit Gecko, et Mozilla s’identifia comme :
Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.1) Gecko/20020826


… et Gecko était le moteur de rendu des pages, et Gecko était bon !

Mozilla devint finalement Firefox et se nomma :
Mozilla/5.0 (Windows; U; Windows NT 5.1; sv-SE; rv:1.7.5) Gecko/20041108 Firefox/1.0

… et Firefox était très bon !

Et Gecko était repris par d’autres navigateurs qui se nommèrent par exemple « Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.7.2) Gecko/20040825 Camino/0.8.1 » pour l’un ou « Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.8.1.8) Gecko/20071008 SeaMonkey/1.0 » l’autre : chacun d’eux prétendaient être compatibles Mozilla et tous tournaient avec Gecko.

Gecko était bon et IE ne l’était pas et la détection de l’user-agent renaissait : alors, Gecko recevait le bon code et les autres navigateurs ne le recevaient pas.

Les utilisateurs de Linux étaient alors bien tristes car ils avaient construit le navigateur Konqueror, dont le moteur de rendu était KHTML, et qu’ils pensaient être aussi bon que Gecko. Mais il n’était pas Gecko et ne recevait donc pas les bonnes pages.

Konqueror déclara être « comme Gecko » puis pour avoir les bonnes pages, il s’identifia comme Gecko :
Mozilla/5.0 (compatible; Konqueror/3.2; FreeBSD) (KHTML, like Gecko)

… et il y avait beaucoup de confusion…

Puis Opera [un autre navigateur] déclara « nous devrions laisser le choix à l’utilisateur concernant le navigateurs dont il doit prendre le nom ! » et Opera créa un menu de choix et il s’identifia selon le choix de l’utilisateur :
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; en) Opera 9.51
Mozilla/5.0 (Windows NT 6.0; U; en; rv:1.8.1) Gecko/20061208 Firefox/2.0.0 Opera 9.51
Opera/9.51 (Windows NT 5.1; U; en)

C’est alors qu’Apple construit Safari, et repris KHTML en ajoutant plein de bonnes choses, et repris finalement le projet tout entier et l’appela WebKit. Mais ils voulaient quand même les pages écrites pour KHTML et donc Safari se nommait :
Mozilla/5.0 (Macintosh; U; PPC Mac OS X; de-de) AppleWebKit/85.7 (KHTML, like Gecko) Safari/85.5

… et la confusion était encore plus grande…

Entre temps Microsoft avait très peur de Firefox et Internet Explorer revint et se nommait alors Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0) et il affichait le bon code… mais seulement si les Webmasters le voulaient bien !

Et enfin Google construit Chrome, et Chrome utilisait WebKit, comme Safari, et il voulait les pages destinées à Safari et donc s’identifia comme Safari.

Donc Chrome utilisait Webkit, en prétendant être Safari.
WebKit se déclara comme KHTML.
Ce dernier s’affichait être comme Gecko
… et tous les navigateurs se faisaient passer pour Mozilla.

Chrome se nomma donc :
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

… et l’user-agent était devenu une gros foutoir pratiquement inutile, et tout le monde prétendait être tous les autres et la confusion était à son comble…


Voilà un peu l’histoire de quelque chose de simple devenant un véritable bordel impossible à gérer. Tout ça parce que d’un côté les navigateurs ne sont pas tous égaux en fonctionnalités non standards, et de l’autre parce que les webmaster voulaient utiliser des choses proposées par un navigateur en particulier et pas les autres…

Moi ça me fait rire, parce que c’est assez marrant mais aussi parce que c’est quand même assez vrai : certaines choses deviennent de plus en plus compliqués à cause de patchs et de reprises dans tous les sens.

Malheureusement ceci pose beaucoup de problèmes : les sites qui ont encore des systèmes de détection du navigateur sont nombreux et continuent d’être créés. C’est mal : cette détection peut souvent être foireuse et elle oblige le webmaster à construire plusieurs version de son site, alors qu’une seule version pourrait suffire si le webmaster savait coder proprement et que les standards étaient respectés (et à jours ; et ouverts).


Oh, et histoire de poursuivre cette histoire (qui s’arrête grosso-modo après la naissance de Chrome en 2009) : Opera Mobile utilisera WebKit dans le futur. La version beta est déjà sortie sur Android. Voici son user-agent, juste pour rire :

Mozilla/5.0 (Linux; Android 2.3.6; YP-G1 Build/GINGERBREAD) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.123 Mobile Safari/537.22 OPR/14.0.1025.52315

C’est joyeux, tout ce monde…

Et concernant l’outil que je voulais faire au début pour détecter les navigateurs ?
Il est désormais terminé et il se trouve en ligne ici : Trouver les informations de votre navigateur. Je suis assez ravi de voir qu’il fonctionne plutôt bien, malgré tout le bordel dans l’UA.

MAJ du 27/03/13 : et ça continue : IE 11 pourra s’identifier comme Firefox avec un « like Gecko » ajouté à son user-agent. C’est magnifique :').

image de Technovore

32 commentaires

gravatar
BUPO a dit :

Moi je propose : Navigateur/Version Moteur/Version MoteurJS/Blabla ; [TextMode](HTML/Norme.Date CSS/Norme.Date JS/Version [Ajoutez les autres choses standards au même format]; compatible; Flash/Version [Et tout le reste comme on veux, plugins]) [OS]
!

Donc pour Opera(Admettons les imperfections) Opera/12.14 Presto/2.12 Carakan/ ; (HTML/5.AAAA-MM-JJ CSS/3.AAAA-MM-JJ JS/2.0 ; compatible; Flash/11,2,202,261 ) X11; Linux i686

C'est bien plus simple, je ne suis pas pro donc il DOIT manquer quelque chose. Après il faudrait compléter pour l'OS.

J'explique mon choix :

Le début avant parenthèse, c'est le navigateur, QUE LE NAVIGATEUR.
On peut ajouter si le navigateur est textuel après un point virgule car c'est important. Ensuite on passe à la parenthèse, donc les détails. On définit es standards supportées, qui est le plus important pour un développeur et qui évite de connaître tous les standards par coeur. Pour les détails il y a les infos du navigateur. Le format de la date est définit pas l'ISO. ENSUITE, un point virgule car c'est plus rien à voir. On retrouve le "compatible ;", pour passer à ce qui n'est pas obligatoire. Je pense qu'on pourrait séparer par des ; les "différentes catégories" ( Plugins, Modules?,... ). Au final, on laisse la place à l'OS et en réalité, tout l'environement logiciel qui est important mais pas crucial.

Cela s'applique pours les navigateurs normaux, pour les bots on pourrait imaginer autre chose.

d'autres exemples:

IE10 : MSIE/10.0.9200.16384 Trident/6.0 Chakra/
(HTML/5.AAAA-MM-JJ CSS/3.AAAA-MM-JJ JS/2.0 ;compatible; ) WindowsNT/6.2 ; WOW64 ; Win8/

Firefox 19 : Firefox/19.0.2 Gecko/9.0 IonMonkey/ (HTML/5.AAAA-DD-JJ CSS/3.AAAA-DD-JJ JS/2.0 ;compatible; ) WindowsNT/6.2 ; WOW64 ; Win8/

Voilà la démonstration est terminée !

PS : En réalitée On pourrait préciser si la version utilisé est en Beta/Alpha/Whatever. Par ex: Opera(Beta)13.10 et créer des attributs universels pour voir quel type d'appareil. Après les parenthèse on pourrait voir "Touch" pour noter la présence d'écran tactile. et "Mobile" "Tablet" "Smatphone".

gravatar
BUPO a dit :


On définit es standards supportées, qui est le plus important pour un développeur et qui évite de connaître tous les standards par coeur.



En fait c'est


On définit les standards supportées, qui est le plus important pour un développeur et qui évite de connaître tous les NAVIGATEURS par coeur.

gravatar
Le Hollandais Volant a dit :

@BUPO : ou aucun UA, forçant les webmasters à faire tes sites compatibles :p.
Ou alors faut que les utilisateurs d’IE6 et Firefox -12 assument de ne pas avoir un navigateur à jour…

gravatar
BUPO a dit :

T'as niqué toute ma théorie to/

gravatar
Julien et Nel a dit :

Pour ma part, j'essaye de coder pour les standards actuels et je me fous de savoir si ça va marcher sur le reste.

Les utilisateurs n'ont qu'a mettre à jour leurs navigateurs et à en utiliser un qui respecte les standards.

gravatar
kinezana a dit :

Et au final tu as trouvé une solution pour "faire un petit outil qui affiche à l’écran le nom et la version du navigateur et de l’OS du visiteur à partir de l’user-agent" ?

gravatar
Le Hollandais Volant a dit :

@BUPO : U MAD BRO ?

@Julien et Nel : idem :). Sauf les CSS3 : je les ajoute tous (-webkit-, -moz-, etc.).

@kinezana : je suis en train de le coder là. En quelques lignes bardé de preg_match() j’ai déjà le traitement pour Opera et MSIE (j’ai même ajouté le gestion de la détection du mode de compatibilité pour IE.
Lentement mais sûrement :).
Si je veux faire tous les navigateurs, je devrais avoir fini d’ici 2032.

gravatar
iTux a dit :

Est-il possible de changer l'UA envoyé aux sites ?
Question valable pour les logiciels libres, et si ça ne vous embete pas, pour Chrome (le commercial, pas Chromium) et Safari.

gravatar
Le Hollandais Volant a dit :

@iTux : cest possible, oui : dans Firefox et Opera il est possible de donner nimporte quoi comme UA.
Pour les autres, je ne sais pas, mais certains modules le font facilement.

gravatar
Erik a dit :

Pour Opera, l'histoire remonte à très longtemps avant sa version 9. Il permettait déjà de falsifier son user-agent quand je l'utilisais en 2000... à l'époque, Opera était payant ou bien dispo en version gratuite contre affichage de pubs dans le navigateur.

gravatar
Julien et Nel a dit :

On peut aussi changer le referer : Ça évite de se faire pister et on fait sa pub comme ça ...

gravatar
Fox a dit :

Sinon, utilise UA-Parser.JS (7.611 kb pour sa version minifiée), c'est ce que j'utilise pour une des pages de ma liste d'outils de dev' en ligne. Au fait, tu m'autorises à y rajouter ton outil de calcul de dates ? :)

gravatar
Julien et Nel a dit :

En ce qui concerne l'user agent, je n'aime pas vraiment être pisté non plus .

Pour le referer, j'ai utilisé l'adresse pour télécharger mon script ;) .

Pour l'user agent, ça retourne le nom du script comme nom de navigateur .

Où comment troller gentiment la personne qui chercherait à collecter mes données .

gravatar
Le Hollandais Volant a dit :

@Fox : J’ai déjà trouvé UA-Parser, mais c’est trop lourd en JS (y’a toute la lib JQuery à télécharger en plus.

Je préfère construire un truc tout neuf :-)

Pour les dates, bien sûr ! Sauf qu’on m’a reporté un petit bug : essayes en calculant la différence entre deux dates où tout est identique sauf les années. Je pense que ça vient du Date() dans JS lui même : ce qu’il fait c’est que pour lui "hier" c’est pareil que –1an + 11mois + 31jours.
Un peu con, mais si tu trouves une solution ou la source du problème, je suis preneur (via Email :)).

gravatar
Fox a dit :

@Le Hollandais Volant : Nop', UA-Parser est compatible jQuery, mais il peut fonctionner sans. D'où la fonction de vérification de la présence de jQuery à la fin de la librairie. :) En tout cas c'est sûr que re-faire soi-même permet d'apprendre beaucoup.

Je regarderai pour le bug des dates si j'ai quelques minutes. Quand je le rajouterai à ma liste d'outils un lien "sources" sera évidemment bien visible.

gravatar
Le Hollandais Volant a dit :

@baba : Excellent ton code JS !
Le JS permet de détecter les objets comme opera.document() ou autres, j’avais zapé ! IE et les commentaires conditionnels permettent ça aussi, sûrement !

Mon but est de faire une page SIMPLE comme ça : http://supportdetails.com/

Ton code est parfait pour faire de la détection de navigateur et lancer un script adapté. Mais pour afficher le nom du navigateur à l’écran c’est un peu plus dur.

Par exemple, pour tester j’ai installé plein de navigateurs sur une machine virtuelle.
Ton code affiche par exemple "Chrome" à la place de Iron, Chromium, CoolNovo, RockMelt. En pratique ce n’est pas grave (ces navigateurs sont tous basés sur chrome), mais pour ce que je veux ça ne suffit pas.

Pour l’instant j’arrive à faire quelques trucs sympas en PHP et j’en suis à 6ko (documenté), il m’en faudrait le double je pense.

UA-Parser a l’avantage d’avoir un grand nombre de noms dans sa BDD, par exemple pour Camino, SeaMonkey, Konqueror et aussi des navigateurs mobiles, de Nintendo, Symbian…

gravatar
Le Hollandais Volant a dit :

@Le Hollandais Volant : PS : UA-Parser ne fait pas mieux concernant tous les aliages de Chrome (oui, j’appelle ça des alliages^^) que sont Iron, CoolNovo et compagnie.
Il affiche tout simplement Chrome.

Mon truc se base sur un dictionnaire concernant les moteurs de rendu et sur les regex pour détecter tout le reste.

Si un navigateur est basé sur Firefox par exemple, il trouvera son nom même si elle n’est pas dans la BDD.

gravatar
K13b3r a dit :

Super article, je me suis déjà demandé pourquoi les noms étaient pas plus simples, mais jamais eu letemps de vraiment chercher.
Donc merci.
Et merci pour blogotext, en cours de restylage du css pour une utilisation bientôt.

gravatar
L'Oiseau Geek a dit :

Merci pour cette traduction et l'historique complet qui va avec; comme souvent en informatique, cela permet de comprendre comment on est arrivé à une situation aussi aberrante au niveau des User-Agents.

Dans le principe, il faudrait bien entendu détecter les fonctionnalités des navigateurs plutôt que le "modèle". Si cela avait été fait à l'origine avec des chaines du type "Frame, Cookie, HTML4, ... Compatbile" ce serait déjà plus propre.

Maintenant, avec le nombre de fonctionnalités et plugins existant on ne s'en sortirait pas et les requêtes HTTP seraient 3 fois plus lourdes.

Pour la détection du support des fonctionnalités HTML5 / CSS3 il y a Modernizr: http://modernizr.com/.

Pour info, Chrome permet nativement de modifier son User-Agents en ouvrant le volet "developpeur" en bas et en cliquant sur son icone de réglage en bas à droite, il y a une section Overrides dans laquelle une liste de UA est proposée, sinon on peut en saisir un manuellement c'est assez amusant à tester sur certains sites.

gravatar
Alain Ternaute a dit :
Au commencement, il y avait [...] Et Netscape se dit, [...] et Gecko était bon. [...] et Firefox était très bon.

C'était voulu, cette ressemblance avec le texte de la Génèse ? lol

gravatar
John Doe a dit :

@Julien et Nel : Niveau business, ça plairait pas à grand monde ;) C discount ils veulent tourner sous IE6, car même si le user est infirme bah, il achete.

gravatar
bohwaz a dit :
ta page ne détecte pas correctementt mon navigateur :

Opera/9.80 (Series 60; Opera Mini/7.1.32453/37.7549; U; fr) Presto/2.12.423 Version/12.16

ça m'affiche os inconnu alors que c'est bien symbian series 60, et ça affiche opera comme navigateur alors que c'est opera mini avec opera presto comme backend serveur (simple :) )

on peut voir aussi le détail marrant d'opera/9:80 version/12.16, à l'époque d'opera 10 c'était le premier navigateur à avoir une version sur 2 chiffres. Ils ont donc découvert que la plupart des scripts de parsing d'user agent ne savaient gérer qu'un chiffre, donc opera était vu comme version 1 et ne recevait pas le bon contenu, d'ou le user agent tarabiscoté...
gravatar
Le Hollandais Volant a dit :
@bohwaz : "symbian" n’apparaît pas dans ton UA, ça ne m’étonne pas qu’il n’affiche pas "symbian".
Il devrait en revanche afficher "Series 60".

Je vais voir ce qu’il en est.

Pour le 9.80, oui, je sais. C’est une raison similaire qui font que Windows est passé de 8 à 10 sans passer par le 9 : les logiciels auraient reconnu le "9", et auraient pensé à Win 98 au lieu de Win9, refusant de s’installer.

Les commentaires sont fermés pour cet article