Control de tasa de cuadros con BotBrowser

Introducción

La API requestAnimationFrame sincroniza las operaciones de dibujo con la frecuencia de actualización de la pantalla para animaciones más suaves y mejor eficiencia. Sin embargo, la frecuencia de las llamadas revela la tasa de actualización del monitor — 60 Hz produce ~16.67 ms entre frames, 144 Hz ~6.94 ms, etc. Esta información es accesible sin permisos y constituye una señal fiable de fingerprinting.

Impacto en la privacidad

La tasa de actualización es una característica de hardware que rara vez cambia entre sesiones. Con la diversificación de paneles (60, 75, 90, 120, 144, 165, 240, 360 Hz) y configuraciones multi-monitor, la información de frame rate aporta entropía significativa.

Antecedentes técnicos

requestAnimationFrame y la tasa de actualización

requestAnimationFrame(callback) invoca el callback antes de cada repintado; midiendo los timestamps de los frames se puede deducir la frecuencia con alta precisión. Con 10–60 frames se obtiene un cálculo fiable en menos de 200 ms.

Animaciones CSS y VRR

Las animaciones CSS también avanzan a la tasa de actualización. Las pantallas con VRR (G-Sync, FreeSync, ProMotion) añaden complejidad: los cambios dinámicos de frecuencia generan patrones característicos.

Enfoques comunes y limitaciones

VPNs y modos privados no afectan la tasa de actualización. Extensiones que envuelven requestAnimationFrame o alteran timestamps suelen ser detectables por inconsistencias con CSS o performance.now().

Enfoque de BotBrowser a nivel de motor

BotBrowser controla la tasa de frames en el propio bucle de renderizado mediante la bandera --bot-fps. No es un envoltorio JavaScript; el pipeline de renderizado opera a la tasa configurada, haciendo coherentes requestAnimationFrame, animaciones CSS y todas las señales temporales.

Modos de uso

# Usar tasa definida por el perfil
chrome --bot-profile="/path/to/profile.enc" --bot-fps=profile

# Fijar 60 FPS
chrome --bot-profile="/path/to/profile.enc" --bot-fps=60

# Usar la tasa real del display
chrome --bot-profile="/path/to/profile.enc" --bot-fps=real

Integración con Playwright / Puppeteer

Los ejemplos de Playwright y Puppeteer deben lanzar BotBrowser con --bot-fps apropiado; requestAnimationFrame entonces reportará la tasa configurada.

Verificación

Ejecuta un script que mida timestamps de requestAnimationFrame y confirma que la FPS medida coincide con la configurada.

Buenas prácticas

1. Emparejar FPS con el perfil de hardware.
2. Usar --bot-fps=profile para flujos automatizados.
3. Evitar valores arbitrarios que no correspondan a hardware real.

Resumen

BotBrowser ofrece control de la tasa de cuadros a nivel de motor para mitigar el fingerprinting por refresh rate. Combinado con protección de timing y Canvas, forma parte de una estrategia completa de control de señales hardware.

title: "Control de tasa de cuadros con BotBrowser" description: "Como BotBrowser controla las senales de frecuencia de actualizacion de pantalla con el flag --bot-fps a nivel del motor del navegador." date: "2025-07-08" locale: es category: fingerprint tags: ["fps", "frame-rate", "requestAnimationFrame", "fingerprinting", "privacy"] published: true

El riesgo de privacidad

La frecuencia de actualizacion de pantalla, medible a traves del timing de requestAnimationFrame, revela el hardware del monitor. Este valor esta determinado por el hardware fisico y no cambia al borrar cookies o cambiar de navegador.

La solucion de BotBrowser

BotBrowser proporciona el flag --bot-fps para controlar la tasa de cuadros a nivel de la tuberia de renderizado del motor del navegador.

Tasa de cuadros basada en perfil

Usa el valor del perfil de huella digital:

chrome --bot-profile="/path/to/profile.enc" \
       --bot-fps=profile \
       --user-data-dir="$(mktemp -d)"

Esto reporta la tasa de cuadros definida en el perfil, independientemente de la frecuencia de actualizacion real de la pantalla.

Tasa de cuadros personalizada o real

Establece un valor especifico o usa la frecuencia real de la pantalla:

# 60 FPS fijos
chrome --bot-profile="/path/to/profile.enc" \
       --bot-fps=60

# Frecuencia real de actualizacion de pantalla
chrome --bot-profile="/path/to/profile.enc" \
       --bot-fps=real

Control a nivel del motor

Porque opera a nivel de la tuberia de renderizado:

• Los callbacks de requestAnimationFrame se ejecutan a la tasa controlada
• Las marcas de tiempo de cuadro son consistentes con la tasa reportada
• Las animaciones CSS se comportan consistentemente con la tasa de cuadros reportada

Verificacion

Despues de iniciar con --bot-fps, verifica la tasa de cuadros:

const { chromium } = require('playwright-core');

const browser = await chromium.launch({
  executablePath: '/path/to/botbrowser/chrome',
  args: [
    '--bot-profile=/path/to/profile.enc',
    '--bot-fps=60',
  ],
  headless: true,
});

const page = await (await browser.newContext()).newPage();

const measuredFps = await page.evaluate(() => {
  return new Promise(resolve => {
    const timestamps = [];
    function frame(ts) {
      timestamps.push(ts);
      if (timestamps.length < 60) {
        requestAnimationFrame(frame);
      } else {
        const intervals = [];
        for (let i = 1; i < timestamps.length; i++) {
          intervals.push(timestamps[i] - timestamps[i - 1]);
        }
        const avg = intervals.reduce((a, b) => a + b) / intervals.length;
        resolve(Math.round(1000 / avg));
      }
    }
    requestAnimationFrame(frame);
  });
});

console.log('FPS medidos:', measuredFps); // Debe ser ~60

Verificaciones clave:

1. La tasa de cuadros medida coincide con el valor configurado
2. Los intervalos entre cuadros son consistentes
3. Multiples metodos de medicion producen el mismo resultado

Primeros pasos

1. Descarga BotBrowser desde GitHub
2. Carga un perfil de huella digital con --bot-profile
3. Establece la tasa de cuadros con --bot-fps=profile, --bot-fps=real o --bot-fps=60
4. Verifica que la tasa de cuadros reportada coincida con tu configuracion