HeadlessChrome: ¿Qué es y cómo detectarlo?

Un navegador sin cabeza es un navegador sin una interfaz gráfica de usuario (GUI). Puede ejecutarse en segundo plano, permitiendo a los programadores controlar y manipular el navegador a través de una interfaz de línea de comandos o scripts.

¡Es hora de comenzar a aprender sobre la detección y la anti-detección de bots con Nstbrowser!

¿Qué es Headless Chrome?

Headless Chrome es un modo sin cabeza de Google Chrome. Permite a los desarrolladores controlar y manipular el navegador Chrome a través de la línea de comandos o scripts sin mostrar la interfaz de usuario del navegador. Headless Chrome combina el poder de Chrome con la eficiencia del modo sin cabeza, convirtiéndose en una herramienta indispensable para el desarrollo y pruebas web modernas.

¿Qué puede hacer Headless Chrome?

1. Pruebas automatizadas eficientes: Headless Chrome puede ejecutar rápidamente scripts de prueba de navegador para verificar la funcionalidad, rendimiento y compatibilidad de las páginas web sin cargar y renderizar la interfaz de usuario, aumentando drásticamente la velocidad y eficiencia de las pruebas.
2. Raspado web: El navegador sin cabeza puede usarse para raspar contenido web y simular acciones de usuario para acceder y extraer datos de páginas web dinámicas. Esto es especialmente útil para lidiar con páginas web que requieren inicio de sesión, carga de contenido dinámico o contenido generado por JavaScript.
3. Monitoreo de rendimiento: Los desarrolladores pueden usar Headless Chrome para monitorear y analizar el rendimiento de las páginas web, como tiempos de carga, uso de recursos, etc.

¿A menudo te bloquean al raspar la web?
Nstbrowser desbloquea completamente los sitios web para evitar la detección
Prueba gratis Nstbrowser ahora!
¿Tienes ideas y dudas interesantes sobre el web scraping y el Browserless?
¡Veamos qué comparten otros desarrolladores en Discord y Telegram!

¿Cómo detectar y anti-detectar Headless Chrome?

Los navegadores sin cabeza también se usan a menudo con fines anti-crawler debido a su naturaleza altamente automatizada. Por lo tanto, es crucial detectar su presencia.

A continuación se presentan algunas formas comunes de detectar navegadores sin cabeza utilizando código Javascript como ejemplo y algunos métodos de anti-detección:

1. Detección de User Agent

El User Agent es un identificador que el navegador envía al servidor. Al verificar si el User Agent contiene la palabra “Headless” o no, podemos determinar inicialmente si la solicitud proviene de un Headless Chrome. Este método a menudo es poco confiable porque el User Agent puede ser falsificado o modificado.

• Código de detección

const isHeadlessUserAgent = navigator.userAgent.toLowerCase().includes('headless');

• Código de anti-detección

// UserAgent personalizado sin 'headless'
Object.defineProperty(navigator, 'userAgent', {
    value: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, como Gecko) Chrome/124.0.0.0 Safari/537.36'
});

2. Detección de ejecución de JavaScript

Los Headless Chrome usualmente no ejecutan JavaScript o su capacidad de ejecución de JavaScript es débil, por lo que podemos determinar si el navegador admite JavaScript ejecutando un código JavaScript simple. Esto se puede hacer verificando si ciertas APIs o funciones de JavaScript están disponibles.

• Código de detección

const isJavaScriptEnabled = typeof window !== 'undefined';

3. Detección de características del navegador

Ciertas características del navegador pueden estar deshabilitadas o comportarse de manera anormal en los Headless Chrome. Luego, podemos usar estas características para la detección. Por ejemplo, se puede usar la API de Canvas para detectarlo.

• Código de detección

const isCanvasSupported = () => {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    return !!context;
}

4. Detección de WebDriver

La detección de Headless Chrome se puede realizar verificando la presencia de la propiedad navigator.webdriver. Los navegadores sin cabeza usualmente establecen esta propiedad, mientras que los navegadores normales no. Fuente relacionada: Chromium se puede determinar si es un Chrome sin cabeza.

• Código de detección

const isWebDriverSupported = () => {
    return navigator.webdriver;
}

• Código de anti-detección

Object.defineProperty(navigator, 'webdriver', {
    get: () => undefined
});

5. Detección de código window.chrome

Detectar la presencia de window.chrome puede ayudar a determinar si el navegador está en modo sin cabeza. En modo sin cabeza, este atributo generalmente no está presente.

• Código de detección

const isWindowChromeSupported = () => {
    return window.chrome !== undefined;
}

6. Detección de WebRTC

WebRTC es un estándar web utilizado para la comunicación en tiempo real en los navegadores, y más detalles estarán en el sitio web oficial de WebRTC. En otras palabras, los Headless Chrome usualmente deshabilitan WebRTC, por lo que puedes determinar si el navegador es sin cabeza o no verificando la disponibilidad de WebRTC.

• Código de detección

const isWebRTCSupported = () => {
    return !!window.RTCPeerConnection;
}

7. Detección de Audio/Video

