Captive Portal personalizzato: Guida HTML e CSS

Executive Summary

Per le sedi aziendali - che spaziano dagli hotel di lusso Hospitality e catene di negozi Retail agli hub di transito Transport e moderni campus medici Healthcare - la pagina di benvenuto del WiFi per gli ospiti rappresenta la porta d'ingresso digitale. Tuttavia, oltre il 90% degli accessi al WiFi per gli ospiti avviene su dispositivi mobili, dove la visualizzazione non è gestita da browser standard come Safari o Chrome, ma da webview Captive Network Assistant (CNA) altamente limitate [1]. Questi "mini-browser" impongono severe limitazioni di sandbox: bloccano i CDN esterni, disabilitano i cookie persistenti, ignorano i web font esterni e limitano fortemente l'esecuzione di JavaScript per ridurre i rischi di sicurezza e prevenire il dirottamento delle sessioni [2].

Quando uno sviluppatore progetta una pagina di benvenuto utilizzando gli standard web tradizionali, questi vincoli si traducono in layout interrotti, elementi del brand mancanti e pulsanti di accesso non funzionanti, influenzando direttamente la soddisfazione dei clienti e l'interazione digitale. Questa guida fornisce soluzioni a queste sfide, presentando pratiche di codifica difensive - come CSS inline, codifica degli asset in Base64, stack di font di sistema e handshake di autenticazione espliciti basati sulla navigazione - per garantire una visualizzazione multipiattaforma fluida. Inoltre, esaminiamo come l'utilizzo di una soluzione gestita come il builder di portali di Purple consenta agli sviluppatori di mantenere il controllo creativo completo su HTML/CSS delegando l'autenticazione RADIUS, la scalabilità del database, la conformità GDPR/PCI e le integrazioni AP multi-vendor [3].

Approfondimento Tecnico

Per creare un Captive Portal personalizzato e resiliente, gli sviluppatori devono comprendere l'intercettazione a livello di rete e la virtualizzazione del browser che si verificano quando un ospite si associa a un Service Set Identifier (SSID) aperto.

Il Ciclo di Vita del Captive Portal

Quando un dispositivo client si associa a un SSID captive, si attiva la seguente sequenza:

