Captive Portal personnalisé : Guide HTML et CSS

Résumé exécutif

Pour les établissements d'entreprise - allant des hôtels de luxe Hospitality et des chaînes de magasins Retail aux centres de transport Transport et aux campus médicaux modernes Healthcare - la page de splash du WiFi invité est la porte d'entrée numérique. Cependant, plus de 90 % des connexions au WiFi invité s'effectuent sur des appareils mobiles, où le rendu n'est pas géré par des navigateurs standards comme Safari ou Chrome, mais par des webviews d'assistance réseau captive (CNA) hautement restreintes [1]. Ces "mini-navigateurs" imposent de sévères limites de bac à sable : ils bloquent les CDN externes, désactivent les cookies persistants, ignorent les polices web externes et limitent considérablement l'exécution de JavaScript afin d'atténuer les risques de sécurité et d'empêcher le détournement de session [2].

Lorsqu'un développeur conçoit un portail de connexion en utilisant les normes web traditionnelles, ces contraintes se traduisent par des mises en page cassées, des éléments de marque manquants et des boutons de connexion inopérants, ce qui impacte directement la satisfaction client et l'engagement numérique. Ce guide apporte des solutions à ces défis, en présentant des pratiques de codage défensives - telles que le CSS en ligne, l'encodage d'actifs en Base64, les polices système et les processus d'authentification explicites basés sur la navigation - afin de garantir un rendu multiplateforme transparent. De plus, nous verrons comment l'utilisation d'une solution gérée comme le concepteur de portail de Purple permet aux développeurs de conserver un contrôle créatif complet sur le HTML/CSS tout en déléguant l'authentification RADIUS, la mise à l'échelle des bases de données, la conformité GDPR/PCI et les intégrations de bornes d'accès multi-constructeurs [3].

Analyse technique approfondie

Pour concevoir un Captive Portal personnalisé et résilient, les développeurs doivent comprendre l'interception au niveau du réseau et la virtualisation du navigateur qui se produisent lorsqu'un invité s'associe à un SSID ouvert.

Le cycle de vie du Captive Portal

Lorsqu'un appareil client s'associe à un SSID captif, la séquence suivante est déclenchée :

1. Association IP : L'appareil effectue une connexion en 3 étapes (handshake) et demande une adresse IP via DHCP.
2. Sonde de connectivité active : Le gestionnaire de réseau en arrière-plan du système d'exploitation envoie immédiatement une requête HTTP GET à une URL test dédiée et neutre (par exemple, http://captive.apple.com/hotspot-detect.html d'Apple ou http://connectivitycheck.gstatic.com/generate_204 de Google) [1].
3. Interception DNS/HTTP : Le contrôleur LAN sans fil (WLC) local ou la borne d'accès (AP) intercepte cette requête HTTP sur le port 80. Au lieu de renvoyer le statut HTTP 200 ou 204 attendu, la passerelle redirige le trafic du client vers l'URL de la page d'accueil du Captive Portal via une redirection HTTP 302 [2].
4. Ouverture de la Webview : En détectant la redirection, le système d'exploitation lance son mini-navigateur natif de CNA pour afficher la page de splash redirigée, évitant ainsi à l'utilisateur d'avoir à ouvrir manuellement un navigateur complet.5. Authentification et transition d'état : L'utilisateur remplit le formulaire de connexion et soumet ses identifiants au serveur du portail, qui ordonne à la passerelle (souvent via un Access-Accept RADIUS ou un appel API externe) d'autoriser l'adresse MAC.
5. Handshake de sortie CNA : Le mini-navigateur CNA effectue un autre HTTP GET vers son URL canari. S'il reçoit la réponse 200/204 attendue, il transforme son bouton en haut à droite de "Annuler" en "Terminé" et établit la connexion WiFi en tant qu'interface réseau principale.

Contraintes de mini-navigateur spécifiques aux plateformes

Chaque système d'exploitation gère ce cycle de vie au sein de différents environnements de webview, ce qui entraîne un comportement très fragmenté. Le tableau ci-dessous détaille ces contraintes critiques :

Contourner le piège du bouton "Terminé" d'Apple CNA

L'un des modes de défaillance les plus fréquents dans le développement de portails personnalisés est le piège du bouton "Terminé" sur les appareils iOS. Lorsqu'un utilisateur s'authentifie, la webview Websheet d'iOS doit détecter que le réseau n'est plus captif. Elle y parvient en surveillant le succès de ses requêtes canaris en arrière-plan.

