Flujo Implícito

Definición

Imagina que estás en un parque de atracciones, y en lugar de ir a la taquilla para intercambiar tu reserva por una pulsera (como hace el Flujo de Código de Autorización), alguien simplemente te da la pulsera directamente en la entrada - a la vista de todos en la fila. ¿Conveniente? Claro. ¿Seguro? No tanto. Cualquiera que esté mirando podría potencialmente agarrar esa pulsera o fotografiarla. Esto es esencialmente lo que hace el Flujo Implícito en OAuth 2.0 - omite el paso de intercambio seguro y pone el access token directamente en la URL donde es visible y potencialmente vulnerable.

El Flujo Implícito fue creado en los primeros días de OAuth 2.0 (alrededor de 2012) como un atajo para aplicaciones JavaScript basadas en navegador que no podían almacenar secretos de forma segura. El flujo funcionaba así: tu app redirigía a los usuarios al servidor de autorización, los usuarios iniciaban sesión, y el servidor redirigía de vuelta con el access token incrustado directamente en el fragmento de URL (la parte después del símbolo #). Sin código intermedio, sin intercambio del lado del servidor - el token aparecía inmediatamente. Esto parecía conveniente cuando las aplicaciones de página única eran nuevas y la seguridad del navegador era menos entendida.

Esto es lo crítico que debes saber: El Flujo Implícito está oficialmente deprecado y NUNCA debería usarse en aplicaciones nuevas. OAuth 2.1 lo ha eliminado por completo. ¿Por qué? El token aparece en el historial del navegador, puede filtrarse a través de headers de referencia, es accesible para extensiones del navegador, y no hay forma de refrescarlo sin interacción del usuario. Los navegadores modernos y las capacidades de JavaScript (PKCE - Proof Key for Code Exchange) ahora permiten alternativas seguras. Si estás manteniendo un sistema legacy que usa Flujo Implícito, planifica tu migración a Flujo de Código de Autorización con PKCE inmediatamente. Para proyectos nuevos, nunca ni siquiera consideres el Flujo Implícito.

Ejemplo

Escenario Real 1: App de Página Única Legacy (NO COPIAR) Una aplicación JavaScript construida en 2014 usa Flujo Implícito. Cuando los usuarios inician sesión, son redirigidos al proveedor OAuth, luego de vuelta a https://app.com/callback#access_token=abc123&token_type=Bearer&expires_in=3600. El JavaScript lee el token del fragmento de URL. Este token está ahora en el historial del navegador, visible en las herramientas de desarrollador del navegador, y potencialmente capturado por servicios de analytics o seguimiento de errores. Esta es la vulnerabilidad en acción.

Escenario Real 2: Robo de Token vía Extensión del Navegador Un usuario con una extensión del navegador maliciosa (o comprometida) inicia sesión en un sitio usando Flujo Implícito. La extensión tiene permiso para leer URLs y contenido de páginas. Silenciosamente captura el access token del fragmento de URL y lo envía al servidor de un atacante. El atacante ahora puede suplantar al usuario. Con Flujo de Código de Autorización, el código sería inútil sin el client secret, pero los tokens del Flujo Implícito son directamente utilizables.

Escenario Real 3: Filtración de Header Referrer Un usuario inicia sesión en un sitio usando Flujo Implícito. El token está en el fragmento de URL. Luego hace clic en un enlace a un sitio externo. Aunque los fragmentos se supone que no se envían en headers Referrer, varios comportamientos del navegador y cadenas de redirección pueden filtrar esta información. Los logs del servidor del sitio externo ahora podrían contener el access token del usuario.

Escenario Real 4: Viaje de Migración Una empresa tiene una SPA construida en 2015 usando Flujo Implícito. En 2023, comienzan la migración a Flujo de Código de Autorización con PKCE. Actualizan su librería OAuth, modifican el manejo de redirección para intercambiar códigos en lugar de leer tokens directamente, e implementan refresco de tokens. La experiencia de usuario realmente mejora - las sesiones duran más porque pueden refrescar tokens sin re-autenticación.

Analogía

La Analogía de la Contraseña Gritada: El Flujo Implícito es como un edificio donde en lugar de susurrar tu contraseña a un guardia de seguridad (intercambio seguro), gritan tu código de acceso temporal a través del vestíbulo para que lo escuches. Cualquier otra persona en el vestíbulo también lo escucha. El Flujo de Código de Autorización con PKCE es como intercambiar notas encriptadas con el guardia - solo tú y el guardia conocen el código real.

El Dinero en la Esquina de la Calle: Obtener tokens vía Flujo Implícito es como que te entreguen tu cheque de pago en efectivo en una esquina de calle concurrida. Sí, obtienes el dinero inmediatamente, pero todos pueden verlo, alguien podría agarrarlo, y hay un registro del traspaso visible para los transeúntes. El Flujo de Código de Autorización es como una transferencia bancaria segura - el dinero llega a tu cuenta sin que nadie más lo vea.

La Caja Fuerte del Ascensor de Cristal: Imagina una instalación segura donde tus credenciales se envían hacia arriba en un ascensor de cristal que todos pueden ver a través. El Flujo Implícito es este ascensor de cristal - los “bienes” (token) son visibles durante el transporte. El Flujo de Código de Autorización es como un ascensor privado y cerrado - lo que hay dentro permanece oculto durante el viaje.

El Buzón Sin Cerrar: El Flujo Implícito es como tener correo valioso entregado a un buzón sin cerrar en la acera. Cualquiera que pase puede mirar dentro. El Flujo de Código de Autorización es como tener el correo entregado a una caja cerrada dentro de tu casa - solo alguien que ya tiene acceso a tu casa puede obtener el correo.

Diagrama

sequenceDiagram
    participant User as Usuario
    participant App as App Navegador
    participant Auth as Servidor de Autorización

    Note over User,Auth: ⚠️ DEPRECADO - NO usar
    User->>App: 1. Clic "Iniciar sesión"
    App->>Auth: 2. Redirigir a /authorize
(response_type=token)
    Auth->>User: 3. Mostrar formulario de login
    User->>Auth: 4. Introducir credenciales y aprobar
    Auth->>App: 5. Redirigir con token en fragmento URL
#access_token=xyz&token_type=Bearer
    Note over App: ❌ Token expuesto en:
- Historial del navegador
- Headers referrer
- Logs del servidor
    Note over App: ❌ Sin refresh token
❌ Sin autenticación de cliente
    App->>App: 6. Extraer token de URL

    rect rgb(255, 200, 200)
        Note over User,Auth: ¡Usa Authorization Code + PKCE en su lugar!
    end

Code Example

// Flujo Implícito (DEPRECADO - NO USAR)
// Redirigir al servidor de autorización
const authUrl =
  'https://oauth.provider.com/authorize?' +
  'response_type=token&' + // Devuelve token directamente (INSEGURO)
  'client_id=your_client_id&' +
  'redirect_uri=https://yourapp.com/callback&' +
  'scope=read:user&' +
  'state=random_state';

window.location.href = authUrl;

// Callback recibe token en fragmento URL
// https://yourapp.com/callback#access_token=abc123&token_type=Bearer&expires_in=3600

// Extraer token del fragmento URL (ENFOQUE DEPRECADO)
const hash = window.location.hash.substring(1);
const params = new URLSearchParams(hash);
const accessToken = params.get('access_token'); // INSEGURO

// Por qué esto es peligroso:
// 1. Token está en el historial del navegador
// 2. Token visible para extensiones del navegador
// 3. Token potencialmente en logs del servidor (vía referrer)
// 4. Token no puede ser refrescado
// 5. Token es directamente usable si es robado

// ============================================
// EN SU LUGAR USAR: Authorization Code Flow con PKCE
// ============================================
import { generateCodeVerifier, generateCodeChallenge } from './pkce-utils';

// Paso 1: Generar parámetros PKCE
const codeVerifier = generateCodeVerifier();  // Almacenar de forma segura
const codeChallenge = await generateCodeChallenge(codeVerifier);

// Paso 2: Redirigir con code_challenge (no token)
const secureAuthUrl =
  'https://oauth.provider.com/authorize?' +
  'response_type=code&' +           // Solicitar CÓDIGO, no token
  'client_id=your_client_id&' +
  'redirect_uri=https://yourapp.com/callback&' +
  'scope=read:user&' +
  'state=random_state&' +
  'code_challenge=' + codeChallenge + '&' +
  'code_challenge_method=S256';

// Paso 3: Intercambiar código por token (lado servidor o con PKCE)
// El código solo es inútil sin code_verifier
async function exchangeCodeForToken(code) {
  const response = await fetch('https://oauth.provider.com/token', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams({
      grant_type: 'authorization_code',
      code: code,
      redirect_uri: 'https://yourapp.com/callback',
      client_id: 'your_client_id',
      code_verifier: codeVerifier  // Demuestra que iniciaste el flujo
    })
  });
  return response.json();  // { access_token, refresh_token, id_token }
}

Notas de Seguridad

Estándares y RFCs