1. Associazione IP: Il dispositivo completa un handshake a 3 vie e richiede un indirizzo IP tramite DHCP.
2. Sonda di Connettività Attiva: Il gestore di rete in background del sistema operativo invia immediatamente una richiesta HTTP GET a un URL canary dedicato e neutrale rispetto al fornitore (ad es., http://captive.apple.com/hotspot-detect.html di Apple o http://connectivitycheck.gstatic.com/generate_204 di Google) [1].
3. Intercettazione DNS/HTTP: Il Wireless LAN Controller (WLC) o l'Access Point (AP) locale intercetta questa richiesta HTTP sulla porta 80. Invece di restituire lo stato HTTP 200 o 204 previsto, il gateway reindirizza il traffico del client all'URL della pagina di destinazione del Captive Portal tramite un reindirizzamento HTTP 302 [2].
4. Generazione della Webview: Rilevando il reindirizzamento, il sistema operativo avvia il proprio mini-browser Captive Network Assistant (CNA) nativo per visualizzare la pagina di benvenuto reindirizzata, evitando che l'utente debba aprire manualmente un browser completo.5. Autenticazione e transizione di stato: l'utente compila il modulo di login, inviando le credenziali al server del portale, che istruisce il gateway (spesso tramite un Access-Accept RADIUS o una chiamata API esterna) ad autorizzare l'indirizzo MAC.
5. Handshake di uscita CNA: il mini-browser CNA esegue un altro HTTP GET verso il suo URL canary. Se riceve la risposta 200/204 prevista, cambia il pulsante in alto a destra da "Annulla" a "Fine" e stabilisce la connessione WiFi come interfaccia di rete primaria.

Vincoli del mini-browser specifici per piattaforma

Ogni sistema operativo gestisce questo ciclo di vita all'interno di diversi ambienti webview, con conseguente comportamento altamente frammentato. La tabella seguente illustra in dettaglio questi vincoli critici:

Aggirare la trappola del pulsante "Fine" su Apple CNA

Uno dei problemi di funzionamento più frequenti nello sviluppo di Captive Portal personalizzati è la trappola del pulsante "Fine" sui dispositivi iOS. Quando un utente esegue l'autenticazione, la webview dell'iOS Websheet deve rilevare che la rete non è più captive. Per farlo, monitora il successo delle sue richieste canary in background.

Fondamentalmente, il CNA di iOS attiverà questo controllo solo a seguito di una navigazione HTTP a pagina intera (reindirizzamento della posizione). Se uno sviluppatore crea una moderna Single Page Application (SPA) che invia i dati del modulo tramite una chiamata AJAX asincrona (ad es. fetch() o Axios) e aggiorna il DOM in modo dinamico senza modificare l'URL, il CNA non eseguirà mai una seconda volta il suo controllo di connettività. L'utente verrà autenticato a livello di gateway, ma il pulsante del CNA nell'angolo in alto a destra rimarrà impostato su "Annulla". Se l'utente frustrato fa clic su "Annulla", il dispositivo iOS si disassocerà immediatamente dall'SSID, interrompendo la sessione WiFi [1].

Per evitare questo problema, il gestore del successo dell'autenticazione deve eseguire un reindirizzamento a pagina intera verso una pagina di destinazione fisica (ad es. window.location.href = '/success') o inviare il modulo di accesso in modo nativo tramite una richiesta standard HTTP POST.

Guida all'implementazione

Per garantire un rendering coerente su tutte le piattaforme, gli sviluppatori devono passare dal design web moderno e ricco di risorse a uno stile di codifica altamente autonomo e difensivo.

La regola d'oro: Progettare per una connettività Internet pari a zero

Durante lo stato captive, il dispositivo client non ha alcun accesso a Internet. Può solo risolvere e accedere a indirizzi IP e domini esplicitamente inclusi nella whitelist del controller wireless denominata Walled Garden (come l'IP del server del Captive Portal stesso). Pertanto, qualsiasi risorsa esterna a cui si fa riferimento nel codice HTML non verrà caricata, compromettendo il layout.

Per progettare in modo difensivo, implementa la seguente Lista di controllo per la progettazione del Captive Portal Mobile-First:

1. Configurazione del Viewport

Per evitare che i dispositivi mobili riducano il viewport a una larghezza desktop (in genere 980px), l'HTML <head> deve includere un meta tag responsive per il viewport. Senza di questo, il testo e i campi di input appariranno microscopici sui dispositivi mobili:

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

2. Incorporamento di CSS in linea ed eliminazione delle dipendenze esterne

Non collegare mai file CSS esterni o CDN (ad es. Bootstrap, Tailwind o Google Fonts). Tutto il codice CSS deve essere inserito all'interno di un blocco <style> nell' <head> dell'HTML.

Per la tipografia, utilizza un system font stack che fa riferimento ai caratteri locali preinstallati nel sistema operativo. In questo modo si evitano del tutto le richieste HTTP e si garantisce che la pagina si carichi istantaneamente utilizzando il carattere sans-serif nativo e di alta qualità del dispositivo:

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #F5F1ED; /* Pearl White Brand Colour */
    color: #011638; /* Dark Blue Brand Colour */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

3. Codifica degli Asset in Base64

Le immagini, i loghi e le icone non devono essere richiamati tramite URL HTTP esterni, a meno che il dominio ospitante non sia inserito nella whitelist del walled garden del gateway. Il metodo più affidabile consiste nel codificare i piccoli elementi visivi (come i loghi PNG o SVG) direttamente all'interno dell'HTML o del CSS come URI di dati Base64:

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

4. Ottimizzazione dei Campi di Input e dei Target di Selezione (Tap)

Per garantire la conformità con gli standard di usabilità su dispositivi mobili (come le linee guida sull'interfaccia umana di Apple), tutti gli elementi interattivi devono essere ottimizzati per l'input tattile:

• Dimensione del Font di Input: Le dimensioni del carattere del testo di input devono essere di almeno 16px. Se la dimensione del font è inferiore (ad es. 14px), iOS Safari e il CNA ingrandiranno automaticamente il campo di input al momento della messa a fuoco, distorcendo il layout della pagina [1].
• Target di Selezione: Pulsanti, caselle di controllo e collegamenti devono avere un'area minima del target di selezione pari a 44px x 44px per evitare clic accidentali o frustrazione da parte dell'utente.

5. Consenso Legale e Conformità GDPR

Durante l'acquisizione dei dati degli ospiti (ad es. e-mail, numero di telefono o profili social), la struttura HTML deve supportare un consenso legale esplicito. Ai sensi del GDPR, le caselle di controllo preselezionate o le dichiarazioni di consenso implicite (ad es. "Accedendo, accetti i nostri termini") non sono conformi [3].

• Fornire una casella di controllo non selezionata per impostazione predefinita per i Termini e Condizioni e l'Informativa sulla Privacy.
• Inserire il testo legale dettagliato in un contenitore ad altezza limitata con barra di scorrimento (max-height: 120px; overflow-y: auto;) per mantenere il modulo di login principale sopra la piega della pagina (above the fold).

<div class="consent-container">
    <input type="checkbox" id="terms_consent" name="terms_consent" required>
    <label for="terms_consent">
        I explicitly agree to the <a href="#" onclick="showTerms()">Terms of Service</a> and consent to the processing of my data in accordance with the <a href="#" onclick="showPrivacy()">Privacy Policy</a>.
    </label>
</div>

Modello HTML/CSS Personalizzato per Captive Portal

Di seguito è riportato un modello HTML/CSS a file singolo, completo e pronto per la produzione, che integra tutte le migliori pratiche ottimizzate per dispositivi mobili e conformi al CNA. Presenta un layout responsive, un set di caratteri di sistema, segnaposto per asset pronti per Base64, campi di input touch-friendly e strutture di consenso esplicito conformi al GDPR:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Guest WiFi Login</title>
    <style>
        /* CSS Reset & Variable Declarations */
        :root {
            --color-primary: #7458FD; /* Purple Brand Colour */
            --color-dark: #011638; /* Dark Blue */
            --color-light: #F5F1ED; /* Pearl White */
            --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;
        }
        
        /* Layout scheda reattiva */
        .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;
        }
        
        /* Segnaposto logo incorporato in Base64 */
        .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;
        }
        
        /* Stili modulo */
        .form-group {
            text-align: left;
            margin-bottom: 16px;
        }
        
        label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 6px;
            color: var(--color-dark);
        }
        
        /* Critico: la dimensione del carattere deve essere di almeno 16px per impedire lo zoom automatico in 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);
        }
        
        /* Stili consenso */
        .consent-group {
            display: flex;
            align-items: flex-start;
            text-align: left;
            margin: 20px 0;
        }
        
        /* Dimensionamento del target ottimizzato per il touch */
        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">IL TUO BRAND</text>
            </svg>
        </div>
        
        <h1>Benvenuto nel WiFi per gli ospiti</h1>
        <p>Inserisci i tuoi dati qui sotto per accedere a internet in modo sicuro e ad alta velocità.</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">Nome e Cognome</label>
                <input type="text" id="guest_name" name="name" placeholder="Mario Rossi" required autocomplete="name">
            </div>
            
            <div class="form-group">
                <label for="guest_email">Indirizzo e-mail</label>
                <input type="email" id="guest_email" name="email" placeholder="john@example.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">
                    Accetto i <a href="#" onclick="toggleTerms(event)">Termini di Servizio</a> e acconsento al trattamento dei dati in conformità con le normative GDPR.
                </label>
            </div>
            
            <div id="terms_box" class="terms-scrollbox">
                <strong>Termini di Servizio WiFi:</strong><br>
                1. Questo servizio viene fornito così com'è senza garanzie.<br>
                2. Gli utenti non devono intraprendere attività illegali ad alta intensità di banda.<br>
                3. I dati personali vengono raccolti esclusivamente per l'autenticazione e il consenso al marketing in conformità con la nostra Informativa sulla Privacy.
            </div>
            
            <button type="submit" class="btn-submit">Connettiti al WiFi</button>
        </form>
        
        <div class="footer">
            Powered by Purple | Secure Guest WiFi
        </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('È necessario accettare i Termini di Servizio per connettersi.');
                return false;
            }
            return true;
        }
    </script>
