教你怎么用JavaScript检测当前浏览器是无头浏览器
myzbx 2025-04-08 16:46 20 浏览
什么是无头浏览器(headless browser)?
无头浏览器是指可以在图形界面情况下运行的浏览器。我可以通过编程来控制无头浏览器自动执行各种任务,比如做测试,给网页截屏等。
为什么叫“无头”浏览器?
“无头”这个词来源于最初的“无头计算机(Headless computer)”。维基百科关于的“无头计算机”词条:
无头系统(headless system)是指已配置为无须显示器(即“头”)、键盘和鼠标操作的计算机系统或设备。无头系统通常通过网络连接控制,但也有部分无头系统的设备需要通过RS-232串行连接进行设备的管理。服务器通常采用无头模式以降低运作成本。
为什么要检测无头浏览器?
除了之前提到的两种无害的使用案例,无头浏览器可以被用来自动执行恶意任务。最常见的形式是做网络爬虫,或伪装访问量,或探测网站漏洞。
一个非常流行的无头浏览器是PhantomJS,因为它是基于 Qt 框架,所以跟我们常见的浏览器相比有很多不同的特征,因此有很多方法判断出它。
但是,从chrome 59开始,谷歌发布了一款无头谷歌浏览器。它跟PhantomJS不同,它是基于正统的谷歌浏览器开发出来的,不是基于其它的框架,这让程序很难区分出它是正常浏览器还是无头浏览器。
下面,我们将介绍几种判断程序是运行在普通浏览器还是无头浏览器里的方法。
检测无头浏览器
注意:这些方法只是在四种设备 (2 Linux, 2 Mac) 里测试过,也就是说, 肯定还有其他很多方法检测无头浏览器。
User agent
先介绍使用做最常见的一种判断浏览器种类的方法,检查User agent。在linux计算机里Chrome version 59无头浏览器的User agent值是:
“Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/59.0.3071.115 Safari/537.36”
于是,我们可以这样检测是否是无头Chrome浏览器:
if (/HeadlessChrome/.test(window.navigator.userAgent)) {
console.log("Chrome headless detected");
}
User agent 也可以从 HTTP headers 里获取。然而,这两种情况都很容易伪造。
插件 Plugins
navigator.plugins 会返回一个数组,里面是当前浏览器里的插件信息。通常,普通Chrome浏览器有一些缺省插件,比如 Chrome PDF viewer 或 Google Native Client。相反,在无头模式里,没有任何插件,返回的是个空数组。
if(navigator.plugins.length == 0) {
console.log("It may be Chrome headless");
}
语言
在谷歌浏览器里,有两个JavaScript属性可以获取当前浏览器的语言设置: navigator.language 和 navigator.languages。头一个是指浏览器界面的语言,后一个返回的是个数组,里面存储的是浏览器用户的所有次选语言。然而,在无头模式里,navigator.languages 返回的是个空字符串。
if(navigator.languages == "") {
console.log("Chrome headless detected");
}
WebGL
WebGL 提供了一组能在HTML canvas 里执行3D渲染的API。通过这些API,我们可以查询出图形驱动的 vendor 和 renderer 。
在linux上的普通谷歌浏览器里,我们获得的 renderer 和 vendor 值为: “Google SwiftShader” 和 “Google Inc.”。
而在无头模式里,我们获得的一个是 “Mesa OffScreen”——它是没有使用任何 window 系统的渲染技术的名称,和 “Brian Paul” ——开源 Mesa 图形库的最初的程序。
var canvas = document.createElement('canvas');
var gl = canvas.getContext('webgl');
var debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
var vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
var renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
if(vendor == "Brian Paul" && renderer == "Mesa OffScreen") {
console.log("Chrome headless detected");
}
并不是所有版本的无头浏览器都有同样的这两个值。然而目前在无头浏览器里是“Mesa Offscreen” 和 “Brian Paul” 这两个值。
浏览器特征
Modernizr 可以探测出当前浏览器对HTML和CSS各种特性的支持程度。我发现,普通Chrome和无头Chrome里唯一的区别是,无头模式下没有 hairline 特征,它是用来检测是否支持 hidpi/retina hairlines的
if(!Modernizr["hairline"]) {
console.log("It may be Chrome headless");
}
加载失败的图片
最后,我发现的最后一个方法,也是看起来最有效的方法,切入点是检查浏览器里不能正常加载的图片的高和宽。
在正常的Chrome里,未成功加载的图片的大小跟浏览器的zoom有关,但肯定不是零。而在无头Chrome浏览器里,这种图片的宽和高都是0。
var body = document.getElementsByTagName("body")[0];
var image = document.createElement("img");
image.src = "http://iloveponeydotcom32188.jg";
image.setAttribute("id", "fakeimage");
body.appendChild(image);
image.onerror = function(){
if(image.width == 0 && image.height == 0) {
console.log("Chrome headless detected");
}
}
这就是检测无头浏览器的详细步骤
这里小编是一个有着10年工作经验的前端高级工程师,关于web前端有许多的技术干货,包括但不限于各大厂的最新面试题系列、前端项目、最新前端路线等。需要的伙伴可以私信我
发送【前端资料】
就可以获取领取地址,免费送给大家。对于学习web前端有任何问题(学习方法,学习效率,如何就业)都可以问我。希望你也能凭自己的努力,成为下一个优秀的程序员
相关推荐
- 大白话讲nnvm(大白话讲解什么是卷积)
-
之前工作经验中,在某大厂,开发过机器学习框架,在和业务同学的合作下,取得还可以的成绩,但是一直觉得缺少了什么,最近在刷ai-system相关的公开课,才明白计算图的重要性,以往觉得不能理解的东西,现在...
- Python之Json模块详解(python.json()用法)
-
Step1:Json是什么JSON(JavaScriptObjectNotation,JS对象标记)是一种轻量级的数据交换格式。具有数据格式简单,读写方便易懂等很多优点。许多主流的编程语言都...
- 最新潮最流行的影音资源——MAU影视
-
MAO影视,一款完全免费的影视软件,为您带来最新潮最流行的影音资源,软件本身并不具备任何资源,只是作为一款播放器提供给大家。配合相关的接口链接,即可为您呈现丰富多彩的影音节目。软件版本支持:1.安卓2...
- Python版的迷你程序——json文件转换为csv
-
浅话C语言是过去几十年软件和硬件两个阵营之间,签署的最坚实的契约。硬件为C语言的语义提供了最能发挥其性能的基础构件,而软件虽然搞了很多的圆环套圆环般的层次,但最终都以C语言作为最后的沉淀收尾。----...
- 没硬盘、网盘也能看片自由!NAS一键部署MoonTV,随时随地爽看。
-
本内容来源于@什么值得买APP,观点仅代表作者本人|作者:羊刀仙有没有一个应用服务,能满足既没有足够预算购置硬盘,也不想依托网盘的朋友的家庭观影需求?之前我介绍过LibreTV,本篇再来看看另一个更...
- 用云存储30分钟快速搭建APP,你信吗?
-
背景不管你承认与否,移动互联的时代已经到来,这是一个移动互联的时代,手机已经是当今世界上引领潮流的趋势,大型的全球化企业和中小企业都把APP程序开发纳入到他们的企业发展策略当中。但随着手机APP上传的...
- Python的dict和json区别(python中dict的特点)
-
大家有没有发现,python中的字典类型的数据结构,和我们目前比较流行的web端的json格式,非常类似,几乎有点分不清了。那么这2者的区别是什么呢?首先,从概念上,我们要理解这2者是截然不同的。py...
- 越晚搞懂 MySQL JSON 数据类型,你就越吃亏
-
作者介绍陈臣,甲骨文MySQL首席解决方案工程师,公众号《MySQL实战》作者,有大规模的MySQL,Redis,MongoDB,ES的管理和维护经验,擅长MySQL数据库的性能优化及日常操作的原理剖...
- 揭秘你不会画“信息结构图”的本质
-
编辑导语:产品信息结构图有助于清晰地展示产品信息,一定程度上可以为后台上传数据提供依据,但不少人可能觉得产品信息结构图很难,这可能是对数据库表结构不理解等因素导致的。本篇文章里,作者就产品信息结构图的...
- python之json基本操作(.json python)
-
1.概述JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式,它具有简洁、清晰的层次结构,易于阅读和编写,还可以有效的提升网络传输效率。Python标准库的...
- JWT 和 JJWT 还傻傻的分不清吗(jwt jti)
-
JWTs是JSON对象的编码表示。JSON对象由零或多个名称/值对组成,其中名称为字符串,值为任意JSON值。JWT有助于在clear(例如在URL中)发送这样的信息,可以被信任为不可读(即加密的)、...
- 比json快20-100倍!protobuf原理深入剖析
-
一、protobuf语法指南1.1定义一个消息类型先来看一个非常简单的例子。假设你想定义一个“搜索请求”的消息格式,每一个请求含有一个查询字符串、你感兴趣的查询结果所在的页数,以及每一页多少条查询结...
- 了解一下ProtoBuf(了解一下相亲对象的年龄)
-
序列化与反序列化我们在进行网络通信调用的时候,总是需要将内存的数据块经过序列化,转换成为一种可以通过网络流进行传输的格式。而这种格式在经过了传输之后再经过序列化,能还原成我们预想中的数据结构。那么我们...
- JSON数据类型详细总结(json数据类型详细总结怎么写)
-
JSON详解一、JSON的概述及其使用JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。它基于javascript的一个子集。JSON是的数据交换语言,易...
- 接口自动化测试之JSON Schema模式该如何使用?
-
JSONSchema模式是一个词汇表,可用于注释和验证JSON文档。在实际工作中,对接口返回值进行断言校验,除了常用字段的断言检测以外,还要对其他字段的类型进行检测。对返回的字段一个个写断言显...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)