chromedevtools/cookie-debugging

Conceptos Básicos

HttpOnly vs Almacenamiento del Lado del Cliente

Las cookies marcadas como HttpOnly no pueden ser accedidas ni modificadas por JavaScript del lado del cliente (cookieStore o document.cookie). Sin embargo, el navegador adjunta automáticamente las cookies HttpOnly activas a los encabezados de solicitud HTTP salientes (Cookie).

• Para inspeccionar los valores HttpOnly actuales: Observa el encabezado de solicitud Cookie de cualquier solicitud HTTP saliente a través de get_network_request.
• Para inspeccionar cómo se crearon o configuraron las cookies: Observa el encabezado de respuesta Set-Cookie de las respuestas de inicio de sesión/autenticación.
• Para inspeccionar cookies no HttpOnly: Usa evaluate_script con la API moderna cookieStore (async () => await cookieStore.getAll()).

Estrategia de Sesión: Pestaña Activa vs Contexto Aislado

Elige el entorno de sesión adecuado para evitar la contaminación de estado (por ejemplo, tokens de análisis o autenticación residuales):

Estrategia	Cuándo Usar	Configuración / Finalización
Pestaña Activa (Página Activa)	Diagnosticar una sesión de usuario activa, un error 401/403 en vivo o el estado actual.	Opera directamente en la página actualmente seleccionada.
Estado Limpio (isolatedContext)	Probar banners de consentimiento de cookies, primeras visitas o garantías de cero cookies.	Llama a new_page con un isolatedContext único (ej. "consent-audit-1"). Cuando termines, llama a close_page.

Capacidades y Limitaciones del Lado del Cliente

Acción	JavaScript del Lado del Cliente (cookieStore / document.cookie)	Herramientas de Red y Contexto de DevTools
Leer No-HttpOnly	✅ async () => await cookieStore.getAll()	✅ get_network_request (Solicitud Cookie)
Leer HttpOnly	❌ Bloqueado por la seguridad del navegador	✅ get_network_request (Solicitud Cookie)
Inspeccionar Atributos (Domain, Path, SameSite, Expires)	✅ async () => await cookieStore.getAll()	✅ get_network_request (Respuesta Set-Cookie)
Modificar / Eliminar No-HttpOnly	✅ async () => await cookieStore.set(...)	N/A
Modificar / Eliminar HttpOnly	❌ Fallo silencioso en JavaScript	✅ Usa new_page(isolatedContext: ...) para estado limpio

[!ADVERTENCIA] Intentar eliminar una cookie HttpOnly a través de JavaScript (cookieStore.delete o document.cookie = "...; max-age=0") fallará silenciosamente. Para probar en un estado no autenticado o nuevo, siempre genera un nuevo contexto aislado usando new_page con isolatedContext.

---

Patrones de Flujo de Trabajo

1. Diagnosticar Fallos de Autenticación y Redirecciones (401 / 403)

Cuando una solicitud de página autenticada falla, devuelve 401/403 o redirige al inicio de sesión:

1. Listar Solicitudes Recientes: Llama a list_network_requests con includePreservedRequests: true.
2. Encontrar la Solicitud Objetivo: Localiza la solicitud fallida (401/403) o la redirección (302/307).
3. Inspeccionar el Encabezado Cookie Saliente: Llama a get_network_request con el reqid.
   • Verifica si el encabezado Cookie fue adjuntado y si los tokens requeridos (ej. SESSION_ID, auth_token) fueron enviados.
4. Desencadenar una Inspección Activa (Si no existe una solicitud reciente):
   • Si la cookie se configuró en una sesión anterior y no aparece ninguna llamada de red, desencadena una solicitud:
     • Usa navigate_page con reload: true, O
     • Llama a evaluate_script con () => fetch(window.location.href)
   • Luego llama a get_network_request en la nueva solicitud para inspeccionar el encabezado Cookie activo.
