MAISON CODE .
/ Security · Middleware · Token Gating · Membership

Middleware de control de acceso: activación de tokens y membresías

How to build "NFT Access" or "VIP Only" collections using Edge Middleware in Remix. Bloquear solicitudes antes de que lleguen al servidor.

AB
Alex B.
Middleware de control de acceso: activación de tokens y membresías

Lanzas una oferta de “Amigos y familiares”. Envías el enlace por correo electrónico. Alguien lo publica en Reddit. 10.000 personas asaltan tu stock. Necesitas Control de acceso. La lógica debe ocurrir en el Edge. Si el usuario no tiene permiso, ni siquiera muestre la página.

Por qué Maison Code habla de esto

En Maison Code Paris, actuamos como la conciencia arquitectónica de nuestros clientes. A menudo heredamos stacks “modernos” construidos sin una comprensión fundamental de la escala.

Discutimos este tema porque representa un punto de inflexión crítico en la madurez de la ingeniería. Implementarlo correctamente diferencia un MVP frágil de una plataforma resistente de nivel empresarial.

El patrón de middleware perimetral

En Remix/Next.js, el middleware se ejecuta en cada solicitud.

// aplicación/entry.server.tsx (o middleware.ts)
importar {redireccionar} desde '@remix-run/node';

exportar función asíncrona checkAccess (solicitud, usuario) {
  URL constante = nueva URL (solicitud.url);
  
  // 1. Comprobar si la ruta está protegida
  if (url.nombreruta.startsWith('/colección/vip')) {
    
    // 2. Verificar inicio de sesión
    si (!usuario) lanza redirección('/cuenta/iniciar sesión');
    
    // 3. Verificar etiqueta/token
    etiquetas constantes = etiquetas.usuario || [];
    const hasVipTag = tags.includes('VIP_TIER_1');
    const hasNft = espera checkWallet(user.wallet, 'BORED_APE');
    
    si (!tieneVipTag && !tieneNft) {
      lanzar redirección ('/páginas/acceso denegado');
    }
  }
}

Puerta de tokens (Web3)

Para las marcas NFT, el “Inicio de sesión” es Wallet Connect. Usamos SIWE (Iniciar sesión con Ethereum).

  1. El usuario hace clic en “Conectar billetera”.
  2. Firma un nonce.
  3. El servidor verifica la firma.
  4. El servidor consulta el Nodo Blockchain (Alchemy/Infura): “¿Monedero X posee el Token Y?”
  5. En caso afirmativo, emita una cookie de sesión.

Protección con contraseña (simple)

A veces solo necesitas una contraseña para la colección. No utilices la página de contraseña global de Shopify. Cree una contraseña con alcance. Almacene el hash de la contraseña en el metacampo de la colección. El usuario ingresa la contraseña -> Verificar Hash -> Establecer cookie collection_access_123=true -> Permitir acceso.

Geo-Gating

“Este producto no se puede vender en California”. (Regulador). Marque request.cf.region (Cloudflare) o request.geo.city (Vercel). Si región === 'CA', oculte el botón “Agregar al carrito” o redirija.

5. Control de acceso basado en roles (RBAC) en el borde

“Los administradores pueden ver /dashboard. Los usuarios no”. Por lo general, esto se verifica en el componente del servidor. Pero eso desperdicia CPU. Compruébalo en Middleware. Almacene roles en JWT (user.roles = ['admin']). El middleware decodifica el JWT (ignorando la verificación de firma para mayor velocidad o verificando usando criptografía compatible con Edge). Si rol! = administrador, devuelve 403 Prohibido al instante. Esto protege su API backend de sondeos no autorizados.

6. Protección contra bots (torniquete Cloudflare)

El middleware es el lugar perfecto para detener los bots. Si “User-Agent” es “HeadlessChrome”, bloquee. Si cf-bot-score <30, bloquear. Inyectamos Cloudflare Turnstile (Smart Captcha) específicamente para solicitudes sospechosas. El usuario normal no ve nada. El robot ve un desafío. Esto sucede incluso antes de que se toque su base de datos.

8. Pruebas A/B del lado del servidor

Las pruebas A/B del lado del cliente (Google Optimize) provocan “parpadeo”. El usuario ve el título anterior durante 0,5 segundos y luego lo cambia. El middleware resuelve esto.

  1. Llega la solicitud.
  2. El middleware comprueba cookie_bucket. Si está vacío, asigne bucket=B.
  3. Reescriba la solicitud en /variants/home-b.
  4. El servidor genera la variante B.
  5. El usuario ve la Variante B al instante. Cero parpadeo. SEO seguro (si se gestionan canónicos).

9. Precios personalizados en el borde

“Los usuarios VIP obtienen un 20% de descuento”. Si haces esto en Client JS, el hacker simplemente cambia la lógica. Si lo haces en Middleware, es seguro.

  1. El middleware ve user_tier=vip.
  2. El middleware inyecta el encabezado x-pricing-tier: vip.
  3. Origin Server genera €80 en lugar de €100. El HTML llega con el precio correcto. El usuario no puede manipularlo.

10. Mitigación de DDoS en la capa de aplicación

La red DDoS está a cargo de Cloudflare. La aplicación DDoS (Capa 7) es más difícil. “Busca ‘a’ 1000 veces por segundo”. (Mata al DB). El middleware es el filtro. Implementamos Limitación de tasa de depósito de tokens por IP antes de la renderización de Remix. const permitido = esperar rateLimit.check(ip, 10, "10s"); Si superan las 10 solicitudes en 10 segundos, devuelve 429 demasiadas solicitudes. Su servidor de renderizado ni siquiera se activa.

11. La Cola (Sala de Espera Virtual)

Para “Hyped Drops” (Yeezy/Supreme), ningún servidor puede soportar el pico. El middleware redirige el tráfico a una cola virtual (Queue-it o Redis personalizado).

  1. Marque queue_token. ¿Desaparecido?
  2. Redirigir a /cola.
  3. El usuario espera. WebSocket actualiza la posición “Eres #5000”.
  4. El usuario llega al frente. Redirigir a /product?token=xyz.
  5. El middleware valida el token. Permite el acceso durante 10 minutos. Esto aplana la curva de tráfico desde un “pico” hasta una “meseta”.

12. Firma HMAC para B2B

Si tienes una tienda B2B, normalmente tienes un enlace “Portal” desde un ERP. El usuario hace clic en el enlace en NetSuite -> Inicia sesión en Shopify. ¿Cómo se asegura este enlace? HMAC (Código de autenticación de mensajes basado en hash). El enlace contiene ?user=123&timestamp=17000000&signature=abc.... El middleware verifica la firma mediante un secreto compartido. Si la “marca de tiempo” tiene más de 5 minutos, rechace. Esto permite un inicio de sesión “sin contraseña” que es criptográficamente seguro.

11. ¿Por qué Código Maison?

En Maison Code, consideramos el Middleware como el Escudo. Es la primera línea de defensa. No dejamos expuesta su lógica empresarial específica en JS del lado del cliente. Llevamos la complejidad al Edge. Hemos construido tiendas “Token Gated” para proyectos NFT y “Niveles VIP” para casas de moda de lujo. Sabemos cómo bloquear los bots mientras desplegamos la alfombra roja para los VIP.

13. Detección avanzada de bots (heurística)

Los robots son cada vez más inteligentes. Ejecutan JS. Pasan Captchas (usando granjas). Necesitamos Análisis de comportamiento en el borde.

  1. Movimiento del mouse: los robots se mueven en línea recta. Los humanos se mueven en curvas.
  2. Tiempo en la página: los bots compran en 2 segundos. Los humanos tardan 20 segundos.
  3. Encabezados de solicitud: Los bots a menudo tienen “User-Agent” y “Sec-CH-UA” que no coinciden. Usamos la lógica de Cloudflare Worker para calificar estas solicitudes. ¿Puntuación <10? Redireccionamiento silencioso a una caja “Honeypot” que les cobra pero no envía nada. Esto desperdicia su dinero y los disuade de atacarte nuevamente.

14. Geo-cercas para el cumplimiento de licencias

Vendes Nike. Puedes vender en la UE, pero no en EE. UU. La validación del “Selector de direcciones” llega demasiado tarde. El cliente de EE. UU. ve el producto, lo agrega al carrito y es rechazado al momento de pagar. Están enojados. Edge Geo-Fencing oculta el producto según la IP. Si cf-ipcountry == 'US', la página del producto devuelve 404. El usuario nunca sabe que existe. Esto protege su Acuerdo de licencia de proveedor y evita la capacidad de exportación del “mercado gris”.

15. Lista de verificación de middleware (preparación para el lanzamiento)

No implemente middleware sin verificar lo siguiente:

  1. Falla de apertura versus falla de cierre: si hay errores de middleware, ¿bloquea a todos o deja entrar a todos? (Predeterminado: Fallo cerrado por seguridad).
  2. Tiempo de espera: establece un tiempo de espera de 50 ms. Si KV es lento, no cuelgue la página.
  3. Verificación de región: ¿Probado a través de VPN desde un país bloqueado?
  4. Bypass Token: ¿Tiene un parámetro de consulta ?token=admin_bypass para acceso de emergencia?
  5. Reglas de caché: asegúrese de que Vary: Cookie esté configurado para no almacenar en caché la página “Acceso denegado” para todos.
  6. Registro: registra cada bloque en Datadog.
  7. Agente de usuario: incluir en la lista blanca el robot de Google (comprobación de agente de usuario).
  8. Límite de velocidad: ¿El límite es por IP o por sesión?
  9. Activos estáticos: omita el middleware para .jpg, .css, .js.
  10. [] Manejo de excepciones: Bloqueo Try/Catch alrededor de todo.
  11. Arranque en frío: Verifique que el arranque en frío de WASM sea < 10 ms.
  12. Costo: Monitorear invocaciones. El middleware se ejecuta en cada solicitud.
  13. Bucle de redireccionamiento: asegúrese de no redirigir a una página protegida.
  14. Aplicación móvil: ¿Su middleware interrumpe las llamadas API de la aplicación iOS?
  15. Mapa del sitio: no ocultar sitemap.xml.

16. Conclusión

La vigilancia crea escasez. La escasez crea valor. Pero la Puerta debe estar segura. Ocultar un botón mediante CSS (display: none) no es seguridad. Cualquiera puede inspeccionar el elemento. El middleware es la única manera. Es rápido, invisible e irrompible.

**[Contrate a nuestros arquitectos](/contact)**.