Erick Eduardo Ramos

Posted on Sep 14

Cómo solucionar el error \"Enable JavaScript and cookies to continue\"

#webdev #security #javascript

Cómo solucionar el error "Enable JavaScript and cookies to continue"

Este mensaje aparece cuando Cloudflare (u otro proxy de seguridad similar) bloquea la solicitud del navegador porque detecta que JavaScript está deshabilitado o no se cumplen los requisitos mínimos de seguridad para permitir el acceso.

¿Por qué ocurre?

Cloudflare implementa un desafío de seguridad (JavaScript Challenge) para verificar que el cliente es un navegador real y no un bot malicioso. El flujo es el siguiente:

El navegador hace una solicitud HTTP a tu sitio.
Cloudflare intercepta la petición y responde con una página HTML que contiene un script de verificación (_cf_chl_opt).
El navegador debe ejecutar ese script, que calcula un token criptográfico y lo envía como cookie o parámetro.
Si JavaScript está deshabilitado, la cookie no se establece, y Cloudflare sigue mostrando el mensaje de error.

⚠️ Causas comunes en desarrollo:

Pruebas locales sin configurar correctamente localhost con HTTPS (Cloudflare requiere HTTPS para el desafío).
Uso de navegadores headless (Puppeteer, Playwright, Selenium) sin habilitar JS.
Configuración errónea de Cloudflare Rocket Loader o Browser Integrity Check.
Solicitudes automatizadas (crawlers, scripts, tests) que no simulan un navegador real.

Pasos para solucionarlo

✅ 1. Verifica que JavaScript esté habilitado en el navegador

En Chrome/Firefox/Edge: abre chrome://settings/content/javascript → Permitir que todos los sitios ejecuten JavaScript.
En modo incógnito: prueba con una ventana limpia (sin extensiones que bloqueen JS).

✅ 2. Si usas Cloudflare, ajusta los ajustes de seguridad

Ve a Cloudflare Dashboard → Security → WAF → Browser Integrity Check y:

Desactiva temporalmente el modo High o Under Attack.
O bien, cambia a "Essential" (menos estricto).

También revisa:

Cloudflare Dashboard → Scrape Shield → Disable "Browser Integrity Check" (solo si no lo necesitas para producción).

✅ 3. Para entornos de desarrollo local

Usa https://localhost con certificado autofirmado válido (Chrome lo acepta tras añadir una excepción).
O mejor: usa ngrok o cloudflared para exponer tu localhost con HTTPS real:

  ngrok http 3000
  # Luego configura tu dominio en Cloudflare para apuntar a `xxx.ngrok.io`

✅ 4. Si usas Puppeteer/Playwright: habilita JS y cookies

Puppeteer (Node.js)

const browser = await puppeteer.launch({
  headless: 'new',
  args: ['--disable-web-security', '--disable-features=IsolateOrigins,site-per-process']
});

const page = await browser.newPage();
await page.setCookie({
  name: 'test',
  value: '1',
  domain: 'tu-dominio.com'
});
await page.goto('https://tu-dominio.com', { waitUntil: 'networkidle0' });

Playwright (Node.js)

const context = await browser.newContext({
  permissions: ['geolocation'],
  viewport: { width: 1280, height: 720 }
});
const page = await context.newPage();
await page.goto('https://tu-dominio.com', { waitUntil: 'domcontentloaded' });
// Si es necesario, espera explícitamente al desafío:
await page.waitForSelector('#challenge-form', { timeout: 5000 });
await page.evaluate(() => document.getElementById('challenge-form').submit());

✅ 5. Para pruebas unitarias o scripts automatizados

Evita pasar por el desafío Cloudflare:

Usa un entorno sin Cloudflare (ej. 127.0.0.1:3000 sin proxy).
O configura una regla en Cloudflare para excluir rutas de prueba del WAF:
- Cloudflare Dashboard → Rules → Firewall Rules → Create Rule
- Expression: http.host eq "test.tu-dominio.com" and not ip.src in {192.168.0.0/16}
- Action: Skip

Bloque de código corregido (ejemplo práctico: Puppeteer + bypass)

// bypass-cloudflare.js
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: 'new',
    args: [
      '--no-sandbox',
      '--disable-setuid-sandbox',
      '--disable-dev-shm-usage',
      '--disable-web-security',
      '--disable-features=IsolateOrigins,site-per-process'
    ]
  });

  const page = await browser.newPage();
  // Forzar cookies y JS
  await page.setCookie({ name: 'cf_clearance', value: 'dummy', domain: '.tu-dominio.com' });
  await page.goto('https://tu-dominio.com', {
    waitUntil: 'networkidle0',
    timeout: 60000
  });

  // Esperar y resolver el desafío si es necesario
  try {
    await page.waitForSelector('#challenge-form', { timeout: 5000 });
    await page.evaluate(() => {
      const form = document.getElementById('challenge-form');
      if (form) form.submit();
    });
    await page.waitForNavigation({ waitUntil: 'networkidle0' });
  } catch (e) {
    console.log('No se detectó desafío (ya pasó)');
  }

  console.log('✅ Acceso permitido. Título:', await page.title());
  await browser.close();
})();

Pro-tip: Evita el desafío en producción

No expongas tu API directamente detrás de Cloudflare sin autenticación.
Usa un endpoint /health sin Cloudflare (o con regla de exclusión) para monitoreo.
Para bots legítimos (Googlebot, Bingbot), configura Cloudflare → Crawler Intelligence → Allow.
Si usas Cloudflare para protección, nunca desactives el WAF en producción; en su lugar, usa cf_clearance dinámico o integra un resolver de desafíos (como cloudscraper) solo en entornos controlados.

🔑 Clave final: Este error nunca es un bug en tu código frontend. Es una medida de seguridad activa. Soluciónalo configurando correctamente el entorno, no el código.

DEV Community