La reproducción de audio o video generalmente está deshabilitada en modo sin cabeza. Al intentar reproducir audio o video, podemos detectar si el navegador es sin cabeza o no.

• Código de detección

const isAudioVideoSupported = () => {
    const audio = document.createElement('audio');
    const video = document.createElement('video');
    return !!(audio.canPlayType && video.canPlayType);
}

8. Detección de permisos en modo sin cabeza

Actualmente, los navegadores en modo sin cabeza no pueden manipular los permisos del navegador, por lo que no son compatibles con Notification.permission. No manejan eventos de la interfaz de usuario, solo la carga y el renderizado de páginas, por lo que en el modo sin cabeza, Notification.permission y navigator.permissions.query son inconsistentes.

• Código de detección

const isHeadlessPermissionMatched = () => {
    return navigator.permissions.query({name: 'notifications'})
        .then(permissionStatus => {
            return Notification.permission === 'denied' && permissionStatus.state === 'prompt';
        })
        .catch(() => {
            return false;
        });
};

9. Detección de navigator.plugins

navigator.plugins puede mostrar la lista de plugins presentes en el navegador. Los navegadores normales instalarán algunos plugins por defecto, como el visor de PDF de Chrome o Google Native Client, etc., pero en el modo sin cabeza generalmente no tendrán ningún plugin. Así que puedes determinar si es un navegador sin cabeza revisando la lista de plugins.

• Código de detección

const pluginInstalled = () => {
    return navigator.plugins.length > 0
}

• Código de anti-detección

const originalPlugins = navigator.plugins;
Object.defineProperty(navigator, 'plugins', {
    get: () => originalPlugins
});

10. Detección de idioma

En Chrome, el idioma utilizado por el usuario se puede obtener a través de navigator.language y navigator.languages, siendo el primero el idioma de la interfaz de usuario del navegador y el segundo una lista de los idiomas preferidos por el usuario. En el modo sin cabeza, navigator.languages devolverá una cadena vacía.

• Código de detección

const isHeadlessLanguage = () => {
    return !navigator.languages || navigator.languages.length === 0
}

• Código de anti-detección

Object.defineProperty(navigator, 'languages', {
    value: ['en-US', 'en']
});

11. Otros métodos comunes

Métodos de detección:

• Velocidad de carga de la página: Los navegadores sin cabeza suelen cargar las páginas más rápido porque no necesitan renderizar páginas ni ejecutar JavaScript.
• Eventos de teclado: Los navegadores sin cabeza generalmente no desencadenan eventos de teclado porque generalmente no necesitan interactuar con el usuario. Se pueden determinar escuchando eventos de teclado y verificando si se activan.
• Eventos de ratón: De manera similar, los navegadores sin cabeza no activan eventos de ratón porque no suelen necesitar simular acciones de usuario.
• Detección de CSS: Los estilos CSS pueden comportarse de manera diferente en los navegadores sin cabeza. Es decir, ciertas propiedades CSS pueden no ser compatibles o pueden renderizarse de manera diferente. Puedes determinar un navegador sin cabeza cargando un estilo CSS específico y verificando el resultado de la renderización.
• Detección de LocalStorage: Un navegador sin cabeza normalmente no es compatible con LocalStorage porque no están obligados a mantener sesiones de usuario o estado.
• Interacción con JavaScript incrustado: Los navegadores sin cabeza generalmente no ejecutan mucho código JavaScript ni interactúan con las páginas. Puedes determinar si un navegador es sin cabeza incrustando algo de código JavaScript en la página que requiera interacción del usuario y detectando su resultado de ejecución.
• Detección de variables de entorno específicas: Los navegadores sin cabeza suelen establecer algunas variables de entorno o atributos específicos, que pueden usarse para determinar si es un navegador sin cabeza. Por ejemplo, puedes detectar la presencia de un identificador específico en una variable de entorno, o detectar la presencia de una variable global específica en JavaScript.

Métodos de anti-detección:

• Simular comportamiento humano: Los navegadores sin cabeza generalmente realizan tareas como la carga de páginas, el envío de formularios, etc., de manera altamente automatizada, lo que es diferente de los patrones de comportamiento de los usuarios humanos. El comportamiento humano puede simularse, por ejemplo, agregando movimientos aleatorios del ratón, entradas de teclado, etc., para que el detector piense que es una acción real del usuario en lugar de un navegador sin cabeza.
• Aleatorizar intervalos de solicitud: Los navegadores sin cabeza generalmente envían solicitudes a una frecuencia muy regular. Es posible simular el comportamiento real del usuario agregando intervalos aleatorios entre solicitudes, lo que hace más difícil para el detector determinar si es un navegador sin cabeza por la frecuencia de las solicitudes.
• Simular el entorno del navegador: Modificar algunas propiedades o funciones en el navegador sin cabeza para que se parezca más a un navegador real. Por ejemplo, el tamaño de la ventana del navegador, la resolución de la pantalla, el User-Agent, etc., se pueden modificar para simular el entorno de un navegador real.

