用JavaScript检测出当前阅读器可否是无头阅读器

发布时间：09/01 来源：未知浏览：关键词：

为什么要检测无头阅读器？

除了此前提到的两种无害的使用案例，无头阅读器可以被用来主动施行歹意任务。最常见的情势是做网络爬虫，或假装拜访量，或探测网站破绽。

一个非常流行的无头阅读器是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");
    }
}

引荐教程：《javascript视频教程》

以上就是用JavaScript检测出当前阅读器可否是无头阅读器的具体内容，更多请关注百分百源码网其它相关文章！

打赏