Crucial : l'assistant de connectivité réseau (CNA) d'iOS déclenchera uniquement cette vérification lors d'une navigation HTTP sur une page complète (redirection d'emplacement). Si un développeur conçoit une Single Page Application (SPA) moderne qui soumet des données de formulaire via un appel asynchrone AJAX (par exemple, fetch() ou Axios) et met à jour le DOM de manière dynamique sans modifier l'URL, le CNA ne relancera jamais sa vérification de connectivité. L'utilisateur sera authentifié au niveau de la passerelle, mais le bouton du CNA dans le coin supérieur droit restera affiché comme "Annuler". Si l'utilisateur frustré clique sur "Annuler", l'appareil iOS se dissociera immédiatement du SSID, mettant fin à la session WiFi [1].

Pour éviter cela, le gestionnaire de réussite de l'authentification doit effectuer une redirection complète vers une page de destination physique (par exemple, window.location.href = '/success') ou soumettre le formulaire de connexion de manière native via une action HTTP POST standard.

Guide d'implémentation

Pour garantir un rendu cohérent sur toutes les plateformes, les développeurs doivent passer d'une conception web moderne et lourde en ressources à un style de codage hautement autonome et défensif.

La règle d'or : Concevoir pour une connectivité internet inexistante

Pendant l'état captif, l'appareil client n'a aucun accès à l'internet au sens large. Il peut uniquement résoudre et accéder aux adresses IP et aux domaines explicitement autorisés dans le Walled Garden du contrôleur sans fil (comme l'IP du serveur du Captive Portal lui-même). Par conséquent, tout élément externe référencé dans votre HTML ne parviendra pas à se charger, ce qui entraînera une mise en page cassée.

Pour concevoir de manière défensive, appliquez la Checklist de conception de Captive Portal Mobile-First suivante :

1. Configuration de la fenêtre d'affichage (Viewport)

Pour empêcher les appareils mobiles de réduire la fenêtre d'affichage à une largeur d'ordinateur de bureau (généralement 980px), le <head> HTML doit inclure une balise méta de viewport réactive. Sans cela, le texte et les champs de saisie apparaîtront microscopiques sur les appareils mobiles :

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2. Intégration du CSS et suppression des dépendances externes

Ne liez jamais de fichiers CSS externes ou de CDN (par exemple, Bootstrap, Tailwind ou Google Fonts). Tout le CSS doit être intégré dans un bloc <style> au sein du <head> HTML.

Pour la typographie, utilisez une pile de polices système qui fait référence aux polices locales préinstallées du système d'exploitation. Cela évite totalement les requêtes HTTP et garantit que la page se charge instantanément en utilisant la police sans-serif native et de haute qualité de l'appareil :

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #F5F1ED; /* Couleur de marque Blanc Perle */
    color: #011638; /* Couleur de marque Bleu Foncé */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

3. Encodage d'images en Base64

Les images, logos et icônes ne doivent pas être référencés via des URL HTTP externes, sauf si le domaine d'hébergement est mis sur liste blanche dans le walled garden de la passerelle. La méthode la plus fiable consiste à encoder les petits éléments visuels (tels que les logos PNG ou SVG) directement dans le HTML ou le CSS sous forme de Data URIs Base64 :

<!-- Exemple de logo Base64 en ligne -->
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgZmlsbD0iIzc0NThGRCIvPjwvc3ZnPg==" alt="Purple Logo" class="brand-logo">

4. Optimisation des champs de saisie et des zones de clic

Pour respecter les normes d'ergonomie mobile (telles que les Human Interface Guidelines d'Apple), tous les éléments interactifs doivent être optimisés pour la saisie tactile :

• Taille de police de saisie : La taille de la police du texte de saisie doit être d'au moins 16px. Si la taille de la police est inférieure (par exemple, 14px), iOS Safari et le CNA zoomeront automatiquement sur le champ de saisie lors de la mise au point, ce qui déformera la mise en page [1].
• Zones de clic : Les boutons, cases à cocher et liens doivent avoir une zone de clic minimale de 44px x 44px pour éviter les clics accidentels ou la frustration de l'utilisateur.

5. Consentement légal et conformité GDPR

