Captive Portal personnalisé : Guide HTML et CSS

Résumé exécutif

Pour les établissements d'entreprise - allant des hôtels de luxe Hôtellerie et des chaînes de magasins Commerce de détail aux plateformes de transport Transport et aux campus médicaux modernes Santé - la page de connexion WiFi invité est la vitrine numérique. Cependant, plus de 90 % des connexions WiFi invité ont lieu sur des appareils mobiles, où le rendu n'est pas régi par des navigateurs standards comme Safari ou Chrome, mais par des webviews très limités appelés Captive Network Assistant (CNA) [1]. Ces "mini-navigateurs" imposent de strictes limites de sandbox : ils bloquent les CDN externes, désactivent les cookies persistants, ignorent les polices web externes et restreignent fortement l'exécution de JavaScript afin de limiter les risques de sécurité et d'empêcher le détournement de session [2].

Lorsqu'un développeur conçoit une page de connexion en utilisant les normes web traditionnelles, ces contraintes entraînent des mises en page cassées, des éléments de marque manquants et des boutons de connexion inactifs, ce qui nuit directement à la satisfaction des clients 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 inline, l'encodage d'éléments en Base64, l'utilisation de polices système et des processus d'authentification basés sur la navigation explicite - afin de garantir un rendu multiplateforme transparent. De plus, nous verrons comment l'utilisation d'une solution gérée comme l'éditeur de portail de Purple permet aux développeurs de conserver un contrôle créatif complet en HTML/CSS tout en déléguant l'authentification RADIUS, l'évolution de la base de données, la conformité GDPR/PCI et les intégrations AP multi-constructeurs [3].

Analyse technique approfondie

Pour concevoir un Captive Portal personnalisé et robuste, 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 liaison en 3 étapes 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 de 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 local (WLC) ou l'Access Point (AP) intercepte cette requête HTTP sur le port 80. Au lieu de renvoyer le code HTTP 200 ou 204 attendu, la passerelle redirige le trafic du client vers l'URL de destination du Captive Portal via une redirection HTTP 302 [2].
4. Ouverture du Webview : En détectant la redirection, le système d'exploitation ouvre son mini-navigateur natif Captive Network Assistant (CNA) pour afficher la page de connexion 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, ajoutez à la liste d'autorisation 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 accès transparent et sécurisé qui contourne entièrement les portails captifs basés sur l'adresse MAC.

Pertinence des produits Purple : Développer vs Acheter

Bien que le codage d'une simple page HTML soit simple, l'hébergement, la sécurisation et la mise à l'échelle d'une infrastructure de portail captif personnalisée présentent d'immenses défis techniques et de conformité. 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 "Développer vs. Acheter". Elle offre aux développeurs la liberté de création complète d'un espace de travail personnalisé HTML/CSS tout en éliminant l'ingénierie d'infrastructure backend complexe et à haut risque requise pour prendre en charge l'authentification RADIUS sécurisée à grande échelle.

ROI et impact commercial

Investir dans un Captive Portal personnalisé, réactif et conçu par des professionnels offre des rendements quantifiables au niveau 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 Captive Portal défaillant est l'un des principaux facteurs d'escalade vers l'assistance informatique. Lorsque les invités sont confrontés à un "écran blanc" ou à un bouton de connexion qui ne répond pas, ils submergent 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 de 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 de l'assistance de 10 %. Au coût standard du secteur 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{ par an de frais d'assistance évitables}$$
• Résultat : La transition vers un modèle optimisé pour le CNA et axé sur le mobile réduit le taux d'échec du portail à moins de 0,1 %, éliminant ainsi pratiquement cette perte opérationnelle.

2. Capture de données marketing et optimisation des inscriptions

Pour les commerces de détail et les établissements hôteliers, le portail WiFi pour invités 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 pratique entraîne des taux de rebond élevés : les utilisateurs abandonnent complètement le processus de connexion, ce qui se traduit par des opportunités marketing perdues.

• Étude de cas (Commerce de détail) : Une chaîne nationale de magasins de détail a mis en œuvre un Captive Portal optimisé pour le mobile à l'aide de la plateforme de Purple. En remplaçant un formulaire de connexion en plusieurs étapes par un champ de saisie d'e-mail unique (taille de police : 16px) et un bouton d'action optimisé de 48px, ils ont constaté une augmentation de 42 % des inscriptions finalisées et une augmentation de 28 % des abonnements aux newsletters marketing dès le 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">