</body>
</html>

Risoluzione dei problemi e mitigazione dei rischi

Durante l'implementazione di Captive Portal HTML/CSS con codice personalizzato, i team di gestione IT incontrano frequentemente diversi gravi rischi operativi:

1. Il loop di avviso del certificato SSL/TLS

Poiché i Captive Portal funzionano intercettando il traffico, presentano un conflitto fondamentale con la moderna sicurezza web HTTPS. Quando un utente tenta di visitare un sito HTTPS (ad es. https://www.google.com) e il gateway tenta di reindirizzare quel traffico verso un Captive Portal HTTP, il browser rileva una mancata corrispondenza nel certificato SSL e mostra un avviso di sicurezza critico "La tua connessione non è privata".

• Mitigazione: Non tentare mai di intercettare direttamente il traffico HTTPS. Affidarsi interamente all'assistente CNA nativo del sistema operativo (che effettua una richiesta HTTP non crittografata per attivare il reindirizzamento). Assicurarsi che il dominio del Captive Portal disponga di un certificato SSL valido e pubblicamente attendibile (ad es. Let's Encrypt o DigiCert) e che sia servito tramite HTTPS solo dopo che il reindirizzamento HTTP iniziale ha indirizzato con successo l'utente al dominio del portale [2].

2. Errori di risoluzione DNS (la trappola del Walled Garden)