Lors de la collecte de données clients (par exemple, e-mail, numéro de téléphone ou profils sociaux), la structure HTML doit permettre d'obtenir un consentement légal explicite. Conformément à la réglementation GDPR, les cases pré-cochées ou les déclarations de consentement implicites (par exemple, "En vous connectant, vous acceptez nos conditions") ne sont pas conformes [3].

• Fournissez une case à cocher non cochée par défaut pour les conditions générales et les politiques de confidentialité.
• Intégrez le texte juridique détaillé dans un conteneur défilant à hauteur limitée (max-height: 120px; overflow-y: auto;) pour maintenir le formulaire de connexion principal au-dessus de la ligne de flottaison.

<div class="consent-container">
    <input type="checkbox" id="terms_consent" name="terms_consent" required>
    <label for="terms_consent">
        J'accepte explicitement les <a href="#" onclick="showTerms()">Conditions d'utilisation</a> et consens au traitement de mes données conformément à la <a href="#" onclick="showPrivacy()">Politique de confidentialité</a>.
    </label>
</div>

Modèle HTML/CSS personnalisé pour Captive Portal

Vous trouverez ci-dessous un modèle HTML/CSS complet, prêt pour la production et contenu dans un seul fichier, qui intègre toutes les meilleures pratiques de conception mobile-first et de conformité CNA. Il présente une mise en page réactive, une pile de polices système, des espaces réservés pour des éléments prêts pour le Base64, des champs de saisie adaptés au tactile et des structures de consentement explicites conformes à la réglementation GDPR :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Connexion WiFi Invité</title>
    <style>
        /* Réinitialisation CSS & déclarations de variables */
        :root {
            --color-primary: #7458FD; /* Couleur de marque Purple */
            --color-dark: #011638; /* Bleu foncé */
            --color-light: #F5F1ED; /* Blanc perle */
            --color-white: #FFFFFF;
            --color-border: #D1D5DB;
            --radius-container: 12px;
            --radius-element: 6px;
        }
        
        * {
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--color-light);
            color: var(--color-dark);
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }
        
        /* Disposition de carte adaptative */
        .portal-card {
            background-color: var(--color-white);
            width: 100%;
            max-width: 420px;
            padding: 32px 24px;
            border-radius: var(--radius-container);
            box-shadow: 0 4px 20px rgba(1, 22, 56, 0.05);
            text-align: center;
        }
        
        .logo-container {
            margin-bottom: 24px;
        }
        
        /* Espace réservé pour le logo Base64 intégré */
        .logo {
            width: 120px;
            height: auto;
        }
        
        h1 {
            font-size: 24px;
            font-weight: 700;
            margin: 0 0 8px 0;
            color: var(--color-dark);
        }
        
        p {
            font-size: 14px;
            color: #4B5563;
            margin: 0 0 24px 0;
            line-height: 1.5;
        }
        
        /* Styles de formulaire */
        .form-group {
            text-align: left;
            margin-bottom: 16px;
        }
        
        label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 6px;
            color: var(--color-dark);
        }
        
        /* Important : la taille de police doit être d'au moins 16px pour empêcher le zoom automatique sur iOS */
        input[type="email"],
        input[type="text"] {
            width: 100%;
            height: 48px;
            padding: 12px 16px;
            font-size: 16px;
            border: 1px solid var(--color-border);
            border-radius: var(--radius-element);
            background-color: var(--color-white);
            color: var(--color-dark);
            outline: none;
            transition: border-color 0.2s;
        }
        
        input[type="email"]:focus,
        input[type="text"]:focus {
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px rgba(116, 88, 253, 0.15);
        }
        
        /* Styles de consentement */
        .consent-group {
            display: flex;
            align-items: flex-start;
            text-align: left;
            margin: 20px 0;
        }
        
        /* Taille de cible adaptée au tactile */
        input[type="checkbox"] {
            width: 20px;
            height: 20px;
            margin: 2px 12px 0 0;
            flex-shrink: 0;
            cursor: pointer;
            accent-color: var(--color-primary);
        }
        
        .consent-label {
            font-size: 13px;
            line-height: 1.4;
            color: #4B5563;
            user-select: none;
        }
        
        .consent-label a {
            color: var(--color-primary);
            text-decoration: none;
            font-weight: 600;
        }
        
        .consent-label a:hover {
            text-decoration: underline;
        }
        
        /* Touch-Friendly CTA Button (Minimum 44px height) */
        .btn-submit {
            width: 100%;
            height: 48px;
            background-color: var(--color-primary);
            color: var(--color-white);
            border: none;
            border-radius: var(--radius-element);
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .btn-submit:hover {
            background-color: #5B3EE3;
        }
        
        .btn-submit:active {
            background-color: #4A2FD4;
        }
        
        /* Legal Terms Scrollbox */
        .terms-scrollbox {
            display: none; /* Toggled via JS */
            text-align: left;
            font-size: 11px;
            color: #6B7280;
            background-color: var(--color-light);
            padding: 12px;
            border-radius: var(--radius-element);
            max-height: 100px;
            overflow-y: auto;
            margin-bottom: 16px;
            border: 1px solid var(--color-border);
        }
        
        .footer {
            margin-top: 24px;
            font-size: 11px;
            color: #9CA3AF;
        }
    </style>
</head>
<body>

    <div class="portal-card">
        <div class="logo-container">
            <!-- Replace src with your actual Base64-encoded SVG or PNG -->
            <svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 30">
                <rect width="100" height="30" rx="6" fill="#7458FD"/>
                <text x="50" y="20" font-family="sans-serif" font-size="12" fill="#FFFFFF" font-weight="bold" text-anchor="middle">VOTRE MARQUE</text>
            </svg>
        </div>
        
        <h1>Bienvenue sur le WiFi invité</h1>
        <p>Veuillez saisir vos coordonnées ci-dessous pour accéder à un internet haut débit sécurisé.</p>
        
        <!-- Form must submit natively (full page navigation) to clear Apple CNA -->
        <form action="/login/submit" method="POST" onsubmit="return validateForm()">
            <div class="form-group">
                <label for="guest_name">Nom complet</label>
                <input type="text" id="guest_name" name="name" placeholder="Jean Dupont" required autocomplete="name">
            </div>
            
            <div class="form-group">
                <label for="guest_email">Adresse e-mail</label>
                <input type="email" id="guest_email" name="email" placeholder="jean@exemple.com" required autocomplete="email">
            </div>
            
            <div class="consent-group">
                <input type="checkbox" id="terms_consent" name="terms_accepted" required>
                <label for="terms_consent" class="consent-label">
                    J'accepte les <a href="#" onclick="toggleTerms(event)">Conditions d'utilisation</a> et je consens au traitement de mes données conformément aux réglementations de la GDPR.
                </label>
            </div>
            
            <div id="terms_box" class="terms-scrollbox">
                <strong>Conditions d'utilisation du WiFi :</strong><br>
                1. Ce service est fourni en l'état sans garantie.<br>
                2. Les utilisateurs ne doivent pas s'engager dans des activités illégales ou gourmandes en bande passante.<br>
                3. Les données personnelles sont collectées uniquement à des fins d'authentification et d'opt-in marketing conformément à notre Politique de confidentialité.
            </div>
            
            <button type="submit" class="btn-submit">Se connecter au WiFi</button>
        </form>
        
        <div class="footer">
            Propulsé par Purple | WiFi invité sécurisé
        </div>
    </div>

    <script>
        function toggleTerms(e) {
            e.preventDefault();
            var box = document.getElementById('terms_box');
            box.style.display = (box.style.display === 'block') ? 'none' : 'block';
        }
        
        function validateForm() {
            var consent = document.getElementById('terms_consent');
            if (!consent.checked) {
                alert('Vous devez accepter les Conditions d\'utilisation pour vous connecter.');
                return false;
            }
            return true;
        }
    </script>
</body>
</html>

Dépannage et atténuation des risques

Lors du déploiement de portails captifs codés sur mesure en HTML/CSS, les équipes d'exploitation informatique sont fréquemment confrontées à plusieurs risques opérationnels graves :

1. La boucle d'avertissement de certificat SSL/TLS

Étant donné que les portails captifs fonctionnent en interceptant le trafic, ils présentent un conflit fondamental avec la sécurité web HTTPS moderne. Lorsqu'un utilisateur tente de visiter un site HTTPS (par exemple, https://www.google.com) et que la passerelle tente de rediriger ce trafic vers un Captive Portal HTTP, le navigateur détecte une anomalie dans le certificat SSL et affiche un avertissement de sécurité critique "Votre connexion n'est pas privée".

• Atténuation : N'essayez jamais d'intercepter directement le trafic HTTPS. Reposez-vous entièrement sur l'assistant CNA natif du système d'exploitation (qui effectue une requête HTTP non chiffrée pour déclencher la redirection). Assurez-vous que le domaine de votre Captive Portal dispose d'un certificat SSL valide et publiquement approuvé (par exemple, Let's Encrypt ou DigiCert) et qu'il est desservi via HTTPS uniquement après que la redirection HTTP initiale a acheminé avec succès l'utilisateur vers le domaine de votre portail [2].

