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

Este mensaje aparece cuando un sitio web (frecuentemente protegido por Cloudflare o similar) detecta que el navegador del cliente no cumple con los requisitos mínimos de seguridad y ejecución. No es un error de tu código front-end, sino una defensa activa contra bots o navegadores no compatibles.

---

🔍 Raíz técnica del problema

Cloudflare (u otros WAF/CDN) inyecta un JavaScript challenge para verificar que el cliente es un navegador real y no un script automatizado (como curl, requests de Python, o navegadores headless mal configurados). Si el cliente no ejecuta JS o no permite cookies, el servidor bloquea la solicitud y muestra este mensaje.

Causas comunes:

• Uso de un entorno sin soporte para JS (ej. requests en Python sin cloudscraper).
• Navegador headless (Puppeteer, Playwright) sin configuración para resolver challenges.
• Cookies deshabilitadas explícitamente.
• Configuración de privacidad estricta (ej. bloqueo de third-party scripts).
• Uso de proxies o VPNs que alteran headers HTTP.

---

✅ Solución definitiva (por escenario)

🛠️ Caso 1: Estás automatizando una solicitud (Python, Node.js, etc.)

No uses requests o axios directamente. Necesitas un solver que simule un navegador real.

✅ En Python: usa cloudscraper

pip install cloudscraper

import cloudscraper

scraper = cloudscraper.create_scraper(
    browser={
        'browser': 'firefox',
        'platform': 'windows',
        'mobile': False
    }
)

response = scraper.get("https://example.com")
print(response.text)

✅ En Node.js: usa puppeteer + cloudflare-bypass

npm install puppeteer cloudflare-bypass

const puppeteer = require('puppeteer');
const { CloudflareBypass } = require('cloudflare-bypass');

(async () => {
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();

  // Inyecta el solver de Cloudflare
  const cfBypass = new CloudflareBypass(page);
  await cfBypass.solve('https://example.com');

  // Ahora puedes hacer la solicitud
  await page.goto('https://example.com', { waitUntil: 'networkidle0' });

  const content = await page.content();
  console.log(content);

  await browser.close();
})();

⚠️ Importante: Cloudflare cambia sus challenges frecuentemente. Usa librerías actualizadas y monitorea sus repositorios.

---

🖥️ Caso 2: Eres usuario final (no desarrollador)

1. Habilita JavaScript:
   • Chrome: Configuración → Privacidad y seguridad → Seguridad → Habilitar JavaScript.
   • Firefox: Preferencias → Privacidad y seguridad → Permisos → Habilitar JavaScript.
2. Habilita cookies de terceros:
   • En Chrome/Firefox: busca Cookies y datos de sitios y deshabilita la opción Bloquear cookies de terceros (o añade el dominio a excepciones).
3. Desactiva extensiones de privacidad (uBlock Origin, Privacy Badger, etc.) temporalmente.
4. Reinicia el navegador y vuelve a cargar la página.

---

🧪 Caso 3: Estás probando tu propio sitio con Cloudflare activo

Si estás probando localmente o en staging:

1. Desactiva temporalmente el modo "Under Attack" en Cloudflare (panel → Security → WAF).
2. Asegúrate de que tu entorno de desarrollo no bloquee cookies (verifica Set-Cookie y SameSite=None; Secure en headers).
3. Usa localhost con HTTPS (o un túnel como ngrok) para evitar desafíos por dominio no confiable.

---

💡 Pro-tip: Diagnóstico rápido

Abre la consola del navegador y busca:

• Uncaught ReferenceError: _cf_chl_opt is not defined → JS no cargado.
• Cookie 'cf_clearance' not found → Challenge no resuelto.
• 403 Forbidden con cuerpo HTML que contiene challenge-error-text → Bloqueo por WAF.

📌 Clave: Si el HTML contiene <div id="challenge-error-text">, el servidor nunca llegó a servir tu contenido real. El problema está en la capa de seguridad, no en tu aplicación.

---

✅ Solución aplicable al 99% de los casos reales: Usa cloudscraper (Python) o puppeteer + cloudflare-bypass (Node.js). Evita reinventar la rueda con fetch o axios.