Se la tua pagina HTML personalizzata fa riferimento a risorse esterne - come un endpoint OAuth per l'accesso social (ad es. Facebook, Google) o un gateway di pagamento - le richieste DNS per questi domini falliranno a meno che non siano esplicitamente inserite nella whitelist del Walled Garden del controller wireless. Se un dominio manca dalla whitelist, il flusso di accesso si bloccherà, presentando una schermata vuota.

• Mitigazione: Mantieni un elenco di Walled Garden rigoroso e ridotto al minimo. Se utilizzi i social login, inserisci nella whitelist i domini wildcard specifici consigliati dagli identity provider (ad es. *.google.com, *.gstatic.com).

3. Timeout della sessione e vulnerabilità di spoofing MAC

I Captive Portal standard autenticano i dispositivi in base ai loro indirizzi MAC. Tuttavia, i moderni sistemi operativi mobili (iOS 14+ e Android 10+) utilizzano per impostazione predefinita indirizzi MAC casuali (indirizzi WiFi privati), ruotandoli periodicamente. Ciò può far sì che agli ospiti venga ripetutamente richiesto di ripetere l'autenticazione, compromettendo l'esperienza utente [1].

• Mitigazione: Implementa timeout di sessione ragionevoli (ad es. 24 ore) sul server RADIUS per prevenire sessioni non aggiornate e utilizza standard di autenticazione moderni come Passpoint (Hotspot 2.0) o WPA3-Enterprise per un onboarding fluido e sicuro che bypassi completamente i Captive Portal basati su MAC.

Rilevanza dei prodotti Purple: Build vs. Buy

Sebbene la codifica di una singola pagina HTML sia semplice, ospitare, proteggere e scalare un'infrastruttura di Captive Portal personalizzata presenta enormi ostacoli tecnici e di conformità. La tabella seguente confronta le realtà ingegneristiche e operative dell'hosting autonomo di un portale personalizzato rispetto all'utilizzo della piattaforma aziendale gestita di Purple:

La piattaforma di Purple risolve il dilemma "Build vs. Buy". Offre agli sviluppatori la completa libertà creativa di uno spazio di lavoro HTML/CSS personalizzato, eliminando al contempo la complessa e rischiosa ingegneria dell'infrastruttura backend necessaria per supportare l'autenticazione RADIUS sicura su scala.

ROI e impatto sul business

Investire in un Captive Portal personalizzato, reattivo e progettato in modo professionale offre ritorni quantificabili in tutte le operazioni IT, nel marketing e nella conformità legale.

1. Riduzione dei costi operativi (ticket dell'helpdesk IT)

Nelle installazioni su larga scala, come uno stadio o una catena di negozi multi-sito, un Captive Portal non funzionante è una delle cause principali dell'aumento dei ticket di assistenza IT. Quando gli ospiti riscontrano una "schermata bianca" o un pulsante di accesso che non risponde, sovraccaricano il personale in loco o inviano ticket di supporto.

$$\text{Risparmio annuale sull'assistenza} = (\text{Visite annuali totali degli ospiti} \times \text{Tasso di errore del portale} \times \text{Tasso di contatto dell'helpdesk}) \times \text{Costo per ticket di supporto}$$