2. Échecs de résolution DNS (Le piège du Walled Garden)

Si votre page HTML personnalisée fait référence à des ressources externes - telles qu'un point de terminaison OAuth de connexion sociale (par exemple, Facebook, Google) ou une passerelle de paiement - les requêtes DNS pour ces domaines échoueront à moins qu'elles ne soient explicitement autorisées dans le Walled Garden du contrôleur sans fil. Si un domaine est manquant dans la liste d'autorisation, le flux de connexion s'interrompra, affichant un écran vide.

• Atténuation : Maintenez une liste Walled Garden stricte et minimale. Si vous utilisez des connexions sociales, autorisez les domaines génériques spécifiques recommandés par les fournisseurs d'identité (par exemple, *.google.com, *.gstatic.com).

3. Vulnérabilités liées à l'expiration de session et à l'usurpation d'adresse MAC

Les portails captifs standard authentifient les appareils en fonction de leurs adresses MAC. Cependant, les systèmes d'exploitation mobiles modernes (iOS 14+ et Android 10+) utilisent par défaut des adresses MAC aléatoires (adresses WiFi privées), en les renouvelant périodiquement. Cela peut amener les invités à devoir se réauthentifier de manière répétée, ce qui nuit gravement à l'expérience utilisateur [1].

• Atténuation : Implémentez des délais d'expiration de session raisonnables (par exemple, 24 heures) sur le serveur RADIUS pour éviter les sessions obsolètes, et utilisez des normes d'authentification modernes comme Passpoint (Hotspot 2.0) ou WPA3-Enterprise pour un enregistrement fluide et sécurisé qui contourne entièrement les portails captifs basés sur MAC.

Pertinence des produits Purple : Développer vs. Acheter

Bien que le codage d'une seule page HTML soit simple, l'hébergement, la sécurisation et la mise à l'échelle d'une infrastructure de Captive Portal personnalisée présentent des obstacles techniques et de conformité massifs. Le tableau ci-dessous compare les réalités techniques et opérationnelles de l'auto-hébergement d'un portail personnalisé par rapport à l'utilisation de la plateforme d'entreprise managée de Purple :

La plateforme de Purple résout le dilemme du "développement maison ou achat". Elle offre aux développeurs la liberté créative totale d'un espace de travail personnalisé HTML/CSS tout en éliminant l'ingénierie d'infrastructure back-end complexe et à haut risque requise pour prendre en charge l'authentification RADIUS sécurisée à grande échelle.

ROI et impact commercial

Investir dans un portail captif personnalisé, réactif et conçu par des professionnels offre des rendements quantifiables dans l'ensemble des opérations informatiques, du marketing et de la conformité légale.

1. Réduction des coûts opérationnels (Tickets d'assistance informatique)

Dans les déploiements à grande échelle, comme un stade ou une chaîne de magasins multisites, un portail captif défectueux est l'un des principaux facteurs d'escalade des demandes d'assistance informatique. Lorsque les invités sont confrontés à un "écran blanc" ou à un bouton de connexion inactif, ils surchargent le personnel sur place ou soumettent des tickets d'assistance.

$$\text{Économies annuelles sur l'assistance} = (\text{Nombre total de visites annuelles d'invités} \times \text{Taux d'échec du portail} \times \text{Taux de contact avec l'assistance}) \times \text{Coût par ticket d'assistance}$$

• Scénario : Un centre de congrès accueillant 1 000 000 de visiteurs par an. Un portail mal codé présente un taux d'échec de 5 % sur les anciens appareils iOS, ce qui entraîne un taux de contact avec l'assistance de 10 %. À un coût standard de 15 $ par ticket d'assistance, le coût opérationnel est de : $$(1 000 000 \times 0,05 \times 0,10) \times $15 = $75 000 \text{ de frais d'assistance évitables par an}$$
• Résultat : La transition vers un modèle optimisé pour les CNA et conçu d'abord pour le mobile réduit le taux d'échec du portail à <0,1 %, éliminant ainsi pratiquement cette perte opérationnelle.

