无头浏览器识别

0x00 常规测试
0x00 Chrome Headless User-Agent
Chrome无头版本的UA中含有HeadlessChrome字样，示例：
1
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/60.0.3112.50 Safari/537.36
Copied!
0x01 WebDriver
基于Selenium WebDriver驱动的无头浏览器会在js中生成一个window.navigator.webdriver对象，正常的浏览器中是没有这个对象的。
0x02 WebDriver Advanced
在浏览器中执行如下js：
1
navigator.webdriver = false
Copied!
在正常的浏览器中，执行上述js后再次访问navigator.webdriver的值，其值为false，但在无头浏览器中，其值仍然为true。
0x03 Chrome Test
在Chrome无头模式的js环境中访问window.chrome的值为undefined。
0x04 Permissions
因为无头浏览器是默认拒绝所有使用js代码申请的权限，但又不会修改权限申请队列中的申请状态。所以我们执行如下代码想用户申请通知栏权限：
1
const permissionStatus = await navigator.permissions.query({ name: 'notifications' });
Copied!
在无头浏览器中，权限的申请会被立刻拒绝（Notification.permission值为denied），但是权限的申请状态又不会发生变化（访问permissionStatus.state的值依旧为prompt，表示用户还未操作是否给予权限），前后是相矛盾的。
0x05 Plugins Length
正常的浏览器都会有插件，所以访问navigator.plugins返回的列表一定不为空，而无头浏览器一般是没有浏览器插件的。
BTW:
即便你新安装的浏览器，你的浏览器也是默认带一个PDF插件的，用于在浏览器标签页中打开PDF文件。
0x06 Plugins is of type PluginArray
在正常的浏览器中，使用js访问navigator.plugins返回的对象类型为PluginArray，而不是一个普通的数组。在无头浏览器中则不是。
0x07 Languages
无头浏览器是没有语言设置的，不信你可以在无头浏览器中访问navigator.languages，返回值一般为undefined或者一个空列表。而在正常的浏览器中，返回值为当前浏览器的语言，如['en-US', 'en']。
0x08 WebGL Vendor
Chrome无头版的WebGL Vendor是Brian Paul，正常浏览器一般为Intel Open Source Technology Center或者Google Inc。
0x09 WebGL  Render
Chrome无头版的WebGL Render是Mesa OffScreen，正常浏览器中显示的一般和你电脑显卡的型号有关。就比如我的电脑采用的是Intel的集成显卡，显示的WebGL Render的值就为：ANGLE (Intel(R) UHD Graphics 630 Direct3D11 vs_5_0 ps_5_0)。
0x0A Retina/HiDPI Hairline Feature
在页面中插入一个DIV：
1
<div id="modernizr"></div>
Copied!
然后在CSS文件中，为其配置如下样式：
1
#modernizr {
2
  border: .5px solid transparent;
