Como detectar o Chrome no mode headless

Modo headless é o modo de uso que não necessita de interface gráfica para funcionar. Com isto, o navegador pode ser controlado de maneira automatiza via programação, para tarefas como testes, obter screenshots, etc.

As verificações aqui descritas foram testadas com sucesso em Linux e Mac. Da mesma forma, as maneiras apresentadas foram algumas que deram certo nestes testes. Como se trata de uma funcionalidade muito nova, as formas aqui descritas para detectar o modo headless do Chrome poderão muito em breve ser feitas de uma maneira melhor e mais padronizada, a medida que a comunidade JS for precisando desta funcionalidade.

No entanto, como há raros artigos sobre como detectar o modo headless do Chrome, compartilhamos abaixo alguns resultados:

Testar o user-agent
1. Método pouco efetivo, principalmente se um uso malicioso do modo headless estiver sendo empregado. Uma das primeiras caracteristicas que seria alterada tenderia a ser o user-agent.
2. ```
if (/HeadlessChrome/.test(window.navigator.userAgent)) {
    console.log("Chrome headless detected");
}
```
Verificar plugin
1. Caso esteja acessível, navigator.plugins retorna um array com os plugins existentes. No navegador Chrome padrão (sem estar no modo headless, que chamaremos de Vanilla mode daqui em diante), é possível sempre ver neste array algum plugin, como Chrome PDF viewer ou Google Native Client.
2. ```
if(navigator.plugins.length == 0) {
    console.log("Chrome headless");
}
```
Consultar os idiomas disponíveis e de preferência do usuário no navegador
1. Via JavaScript no Chrome, temos navigator.language e navigator.languages. O primeiro retorna qual o idioma da interface do navegador, enquanto o segundo retorna um array das linguas de preferência do usuário.
2. No modo headless, parece que o Chrome sempre retorna navigator.languages como um array vazio
3. ```
if(navigator.languages == "") {
    console.log("Chrome headless");
}
```
Verificando os drivers utilizados pelo WebGL
1. WebGL é uma API para renderizar 3D no HTML canvas. Com esta API, no entanto, é possível consultar alguns dados do driver da placa gráfica, assim como dos mecanismo de renderização.
2. No modo headless, a ‘tecnologia’ utiliza para esta renderização é diferente do modo Vanilla.
  1. “Mesa OffScreen” é o valor obtido para renderização sem qualquer tipo de modo gráfico
  2. “Brian Paul” é o valor obtido como fabricante. Parece este ser o nome do programa que iniciou a biblioteca Open Source Mesa graphics
3. ```
var canvas = document.createElement('canvas');
var webgl = canvas.getContext('webgl');

var debugInfo = webgl.getExtension('WEBGL_debug_renderer_info');
var vendor = webgl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
var renderer = webgl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);

if(
    renderer == "Mesa OffScreen"
    &&
    vendor == "Brian Paul"
) {
    console.log("Chrome headless");
}
```

Gostou? Tire um minutinho e dê sua contribuição para Drall Dev Community no Patreon!

Artigos relacionados: