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

Middleware de contrôle d'accès : contrôle de jetons et adhésions

Comment créer des collections « NFT Access » ou « VIP Only » à l'aide de Edge Middleware dans Remix. Bloquer les requêtes avant qu'elles n'atteignent le serveur.

AB
Alex B.
Middleware de contrôle d'accès : contrôle de jetons et adhésions

Vous lancez une vente « Amis & Famille ». Vous envoyez le lien par e-mail. Quelqu’un l’a posté sur Reddit. 10 000 personnes pillent votre stock. Vous avez besoin d’un Gatekeeping. La logique doit se produire au Edge. Si l’utilisateur n’est pas autorisé, n’affichez même pas la page.

Pourquoi Maison Code en parle

Chez Maison Code Paris, nous agissons comme la conscience architecturale de nos clients. Nous héritons souvent de stacks “modernes” construites sans compréhension fondamentale de l’échelle.

Nous abordons ce sujet car il représente un point de pivot critique dans la maturité de l’ingénierie. Une mise en œuvre correcte différencie un MVP fragile d’une plateforme résiliente de niveau entreprise.

Le modèle de middleware Edge

Dans Remix/Next.js, le middleware s’exécute à chaque requête.

// app/entry.server.tsx (ou middleware.ts)
importer {redirection} depuis '@remix-run/node' ;

exporter la fonction asynchrone checkAccess (demande, utilisateur) {
  const url = nouvelle URL (request.url);
  
  // 1. Vérifiez si la route est protégée
  if (url.pathname.startsWith('/collection/vip')) {
    
    // 2. Vérifiez la connexion
    if (!user) throw redirect('/account/login');
    
    // 3. Vérifiez la balise/le jeton
    balises const = utilisateur.tags || [] ;
    const hasVipTag = tags.includes('VIP_TIER_1');
    const hasNft = wait checkWallet(user.wallet, 'BORED_APE');
    
    si (!hasVipTag && !hasNft) {
      throw redirect('/pages/access-denied');
    }
  }
}

Accès aux jetons (Web3)

Pour les marques NFT, le « Login » est un Wallet Connect. Nous utilisons SIWE (Connexion avec Ethereum).

  1. L’utilisateur clique sur « Connecter le portefeuille ».
  2. Signe un nonce.
  3. Le serveur vérifie la signature.
  4. Le serveur interroge le nœud Blockchain (Alchemy/Infura) : « Le portefeuille X possède-t-il le jeton Y ?
  5. Si oui, émettez un cookie de session.

Protection par mot de passe (simple)

Parfois, vous avez juste besoin d’un mot de passe pour la collection. N’utilisez pas la page de mot de passe globale de Shopify. Créez un Mot de passe limité. Stockez le hachage du mot de passe dans le métachamp de collection. L’utilisateur saisit le mot de passe -> Vérifier le hachage -> Définir le cookie collection_access_123=true -> Autoriser l’accès.

Géolocalisation

“Ce produit ne peut pas être vendu en Californie.” (Réglementaire). Vérifiez request.cf.region (Cloudflare) ou request.geo.city (Vercel). Si region === 'CA', masquez le bouton « Ajouter au panier » ou redirigez.

5. Contrôle d’accès basé sur les rôles (RBAC) à la périphérie

“Les administrateurs peuvent voir /dashboard. Les utilisateurs ne le peuvent pas.” Habituellement, vous vérifiez cela dans le composant serveur. Mais cela gaspille du CPU. Vérifiez-le dans le middleware. Stockez les rôles dans le JWT (user.roles = ['admin']). Le middleware décode le JWT (en ignorant la vérification de la signature pour la vitesse ou en vérifiant à l’aide d’un chiffrement compatible Edge). Si role != admin, renvoie 403 Forbidden instantanément. Cela protège votre API backend contre les sondages non autorisés.

6. Protection contre les robots (tourniquet Cloudflare)

Le middleware est l’endroit idéal pour arrêter les robots. Si User-Agent est HeadlessChrome, bloquez. Si cf-bot-score < 30, bloquez. Nous injectons Cloudflare Turnstile (Smart Captcha) spécifiquement pour les demandes suspectes. L’utilisateur normal ne voit rien. Le bot voit un défi. Cela se produit avant même que votre base de données ne soit touchée.

8. Tests A/B côté serveur

Les tests A/B côté client (Google Optimize) provoquent un « scintillement ». L’utilisateur voit l’ancien titre pendant 0,5 seconde, puis il l’échange. Le middleware résout ce problème.

  1. La demande arrive.
  2. Le middleware vérifie cookie_bucket. S’il est vide, attribuez bucket=B.
  3. Réécrivez la demande dans /variants/home-b.
  4. Le serveur restitue la variante B.
  5. L’utilisateur voit instantanément la variante B. Zéro scintillement. SEO sécurisé (si les canoniques sont gérées).

9. Tarification personnalisée à la limite

“Les utilisateurs VIP bénéficient de 20 % de réduction.” Si vous faites cela dans Client JS, le pirate informatique change simplement la logique. Si vous le faites en Middleware, c’est sécurisé.

  1. Le middleware voit user_tier=vip.
  2. Le middleware injecte l’en-tête « x-pricing-tier : vip ».
  3. Origin Server restitue 80 € au lieu de 100 €. Le HTML arrive avec le prix correct. L’utilisateur ne peut pas le manipuler.

10. Atténuation DDoS au niveau de la couche application

Le réseau DDoS est géré par Cloudflare. Le DDoS d’application (couche 7) est plus difficile. “Recherchez ‘a’ 1 000 fois par seconde.” (Tue la base de données). Le middleware est le filtre. Nous implémentons la Token Bucket Rate Limiting par IP avant le rendu Remix. const autorisé = wait rateLimit.check(ip, 10, "10s"); S’ils dépassent 10 requêtes en 10 secondes, renvoyez 429 Too Many Requests. Votre serveur de rendu ne se réveille même jamais.

11. La file d’attente (salle d’attente virtuelle)

Pour « Hyped Drops » (Yeezy/Supreme), aucun serveur ne peut gérer le pic. Le middleware redirige le trafic vers une file d’attente virtuelle (Queue-it ou Custom Redis).

  1. Vérifiez queue_token. Manquant?
  2. Redirigez vers /queue.
  3. L’utilisateur attend. WebSocket met à jour la position “Vous êtes #5000”.
  4. L’utilisateur atteint l’avant. Rediriger vers /product?token=xyz.
  5. Le middleware valide le jeton. Permet l’accès pendant 10 minutes. Cela aplatit la courbe de trafic d’un « Spike » à un « Plateau ».

12. Signature HMAC pour le B2B

Si vous possédez une boutique B2B, vous disposez souvent d’un lien « Portail » depuis un ERP. L’utilisateur clique sur le lien dans NetSuite -> Connecté à Shopify. Comment sécuriser ce lien ? HMAC (code d’authentification de message basé sur le hachage). Le lien contient ?user=123&timestamp=17000000&signature=abc.... Le middleware vérifie la signature à l’aide d’un secret partagé. Si « timestamp » date de plus de 5 minutes, rejetez. Cela permet une connexion « sans mot de passe » sécurisée par cryptographie.

11. Pourquoi Maison Code ?

Chez Maison Code, nous considérons le Middleware comme le Bouclier. C’est la première ligne de défense. Nous ne laissons pas votre logique métier spécifique exposée dans JS côté client. Nous déplaçons la complexité vers le Edge. Nous avons construit des magasins « Token Gated » pour les projets NFT et des « VIP Tiers » pour les maisons de couture de luxe. Nous savons comment bloquer les robots tout en déroulant le tapis rouge pour les VIP.

13. Détection avancée des robots (heuristique)

Les robots deviennent plus intelligents. Ils exécutent JS. Ils passent des Captchas (en utilisant des fermes). Nous avons besoin d’une analyse comportementale à la périphérie.

  1. Mouvement de la souris : les robots se déplacent en lignes droites. Les humains se déplacent dans des courbes.
  2. Temps passé sur la page : les robots achètent en 2 secondes. Les humains mettent 20 secondes.
  3. En-têtes de requête : les robots ne correspondent souvent pas à “User-Agent” et à “Sec-CH-UA”. Nous utilisons la logique Cloudflare Worker pour évaluer ces demandes. « Score < 10 » ? Redirection silencieuse vers une caisse « Honeypot » qui les facture mais n’expédie rien. Cela gaspille leur argent et les décourage de vous attaquer à nouveau.

14. Géolocalisation pour la conformité des licences

Vous vendez des Nike. Vous êtes autorisé à vendre dans l’UE, mais pas aux États-Unis. La validation “Address Picker” est trop tardive. Le client américain voit le produit, l’ajoute au panier et est rejeté à la caisse. Ils sont en colère. Edge Geo-Fencing masque le produit en fonction de l’adresse IP. Si cf-ipcountry == 'US', la page produit renvoie 404. L’utilisateur ne sait jamais qu’il existe. Cela protège votre contrat de licence de fournisseur et empêche la capacité d’exportation sur le « marché gris ».

15. La liste de contrôle du middleware (préparation au lancement)

Ne déployez pas de middleware sans vérifier :

  1. Échec d’ouverture ou échec de fermeture : en cas d’erreur de middleware, bloquez-vous tout le monde ou laissez-vous tout le monde entrer ? (Par défaut : Échec fermé pour des raisons de sécurité).
  2. Timeout : définissez un délai d’attente de 50 ms. Si KV est lent, ne raccrochez pas la page.
  3. Region Check : Testé via VPN depuis un pays bloqué ?
  4. Jeton de contournement : disposez-vous d’un paramètre de requête ?token=admin_bypass pour un accès d’urgence ?
  5. Règles de cache : assurez-vous que « Vary : Cookie » est défini afin de ne pas mettre en cache la page « Accès refusé » pour tout le monde.
  6. Logging : enregistrez chaque bloc dans Datadog.
  7. User Agent : liste blanche de Googlebot (vérification de l’agent utilisateur).
  8. ** Limite de débit ** : la limite est-elle par IP ou par session ?
  9. Actifs statiques : contourner le middleware pour .jpg, .css, .js.
  10. Gestion des exceptions : bloc Try/Catch autour de tout.
  11. Démarrage à froid : Vérifiez que le démarrage à froid WASM est < 10 ms.
  12. Coût : surveiller les appels. Le middleware s’exécute sur chaque requête.
  13. Boucle de redirection : assurez-vous de ne pas rediriger vers une page protégée.
  14. Application mobile : votre middleware interrompt-il les appels API de l’application iOS ?
  15. Plan du site : ne cachez pas le fichier sitemap.xml.

16. Conclusion

Le contrôle d’accès crée la rareté. La rareté crée de la valeur. Mais la Porte doit être sécurisée. Cacher un bouton via CSS (« display : none ») n’est pas une sécurité. N’importe qui peut inspecter l’élément. Le middleware est le seul moyen. C’est rapide, invisible et incassable.

Besoin de produits exclusifs ?

Nous concevons des systèmes de contrôle d’accès de haute sécurité. Engagez nos Architectes.