3
}
Copied!
当我们在js中访问这个div的offsetHeight属性值的时候，返回值如果不为1，那就是无头浏览器。
这种识别方式有很强的局限性，仅局限于使用High DPI显示器在正常的浏览器中渲染的网页这个offsetHeight属性才会返回1。而在无头浏览器中，不管是不是High DPI的显示器，都会返回其它值。
0x0B Broken Image Dimensions
在HTML中通过img标签加载一个失效的图片链接，然后再通过js去访问这个img标签所指向图片的宽度和高度，在无头浏览器中，返回的宽度值和高度值均为0。在正常的浏览器中，返回的数值和你当前浏览器窗口的大小和缩放比例有关，是个非0值。
1
var body = document.getElementsByTagName("body")[0];
2
// 动态添加一张失效的图片
3
var image = document.createElement("img");
4
image.src = "http://fake-image-address";  // 失效的图片链接
5
image.setAttribute("id", "fakeimage");
6
body.appendChild(image);
7
image.onerror = function(){
8
    if(image.width == 0 && image.height == 0) {
9
        console.log("Chrome headless detected");
10
    }
11
}
Copied!
0x01 浏览器指纹测试
0x00 PHANTOM_UA
使用PhantomJS渲染的网页，UA会默认被加上一个PhantomJS字样。
0x01 PHANTOM_PROPERTIES
在正常的浏览器中执行window.callPhantom、window._phantom和window.phantom，返回的值均为undefined，而使用PhantomJS渲染的网页，三个值均不为undefined。
0x02 PHANTOM_ETSL
在正常的浏览器中，执行如下js语句返回的值为33，而在PhantomJS渲染的网页中，值为37：
1
eval.toString().length
Copied!
0x03 PHANTOM_LANGUAGE
在PhantomJS的环境下使用js访问navigator.languages的值为undefined。
0x04 PHANTOM_WEBSOCKET
故意创建一个错误的WebSocket对象：
1
new WebSocket('itsgonnafail');  // 错误的WebSocket对象
2
new WebSocket("ws://localhost:9998");  // 正确的WebSocket，做对比
Copied!
在正常的浏览器中加载错误的WebSocket对象抛出的异常为DOMException而在PhantomJS渲染的环境下抛出的异常为SyntaxError。
0x05 MQ_SCREEN
在无头浏览器中执行如下js返回值为false，正常浏览器则为true：
1
window.matchMedia('(min-width: ' + (window.innerWidth - 1) + 'px)').matches
Copied!
0x06 PHANTOM_OVERFLOW
故意执行一段会导致Stack Overflow的js代码，并记录下抛出的异常以及递归的深度信息：
1
let depth = 0;  // 记录实际走过的递归深度
2
function iWillBetrayYouWithMyLongName() {
3
    try {
4
        depth++;
5
        iWillBetrayYouWithMyLongName();
6
    } catch (e) {
7
        errorMessage = e.message;
8
        errorName = e.name;
9
        errorStacklength = e.stack.toString().length;
10
    }
11
}
12
​
13
iWillBetrayYouWithMyLongName();
Copied!
在正常的浏览器中，栈溢出抛出的异常为RangeError: Maximum call stack size exceeded，且我们透过depth记录的递归深度值要远远大于通过catch抛出的异常中的栈长度的。如果这个大小关系反过来了，那就极有可能是透过PhantomJS渲染的。
0x07 PHANTOM_WINDOW_HEIGHT
在JS中使用screen.availWidth和screen.availHeight获取显示浏览器的屏幕的可用宽度和可用高度，使用screen.width和screen.height获取显示浏览器的屏幕的宽度和高度。正常情况下，可用宽度是小于等于屏幕宽度的，可用高度也是小于等于屏幕高度的。而在PhantomJS渲染的环境下，这个关系可能就会反过来。
0x08 HEADCHR_IFRAME
Chrome的无头版本是不会加载使用srcdoc指定HTML代码的iframe的，例如：
1
<iframe srcdoc="blank page"></iframe>
Copied!
而正常的浏览器是会加载的，所以我们可以通过判断其有没有被正常加载而判断出当前是否处在无头浏览器渲染的模式下，示例代码：
1
const iframe = document.createElement('iframe');
2
iframe.srcdoc = 'blank page';
3
document.body.appendChild(iframe);
4
​
5
const result = typeof iframe.contentWindow.chrome;
6
iframe.remove();
7
if (result === "undefined") {
8
    console.log("Chrome headless detected");
9
}
Copied!
0x09 CHR_DEBUG_TOOLS
在正常的浏览器中，用户按下F12键，或者网页内右键菜单点击检查，将会打开浏览器的控制台工具。无头模式下的浏览器则是没有这个控制台工具的。
0x0A SELENIUM_DRIVER
Selenium驱动的无头浏览器，在js中访问如下的这一些对象，值都不为undefined。在正常的浏览器中，访问如下这些对象，返回均为undefined。
1
window._Selenium_IDE_Recorder
2
window.callSelenium
3
window._selenium
4
document.__webdriver_script_fn
5
document.__driver_evaluate
6
document.__webdriver_evaluate
7
document.__selenium_evaluate
8
document.__fxdriver_evaluate
9
document.__driver_unwrapped
10
document.__webdriver_unwrapped
11
document.__selenium_unwrapped
12
document.__fxdriver_unwrapped
13
document.__webdriver_script_func
Copied!
0x0B CHR_BATTERY
在正常的浏览器中，执行js：
1
window.navigator.getBattery()
Copied!
可以返回当前电脑的电池电量信息，而在无头浏览器中返回的Promise会一直处于pending状态。
0x0C CHR_MEMORY
在正常的浏览器中，执行js：
1
navigator.deviceMemory
Copied!
会返回当前电脑以GB为单位的设备内存，在无头浏览器中则返回0。
0x0D TRANSPARENT_PIXEL
用Canvas动态加载一幅仅有1个像素点的纯白色2D png图像，然后再通过canvasCtx.getImageData(0, 0, 1, 1)复制这个像素点的像素值，如果返回结果的第四个通道的值为0，也就是透明的话，说明为正常的浏览器。
0x0E VIDEO_CODECS
如果是使用基于原始Chromium项目的无头浏览器，而不是Google Chrome浏览器的无头版本的话，可以通过判断浏览器是否可以正常解码MP4（有没有H264解码器）来判断是不是无头浏览器。因为正常用户使用的浏览器都是会有MP4解码器的，播放视频毕竟是大多用户使用浏览器的一个常规功能嘛。
1
const videoElt = document.createElement("video");
2
if (videoElt.canPlayType('video/mp4; codecs="avc1.42E01E"') !==  'probably') {
3
    console.log("Chrome headless detected");
4
}
Copied!
TL;DR
Chromium项目为什么没有H264等一众音视频解码器？
因为版权原因，Chromium项目作为一个开源项目，其仅仅是一个浏览器项目，是没有集成各种有版权的音视频解码器的。而Google Chrome浏览器是自带各种音视频解码器的，所以如果使用的是Google Chrome浏览器的无头模式，这种方法就会失效。
以前
爬虫相关
下一个 - 文集
计算机基础学科
最近更新 1yr ago