文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何用JavaScript检测当前浏览器是无头浏览器

2024-04-02 19:55

关注

什么是无头浏览器(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 提供了一组能在htmlcanvas 里执行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");
	}
} 

以上就是如何用JavaScript检测当前浏览器是无头浏览器的详细内容,更多关于JavaScript的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