5. Rastrear la Solicitud de Configuración: Si la cookie falta o es rechazada:
   • Revisa las respuestas anteriores de inicio de sesión/negociación en busca de directivas Set-Cookie:
     • Desajuste de Ruta: ej., Path=/api cuando la solicitud es a /.
     • Desajuste de Dominio: ej., Domain=api.example.com impidiendo cookies en sub.example.com.
     • Indicador Secure en HTTP: Las cookies Secure nunca se envían a través de http:// no cifrado.
     • Bloqueo de SameSite: Las cookies SameSite=Strict se omiten en navegaciones entre sitios.
     • Caducidad: Verifica si Expires o Max-Age han transcurrido.

2. Pruebas de Conformidad de Banners de Cookies y Consentimiento

Para verificar que no se establezcan cookies no esenciales o de rastreo antes del consentimiento o al rechazar:

1. Iniciar Limpio: Abre un nuevo contexto aislado con un nombre dedicado:

   {"url": "<PAGE_URL>", "isolatedContext": "consent-test-1"}
   

2. Registrar Cookies de Referencia: Antes de interactuar con el banner, ejecuta evaluate_script con async () => await cookieStore.getAll().
3. Inspeccionar Solicitudes de Red Prematuras y Problemas:
   • Llama a list_network_requests para asegurarte de que no se hayan disparado balizas de rastreo de terceros antes del consentimiento.
   • Llama a list_console_messages con types: ["issue"] para verificar advertencias de rastreo.
4. Interactuar con el Banner de Consentimiento:
   • Captura una instantánea con take_snapshot para localizar el uid del botón "Rechazar" o "Rechazar Todo".
   • Haz clic en el botón con click.
5. Verificar la Diferencia de Cookies:
   • Ejecuta evaluate_script con async () => await cookieStore.getAll() después de hacer clic para confirmar que solo existen cookies estrictamente necesarias o de estado de consentimiento.
6. Probar la Revocación del Consentimiento (Auditoría del Ciclo de Vida):
   • Al auditar la retirada del consentimiento o los cambios de preferencias:
     • Localiza y haz clic en el botón "Configuración de Cookies", "Gestionar Preferencias" o el desencadenante de privacidad del pie de página (take_snapshot $\rightarrow$ click).
     • Desmarca las categorías no esenciales o haz clic en "Revocar Todo" / "Guardar Preferencias".
     • Vuelve a consultar cookieStore.getAll() para verificar que las cookies no esenciales previamente aceptadas se hayan eliminado o caducado.
     • Llama a list_network_requests en acciones posteriores para asegurarte de que las balizas de rastreo ya no se disparen.
7. Finalizar Contexto: Llama a close_page cuando la auditoría esté completa para evitar que las cookies sobrantes afecten a tareas posteriores.

3. Auditoría de Seguridad, SameSite y CHIPS de Cookies (Cookies Particionadas)

1. Vía Rápida: Problemas Nativos de DevTools (Recomendado):
   • Llama a list_console_messages con:

     {
       "types": ["issue"],
       "includePreservedMessages": true
     }
     

   • Verifica si hay entradas de CookieIssue, como:
     • SameSiteNoneInsecure: SameSite=None sin Secure.
     • ThirdPartyCookiePhaseout: Cookie de terceros bloqueada o restringida.
     • SchemefulSameSite: Problemas de cookies entre esquemas.
     • PartitionedCookies: Atributos de partición CHIPS no válidos.
2. Auditoría Profunda: Cookies de Terceros de Lighthouse:
   • Ejecuta lighthouse_audit con mode: "navigation" y outputDirPath: "/tmp/lh-report".
   • Extrae la auditoría de cookies específica sin cargar el informe completo en el contexto:

     node -e "const r=require('/tmp/lh-report/report.json'); const a=r.audits['third-party-cookies']; console.log(JSON.stringify({score: a?.score, display