Es importante señalar que, debido a que los navegadores sin cabeza pueden imitar el comportamiento de casi todos los navegadores normales y utilizarán una variedad de métodos de anti-detección para que el navegador sin cabeza parezca más el comportamiento de un usuario real, lo que hace más difícil contrarrestar los rastreadores. Así que, independientemente de los métodos que se utilicen para la anti-detección de navegadores sin cabeza, no son absolutamente fiables, al menos no hasta ahora.

Anti-detección de navegadores sin cabeza con navegador de huellas digitales

También podemos usar un navegador de huellas digitales para eludir la detección de Chrome sin cabeza. Tomemos como ejemplo el navegador anti-detección Nstbrowser. La solución API de Nstbrowser es una de las mejores opciones para evitar la detección de bots en la actualidad. Puedes usarlo y obtener la clave API gratis.

¿Por qué usar Nstbrowser para la detección?

• ¡Nstbrowser es completamente gratis!
• Nstbrowserless es compatible con los populares Puppeteer y Playwright, proporcionando un soporte técnico más completo
• Nstbrowser admite iniciar el navegador en modo sin cabeza a través de la API.

A continuación, compararemos la efectividad de la detección del navegador sin cabeza visitando los sitios de detección de headless Chrome CreepJS y Areyouheadless a través del navegador anti-huellas digitales Nstbrowser y mi navegador local Google Chrome, respectivamente.

Usaremos la API de llamada de Puppeteer para iniciar el navegador de huellas digitales en modo sin cabeza, específicamente usaremos la interfaz LaunchExistBrowser, pero por supuesto, puedes elegir cualquier otra API que necesites según la documentación.

Antes de comenzar, necesitas:

• Paso 1. Descargar e instalar Nstbrowser con anticipación
• Paso 2. Generar una clave API
• Paso 3. Crear un perfil y descargar el kernel. También puedes iniciar tu perfil en el lado del cliente y se activará una descarga automática del kernel.

Una vez que todo esté listo, es hora de codificar. El siguiente código muestra cómo iniciar el navegador en modo sin cabeza y visitar el sitio de inspección de navegadores sin cabeza y tomar una captura de pantalla:

import puppeteer from 'puppeteer-core';

// wiat for millseconds
function sleep(millseconds) {
  return new Promise(resolve => setTimeout(resolve, millseconds));
}

// visit headless detection site and take screenshots 
async function execPuppeteer(browserWSEndpoint) {
  try {
    const browser = await puppeteer.connect({
      browserWSEndpoint: browserWSEndpoint,
      defaultViewport: null,
    });

    const page = await browser.newPage();
    // detect headless on creepjs site
    await page.goto('https://abrahamjuliot.github.io/creepjs');
    await sleep(5 * 1000);
    await page.screenshot({ fullPage: true, path: 'detect_headless_creepjs.png' });

    // detect headless on areyouheadless site
    await page.goto('https://arh.antoinevastel.com/bots/areyouheadless');
    await sleep(2 * 1000);
    await page.screenshot({ path: 'detect_headless_areyouheadless.png' });

    await page.close();
    await browser.disconnect();
  } catch (err) {
    console.error(err);
  }
}

// LaunchExistBrowser: Connect to or start an existing browser
// You need to create the corresponding profile in advance
// Support custom config
async function launchAndConnectToBrowser(profileId) {
  const host = 'localhost:8848';
  const apiKey = 'you api key;
  const config = {
    headless: true, // support: true, 'new'
    autoClose: true,
  };
  const query = new URLSearchParams({
    'x-api-key': apiKey, // required
    config: encodeURIComponent(JSON.stringify((config))),
  });
  const browserWSEndpoint = `ws://${host}/devtool/launch/${profileId}?${query.toString()}`;
  console.log('browserWSEndpoint: ', browserWSEndpoint);
  await execPuppeteer(browserWSEndpoint);
}

launchAndConnectToBrowser('your profile id').then();

Resultados de la ejecución:

• Resultados del test de CreepJS

• Resultados del test de Areyouheadless

Comparando las capturas de pantalla de los resultados con los de mi Google Chrome local, descubrimos que la detección en ambos sitios no reconoció que estábamos utilizando un navegador sin cabeza, que es lo que queríamos.

Conclusiones

A través de la discusión y el código de ejemplo en este artículo, esperamos proporcionar a los desarrolladores una referencia efectiva y orientación para mejorar la seguridad del sitio y las capacidades de protección de datos.

La detección y anti-detección de navegadores sin cabeza es un proceso evolutivo de confrontación tecnológica. El riesgo de detección y bloqueo puede contrarrestarse con la ayuda de herramientas efectivas de anti-detección. Nstbrowser puede ayudarte a asegurar que seas absolutamente indetectable y utilizar tecnología avanzada para desbloquear bloqueos de red.

Además, los desarrolladores necesitan estar atentos a los últimos avances tecnológicos y actualizar sus estrategias de detección para enfrentar nuevos desafíos. Cualquiera que sea el método utilizado para contrarrestar la detección de headlesschrome, necesita ser continuamente optimizado y mejorado para asegurar su efectividad y fiabilidad.