点击上方蓝字,发现更多精彩
导语
最近在做数据分析,发现navigator.useAgent字段包含了很多奇怪的信息,包括每个浏览器都有Mozilla/5.0字段,而且既有Chrome又有Safari,原因是什么?所以进行了一下分析,在这里进行下分享~
userAgent为什么有这么多相似的字段
userAgent是我们经常会用到的字段,里面包含了很多信息,先来看看常见的浏览器,比如mac下的Chrome,userAgent是:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.192 Safari/537.36
再比如,FireFox的userAgent是:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.3 Safari/605.1.15
Chrome的渲染引擎不是Blink吗?为什么有KHTML、Safari、还有Gecko?
FireFox的渲染引擎不是Gecko吗?为什么有KHTML、Safari?
这个其实要从浏览器的历史说起。
最初的主角叫NCSA Mosaic,简称Mosaic(马赛克),是1992年末位于伊利诺伊大学厄巴纳-香槟分校的国家超级计算机应用中心(National Center for Supercomputing Applications,简称NCSA)开发,并于1993年发布的一款浏览器。它自称“NCSA_Mosaic/2.0(Windows 3.1)”,Mosaic可以同时展示文字和图片,从此浏览器变得有趣多了。
然而很快就出现了另一个浏览器,这就是著名的Mozilla,中文名称摩斯拉。一说 Mozilla = Mosaic + Killer,意为Mosaic杀手,也有说法是 Mozilla = Mosaic & Godzilla,意为马赛克和哥斯拉,而Mozilla最初的吉祥物是只绿色大蜥蜴,后来更改为红色暴龙,跟哥斯拉长得一样。
但Mosaic对此非常不高兴,于是后来Mozilla更名为Netscape,也就是网景。Netscape自称“Mozilla/1.0(Win3.1)”,事情开始变得更加有趣。网景支持框架(frame),由于大家的喜欢框架变得流行起来,但是Mosaic不支持框架,于是网站管理员探测user agent,对Mozilla浏览器发送含有框架的页面,对非Mozilla浏览器发送没有框架的页面。
后来网景拿微软寻开心,称微软的Windows是“没有调试过的硬件驱动程序”。微软很生气,后果很严重。此后微软开发了自己的浏览器,这就是Internet Explorer,并希望它可以成为Netscape Killer。IE同样支持框架,但它不是Mozilla,所以它总是收不到含有框架的页面。微软很郁闷很快就沉不住气了,它不想等到所有的网站管理员都了解IE并且给IE发送含有框架的页面,它选择宣布IE是兼容Mozilla,并且模仿Netscape称IE为“Mozilla/1.22(compatible; MSIE 2.0; Windows 95)”,于是IE可以收到含有框架的页面了,所有微软的人都嗨皮了,但是网站管理员开始晕了。
因为微软将IE和Windows捆绑销售,并且把IE做得比Netscape更好,于是第一次浏览器血腥大战爆发了,结果是Netscape以失败退出历史舞台,微软更加嗨皮。但没想到Netscape居然以Mozilla的名义重生了,并且开发了Gecko,这次它自称为“Mozilla/5.0(Windows; U; Windows NT 5.0; en-US; rv:1.1) Gecko/20020826”。Gecko是一款渲染引擎并且很出色。Mozilla后来变成了Firefox,并自称“Mozilla/5.0 (Windows; U; Windows NT 5.1; sv-SE; rv:1.7.5) Gecko/20041108 Firefox/1.0”。Firefox性能很出色,Gecko也开始攻城略地,其他新的浏览器使用了它的代码,并且将它们自己称为“Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.7.2) Gecko/20040825 Camino/0.8.1”,以及“Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.8.1.8) Gecko/20071008 SeaMonkey/1.0”,每一个都将自己装作Mozilla,而它们全都使用Gecko。
Gecko很出色,而IE完全跟不上它,因此user agent探测规则变了,使用Gecko的浏览器被发送了更好的代码,而其他浏览器则没有这种待遇。Linux的追随者对此很难过,因为他们编写了Konqueror,它的引擎是KHTML,他们认为KHTML和Gecko一样出色,但却因为不是Gecko而得不到好的页面,于是Konqueror为得到更好的页面开始将自己伪装成“like Gecko”,并自称为“Mozilla/5.0 (compatible; Konqueror/3.2; FreeBSD) (KHTML, like Gecko)”。自此user agent变得更加混乱。
这时更有Opera跳出来说“毫无疑问,我们应该让用户来决定他们想让我们伪装成哪个浏览器。”于是Opera干脆创建了菜单项让用户自主选择让Opera浏览器变成“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)”。
后来苹果开发了Safari浏览器,并使用KHTML作为渲染引擎,但苹果加入了许多新的特性,于是苹果从KHTML另辟分支称之为WebKit,但它又不想抛弃那些为KHTML编写的页面,于是Safari自称为“Mozilla/5.0 (Macintosh; U; PPC Mac OS X; de-de) AppleWebKit/85.7 (KHTML, like Gecko) Safari/85.5”,这进一步加剧了user agent的混乱局面。因为微软十分忌惮Firefox,于是IE重装上阵,这次它自称为“Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0) ”,并且渲染效果同样出色,但是需要网站管理员的指令它这么做才行。
再后来,谷歌开发了Chrome浏览器,Chrome使用Webkit作为渲染引擎,和Safari之前一样,它想要那些为Safari编写的页面,于是它伪装成了Safari。于是Chrome使用WebKit,并将自己伪装成Safari,WebKit伪装成KHTML,KHTML伪装成Gecko,最后所有的浏览器都伪装成了Mozilla,这就是为什么所有的浏览器User-Agent里都有Mozilla。Chrome自称为“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”。
因为以上这段历史,现在的User-Agent字符串变得一团糟,几乎根本无法彰显它最初的意义。追根溯源,微软可以说是这一切的始作俑者,但后来每一个人都在试图假扮别人,最终把User-Agent搞得混乱不堪。
一句话结论:因为网站开发者可能会因为你是某浏览器(这里是 Mozilla),所以输出一些特殊功能的程序代码(这里指好的特殊功能),所以当其它浏览器也支持这种好功能时,就试图去模仿 Mozilla 浏览器让网站输出跟 Mozilla 一样的内容,而不是输出被阉割功能的程序代码。大家都为了让网站输出最好的内容,都试图假装自己是 Mozilla,一个已经不存在的浏览器……
附各大浏览器诞生年表:1993年1月23日:Mosaic 1994年12月:Netscape 1994年:Opera 1995年8月16日:Internet Explorer 1996年10月14日:Kongqueror 2003年1月7日:Safari 2008年9月2日:Chrome
注:故事部分转自现代简明魔法。
所以,总结更新下浏览器的引擎:
· Chrome:渲染引擎是Blink。Chrome早期的时候,使用的是与Safari一样的用的是WebKit。而WebKit的基础,是KDE的开放源代码KHTML。
· FireFox:Mozilla旗下的一个产品,渲染引擎是Gecko。
· Safari:渲染引擎是Webkit。
· Opera:早期的渲染引擎是Presto,2013年的时候被Blink取代。
· IE:Internet Explorer的网页浏览器引擎Trident,被Microsoft Windows平台的许多应用程序如Outlook Express、某些版本的Microsoft Outlook和Winamp、RealPlayer中的迷你浏览器所使用。Trident已经被EdgeHTML所取代,2019年EdgeHTML被Blink取代。
IE分为IE浏览器及Edge浏览器。IE的渲染引擎是Trident。Edge一开始的渲染引擎是EdgeHTML,该引擎是Trident的一个分支,2018年12月,微软发表声明Edge将会重新以Chromium为基础建置浏览器,表示之后将会使用Blink排版引擎,并终止EdgeHTML的开发。
具体文献:
EdgeHtmlBelfiore, Joe, Microsoft Edge: Making the web better through more open source collaboration, Microsoft, 2018-12-06Microsoft Edge and Chromium Open Source: Our Intent. Microsoft Edge Team. 6 December 2018
所以,我们就理解为什么各大浏览器是这样的userAgent了。
各大浏览器userAgent解析
userAgent的语法为:
User-Agent: <product> / <product-version> <comment>
大部分的浏览器userAgent为:
User-Agent: Mozilla/5.0 (<system-information>) <platform> (<platform-details>) <extensions>
firefox的userAgent包含这4个部分:
Mozilla/5.0 (platform; rv:geckoversion) Gecko/geckotrail Firefox/firefoxversion
前面历史中提到,基本每个浏览器都包含了Mozilla/5.0字段。
1.platform:描述了浏览器运行的平台,包括 Windows, Mac, Linux, Android等。platform也可以用多个分号隔开。
2.rv:geckoversion:表示Gecko的发布版本。在最近的firefox版本中,firefoxversion和geckoversion一致。
3.Gecko/geckotrail:表示当前浏览器的渲染引擎是Gecko。在现在的opera,可以看到,geckotrial已经固定为20100101
4.Firefox/firefoxversion:表示当前浏览器是Firefox,firefoxversion表示版本号。
例如:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:86.0) Gecko/20100101 Firefox/86.0
所以,检测firefox的核心,就是检测有没有Firefox字段。
Chrome的渲染引擎是Blink。因为兼容的原因,它添加了KHTML, like Gecko and Safari字段。
例如:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.192 Safari/537.36
所以,检测chrome的核心,就是检测有没有Chrome字段。
另外,Chrome提了user agent client hint来替代UA,在Chrome 84版本中就开始可以用了,使用例子如下:
// Log the brand dataconsole.log(navigator.userAgentData.brands);// Log the mobile indicatorconsole.log(navigator.userAgentData.mobile);// Log the full user-agent datanavigator .userAgentData.getHighEntropyValues( ["architecture", "model", "platform", "platformVersion", "uaFullVersion"]) .then(ua => { console.log(ua) });
Opera现在也是用Blink渲染引擎了,所以它的userAgent与Chrome类似。但是在最后加上了"OPR/"。
例如:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36 OPR/74.0.3911.160
比较旧的Opera的浏览器一般为:
Opera/9.80 (Macintosh; Intel Mac OS X; U; en) Presto/2.2.15 Version/10.00Opera/9.60 (Windows NT 6.0; U; en) Presto/2.1.1
所以,检测Opera的核心,就是检测有OPR字段或者Opera字段
例如:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.3 Safari/605.1.15
可以看到,Safari和Chrome的UA是类似的,区别是Safari没有Chrome字段而Chrome两个都有。
所以,检测Safari的核心,就是检测有Safari字段,同时没有Chrome字段。
IE edge:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.18362
IE11:
Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko
IE10:
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)
IE9:
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)
IE8:
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)
从上面可以看到,检测IE8-11的核心是检测是否有MSIE或Trident字段,检测IE Edge的核心是检测是否有edge字段
最全userAgent代码判断附上
最后的话附上浏览器识别代码:
export function getBrowser() { const { userAgent } = navigator; const rMsie = /(msie\s|trident.*rv:)([\w.]+)/; const rEdge = /(edge)\/([\w.]+)/; const rFirefox = /(firefox)\/([\w.]+)/; const rOpera = /(opera).+version\/([\w.]+)/; const rChrome = /(chrome)\/([\w.]+)/; const rSafari = /version\/([\w.]+).*(safari)/; let browser = "other"; let version = "0"; let brand = "other"; const ua = userAgent.toLowerCase(); const { vendor } = navigator; function uaMatch(ua: string) { let match = rMsie.exec(ua); if (match != null) { return { browser: "ie", version: match[2] || "0" }; } match = rEdge.exec(ua); if (match != null) { return { browser: "edge", version: match[2] || "0" }; } match = rChrome.exec(ua); if (match != null && /Google/.test(vendor)) { return { browser: match[1] || "", version: match[2] || "0" }; } match = rSafari.exec(ua); if (match != null && /Apple Computer/.test(vendor)) { return { browser: match[2] || "", version: match[1] || "0" }; } match = rFirefox.exec(ua); if (match != null) { return { browser: match[1] || "", version: match[2] || "0" }; } match = rOpera.exec(ua); if (match != null) { return { browser: match[1] || "", version: match[2] || "0" }; } return { browser: "other", version: "0" }; } try { const browserMatch = uaMatch(ua); ({ browser, version } = browserMatch); if (/qqbrowser/.test(ua)) { brand = "qq"; } else if (/se/.test(ua) && /metasr/.test(ua)) { brand = "sougou"; } else if (/360se/.test(ua)) { brand = "360"; } else if (/ucweb/.test(ua)) { brand = "uc"; } else if (/2345explorer/.test(ua)) { brand = "2345"; } else if (/lbbrowser/.test(ua)) { brand = "liebao"; } else if (/maxthon/.test(ua)) { brand = "maxthon"; } else { brand = browser; } } catch (e) { console.error(` getBrowser error: ${e}`); } return `${brand}_${browser}_${version}`;}
另外,评论区有同学指正了一些错误,建议参考下这里的开源项目会更全:
https://github.com/mumuy/browser/blob/master/Browser.js#L113
参考文章:
https://www.jianshu.com/p/eeb42ee1da4c
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent
END
▼
更多精彩推荐,请关注我们
▼
你的每个赞和在看,我都喜欢!