2. Capture de données marketing et optimisation des options d'inscription

Pour les commerces et les établissements hôteliers, le portail WiFi invité est le principal mécanisme de capture de données clients directes et propres. Une interface utilisateur mal conçue, avec du texte minuscule ou une disposition de formulaire peu ergonomique, entraîne des taux de rebond élevés - les utilisateurs abandonnent complètement le processus de connexion, ce qui entraîne une perte d'opportunités marketing.

• Étude de cas (Commerce de détail) : Une chaîne nationale de magasins a mis en œuvre un portail captif optimisé pour le mobile à l'aide de la plateforme de Purple. En remplaçant un formulaire de connexion en plusieurs étapes par une saisie d'e-mail à champ unique (taille de police : 16px) et un bouton d'action optimisé de 48px, elle a constaté une augmentation de 42 % des inscriptions finalisées et une hausse de 28 % des inscriptions à la newsletter marketing au cours du premier trimestre [6].

3. Atténuation des risques juridiques et réglementaires

Sous le coup du GDPR et de la CCPA, la collecte de données non conforme entraîne de lourdes sanctions financières (jusqu'à 4 % du chiffre d'affaires annuel mondial sous le GDPR). S'appuyer sur des cases pré-cochées ou ne pas fournir de politique de confidentialité claire et facilement accessible sur votre splash page expose l'entreprise à d'immenses responsabilités juridiques.

• ROI de l'atténuation des risques : L'implémentation d'une case de consentement explicite et non cochée, ainsi que l'hébergement des conditions d'utilisation dans une boîte de défilement optimisée, garantit une conformité réglementaire à 100 %, réduisant ainsi le risque d'amendes réglementaires de plusieurs millions de dollars tout en protégeant la réputation de la marque.

Résumé des points clés à retenir

• La sandbox CNA est restrictive : Le Websheet iOS et le CNA macOS d'Apple sont des environnements hautement sécurisés par sandbox qui bloquent les ressources externes, les cookies et les polices web. Tous les styles et ressources doivent être autonomes (CSS en ligne, images Base64, polices système) [1].
• L'AJAX rompt la négociation de sortie iOS : Pour faire passer avec succès l'appareil iOS de l'état "captif" à "connecté" (en remplaçant le bouton en haut à droite "Annuler" par "Terminé"), vous devez déclencher une redirection HTTP de page entière. Les mises à jour DOM asynchrones laisseront l'appareil bloqué dans une boucle captive.
• Le Mobile-First est obligatoire : Plus de 90 % des connexions s'effectuent sur mobile. Concevez une mise en page sur une seule colonne (largeur maximale : 480px), utilisez des cibles tactiles adaptées aux doigts (minimum 44px x 44px) et imposez une taille de police minimale de 16px sur tous les champs de saisie de texte pour empêcher le zoom automatique du navigateur iOS.
• Les Walled Gardens contrôlent le DNS : Tout domaine externe référencé lors de la connexion (par exemple, les API de connexion sociale) doit être explicitement inscrit sur liste blanche dans le walled garden du contrôleur sans fil, faute de quoi la page ne se chargera pas.
• Purple élimine la complexité du backend : L'utilisation du créateur de portail de Purple offre aux développeurs un contrôle HTML/CSS complet via un éditeur personnalisé, tout en les déchargeant des lourdes contraintes de sécurité, d'évolutivité et de conformité liées à RADIUS, aux intégrations de points d'accès multi-constructeurs et à la gestion de bases de données conformes au GDPR [3].

Références

• [1] Wireless Broadband Alliance : Comportement des portails captifs réseau
• [2] Projet Open Source Android : Intégration Webview pour connexion au portail captif
• [3] Comité européen de la protection des données : Lignes directrices sur le consentement en vertu du règlement 2016/679
• [4] Comment implémenter l'authentification 802.1X avec Cloud RADIUS
• [5] Points d'accès sans fil Cisco : Guide 2026 des produits et du déploiement
• [6] Plateforme de marketing et d'analyses Purple WiFi

Écouter le briefing technique

Écoutez un architecte de solutions senior aborder les contraintes techniques et les stratégies d'implémentation pour les portails captifs personnalisés :

```of_course">