• Scenario: un centro congressi con 1.000.000 di visitatori all'anno. Un portale codificato male ha un tasso di errore del 5% sui dispositivi iOS più vecchi, il che porta a un tasso di contatto dell'helpdesk del 10%. Con un costo standard del settore di 15 $ per ticket di supporto, il costo operativo è: $$(1.000.000 \times 0.05 \times 0.10) \times $15 = $75.000 \text{ all'anno in costi di supporto evitabili}$$
• Risultato: il passaggio a un modello ottimizzato per CNA e pensato innanzitutto per i dispositivi mobili riduce il tasso di errore del portale a <0,1%, eliminando virtualmente questo dispendio operativo.

2. Acquisizione dei dati di marketing e ottimizzazione dell'opt-in

Per i punti vendita al dettaglio e i locali del settore hospitality, il portale WiFi per gli ospiti è il meccanismo principale per acquisire dati dei clienti di prima parte puliti. Un'interfaccia utente progettata male, con testi microscopici o un layout del modulo faticoso, causa elevati tassi di rimbalzo - gli utenti abbandonano del tutto il processo di accesso, con conseguente perdita di opportunità di marketing.

• Caso di studio (Retail): una catena di vendita al dettaglio nazionale ha implementato un Captive Portal ottimizzato per i dispositivi mobili utilizzando la piattaforma di Purple. Sostituendo un modulo di accesso in più passaggi con un campo di inserimento e-mail singolo (dimensione del carattere: 16px) e un pulsante con target di tocco ottimizzato a 48px, hanno registrato un aumento del 42% delle registrazioni completate e un aumento del 28% delle iscrizioni alla newsletter di marketing nel primo trimestre [6].

3. Mitigazione dei rischi legali e normativi

Ai sensi di GDPR e CCPA, la raccolta di dati non conforme comporta severe sanzioni finanziarie (fino al 4% del fatturato annuo globale ai sensi del GDPR). Affidarsi a caselle di controllo preselezionate o non fornire un'Informativa sulla Privacy chiara e facilmente accessibile sulla splash page espone l'azienda a un'immensa responsabilità legale.

• ROI di mitigazione: L'implementazione di una casella di controllo del consenso esplicita e non selezionata e l'hosting dei termini all'interno di una casella di scorrimento ottimizzata garantiscono la conformità normativa al 100%, mitigando il rischio di sanzioni normative multimilionarie e proteggendo la reputazione del marchio.

Sintesi dei punti chiave

• La Sandbox CNA è restrittiva: Il Websheet iOS di Apple e il CNA macOS sono ambienti altamente protetti da sandbox che bloccano risorse esterne, cookie e font web. Tutti gli stili e le risorse devono essere autonomi (CSS inline, immagini Base64, font di sistema) [1].
• AJAX interrompe l'handshake di uscita di iOS: Per far passare correttamente il dispositivo iOS da "connessione limitata" a "connesso" (cambiando il pulsante in alto a destra da "Annulla" a "Fine"), è necessario attivare un reindirizzamento HTTP a pagina intera. Gli aggiornamenti DOM asincroni lasceranno il dispositivo in un ciclo di captive portal continuo.
• Il Mobile-First è obbligatorio: Oltre il 90% degli accessi avviene da mobile. Progetta un layout a colonna singola (larghezza massima: 480px), utilizza target di tocco ottimizzati per il mobile (minimo 44px x 44px) e applica una dimensione minima del carattere di 16px su tutti i campi di inserimento testo per impedire lo zoom automatico del browser iOS.
• I Walled Garden controllano il DNS: Qualsiasi dominio esterno a cui si fa riferimento durante l'accesso (ad esempio, le API di login social) deve essere esplicitamente inserito nella whitelist del walled garden del controller wireless, altrimenti la pagina non si caricherà.
• Purple elimina la complessità del backend: L'utilizzo del costruttore di portali di Purple offre agli sviluppatori il controllo completo di HTML/CSS tramite un editor personalizzato, scaricando al contempo gli immensi oneri di sicurezza, scalabilità e conformità di RADIUS, integrazioni AP multi-vendor e gestione dei database conforme al GDPR [3].

Riferimenti

• [1] Wireless Broadband Alliance: Captive Network Portal Behaviour
• [2] Android Open Source Project: Captive Portal Login Webview Integration
• [3] European Data Protection Board: Guidelines on Consent under Regulation 2016/679
• [4] Come implementare l'autenticazione 802.1X con Cloud RADIUS
• [5] AP wireless Cisco: Guida 2026 ai prodotti e all'implementazione
• [6] Piattaforma di marketing e analisi Purple WiFi

-

Ascolta il briefing tecnico

Ascolta un senior solutions architect discutere i vincoli tecnici e le strategie di implementazione per i Captive Portal personalizzati: