What is a headless browser?
A headless browser is a browser that can run under a graphical interface. I can programmatically control the headless browser to automatically perform various tasks, such as doing tests, taking screenshots of web pages, etc.
Why is it called a "headless" browser?
The word "headless" comes from the original "headless computer". Wikipedia's entry on "headless computer":
A headless system is a computer system or device configured to be operated without a monitor (i.e. a "header"), keyboard, and mouse. Headless systems are usually controlled through network connections, but some equipment of headless systems also need to be managed through RS-232 serial connection. Servers usually use headless mode to reduce operating costs.
Why detect headless browsers?
In addition to the two harmless use cases mentioned earlier, headless browsers can be used to automatically perform malicious tasks. The most common form is to be a web crawler, or to disguise visits, or to detect website vulnerabilities.
A very popular headless browser is Phantomjs. Because it is based on the Qt framework, it has many different characteristics compared to the common browsers we have, so there are many ways to judge it.
However, starting with Chrome 59, Google released a headless Google Chrome. It is different from Phantomjs. It is developed based on the orthodox Google Chrome and not based on other frameworks, which makes it difficult for the program to distinguish whether it is a normal browser or a headless browser.
Below, we will introduce several ways to determine whether a program runs in a normal browser or a headless browser.
Detect headless browser
Note: These methods have only been tested in four devices (2 Linux, 2 Mac), which means there are definitely many other ways to detect headless browsers.
User agent
First, let’s introduce the most common method of judging browser types and check the User agent. The User agent value of Chrome version 59 headless browser in linux computer is:
“Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (Khtml, like Gecko) HeadlessChrome/59.0.3071.115 Safari/537.36”
So, we can detect whether it is a headless Chrome browser like this:
if (/HeadlessChrome/.test()) {
("Chrome headless detected");
}
The User agent can also be obtained from HTTP headers. However, both cases are easy to forge.
Plugins
An array will be returned, which contains the plug-in information in the current browser. Usually, regular Chrome browsers have some default plugins, such as Chrome PDF viewer or Google Native Client. On the contrary, in headless mode, there are no plugins, and the return is an empty array.
if( == 0) {
("It may be Chrome headless");
}
language
In Google Chrome, there are two JavaScript properties that can get the language settings of the current browser: and . The first one refers to the language of the browser interface, and the latter returns an array, which stores all the secondary languages selected by the browser user. However, in headless mode, an empty string is returned.
if( == "") {
("Chrome headless detected");
}
WebGL
WebGL provides a set of APIs that can perform 3D rendering in htmlcanvas. Through these APIs, we can query the graph-driven vendor and renderer.
In the normal Google Chrome on Linux, the renderer and vendor values we get are: "Google SwiftShader" and "Google Inc."
In headless mode, one we get is "Mesa OffScreen" - the name of rendering technology without any window system, and "Brian Paul" - the original program that open source Mesa graphics library.
var canvas = ('canvas');
var gl = ('webgl');
var debugInfo = ('WEBGL_debug_renderer_info');
var vendor = (debugInfo.UNMASKED_VENDOR_WEBGL);
var renderer = (debugInfo.UNMASKED_RENDERER_WEBGL);
if(vendor == "Brian Paul" && renderer == "Mesa OffScreen") {
("Chrome headless detected");
}
Not all versions of headless browsers have the same two values. However, currently in the headless browser, the two values are "Mesa Offscreen" and "Brian Paul"
Browser Features
Modernizr can detect the current browser's support for various HTML and css features. I found that the only difference between normal Chrome and headless Chrome is that there is no hairline feature in headless mode, which is used to detect whether it supports hidpi/retina hairlines.
if(!Modernizr["hairline"]) {
("It may be Chrome headless");
}
Images that failed to load
Finally, the last method I found, and the most effective method, is to check the height and width of the pictures that cannot be loaded normally in the browser.
In normal Chrome, the size of the unsuccessfully loaded image is related to the browser's zoom, but it is definitely not zero. In the headless Chrome browser, the width and height of this kind of image are 0.
var body = ("body")[0];
var image = ("img");
= "";
("id", "fakeimage");
(image);
= function(){
if( == 0 && == 0) {
("Chrome headless detected");
}
}
The above is the detailed content of how to use JavaScript to detect that the current browser is a headless browser. For more information about JavaScript, please pay attention to my other related articles!