Individuelles Captive Portal: HTML- und CSS-Leitfaden

Management-Zusammenfassung

Für Enterprise-Standorte - von Luxushotels Hospitality und Einzelhandelsketten Retail bis hin zu Verkehrsknotenpunkten Transport und modernen medizinischen Campusen Healthcare - ist die Gäste-WiFi-Begrüßungsseite die digitale Haustür. Allerdings erfolgen über 90% der Gäste-WiFi-Logins auf mobilen Geräten, auf denen die Darstellung nicht durch Standard-Browser wie Safari oder Chrome gesteuert wird, sondern durch stark eingeschränkte Captive Network Assistant (CNA) Webviews [1]. Diese "Mini-Browser" erzwingen strenge Sandbox-Einschränkungen: Sie blockieren externe CDNs, deaktivieren persistente Cookies, ignorieren externe Webfonts und schränken die Ausführung von JavaScript stark ein, um Sicherheitsrisiken zu minimieren und Session-Hijacking zu verhindern [2].

Wenn ein Entwickler eine Begrüßungsseite mit traditionellen Webstandards entwirft, führen diese Einschränkungen zu fehlerhaften Layouts, fehlenden Brand-Assets und nicht funktionierenden Login-Buttons, was sich direkt auf die Kundenzufriedenheit und das digitale Engagement auswirkt. Dieser Leitfaden bietet Lösungen für diese Herausforderungen und stellt defensive Codierungspraktiken vor - wie Inline-CSS, Base64-Asset-Codierung, System-Font-Stacks und explizite navigationsgesteuerte Authentifizierungs-Handshakes -, um ein nahtloses plattformübergreifendes Rendering zu gewährleisten. Darüber hinaus untersuchen wir, wie Entwickler durch die Nutzung einer Managed Solution wie dem Portal-Builder von Purple die volle kreative Kontrolle über HTML/CSS behalten und gleichzeitig die RADIUS-Authentifizierung, die Datenbank-Skalierung, die GDPR/PCI-Compliance und die Multi-Vendor-AP-Integrationen auslagern können [3].

Technischer Deep-Dive

Um ein stabiles, individuelles Captive Portal zu erstellen, müssen Entwickler die Interzeption auf Netzwerkebene und die Browser-Virtualisierung verstehen, die stattfinden, wenn sich ein Gast mit einer offenen SSID verbindet.

Der Captive Portal Lifecycle

Wenn sich ein Client-Gerät mit einer Captive SSID verbindet, wird die folgende Sequenz ausgelöst:

1. IP-Zuweisung: Das Gerät schließt einen 3-Wege-Handshake ab und fordert eine IP-Adresse über DHCP an.
2. Aktiver Konnektivitätstest: Der Hintergrund-Netzwerkmanager des Betriebssystems sendet sofort einen HTTP-GET-Request an eine dedizierte, herstellerneutrale Canary-URL (z. B. Apples http://captive.apple.com/hotspot-detect.html oder Googles http://connectivitycheck.gstatic.com/generate_204) [1].
3. DNS/HTTP-Interzeption: Der lokale Wireless LAN Controller (WLC) oder Access Point (AP) fängt diesen Port-80-HTTP-Request ab. Anstatt den erwarteten HTTP-Status 200 oder 204 zurückzugeben, leitet das Gateway den Datenverkehr des Clients über einen HTTP-302-Redirect an die URL der Landingpage des Captive Portals weiter [2].
4. Webview-Generierung: Nach dem Erkennen des Redirects startet das Betriebssystem seinen nativen Captive Network Assistant (CNA) Mini-Browser, um die weitergeleitete Begrüßungsseite anzuzeigen, sodass der Benutzer keinen vollständigen Browser manuell öffnen muss.5. Authentifizierung und Zustandsübergang: Der Benutzer füllt das Anmeldeformular aus und sendet die Anmeldedaten an den Portal-Server zurück, der das Gateway (häufig über einen RADIUS Access-Accept oder einen externen API-Aufruf) anweist, die MAC-Adresse zu autorisieren.
5. CNA-Exit-Handshake: Der CNA-Minibrowser führt einen weiteren HTTP GET zu seiner Canary-URL aus. Wenn er die erwartete Antwort 200/204 erhält, ändert er seine Schaltfläche oben rechts von "Abbrechen" auf "Fertig" und stellt die WiFi Verbindung als primäre Netzwerkschnittstelle her.

Plattformspezifische Einschränkungen von Minibrowsern

Jedes Betriebssystem verarbeitet diesen Lebenszyklus in unterschiedlichen Webview-Umgebungen, was zu einem stark fragmentierten Verhalten führt. Die folgende Tabelle beschreibt diese kritischen Einschränkungen im Detail:

Umgehung der Apple CNA "Fertig"-Button-Falle beim Coding

Eines der häufigsten Fehlerszenarien bei der Entwicklung individueller Portale ist die "Fertig"-Button-Falle auf iOS-Geräten. Wenn sich ein Benutzer authentifiziert, muss das iOS Websheet-Webview erkennen, dass das Netzwerk nicht mehr captive ist. Dies geschieht durch die Überwachung des Erfolgs seiner im Hintergrund ausgeführten Canary-Anfragen.Entscheidend ist, dass der iOS CNA diese Prüfung nur bei einer vollständigen HTTP-Seitennavigation (Location-Redirect) auslöst. Wenn ein Entwickler eine moderne Single Page Application (SPA) erstellt, die Formulardaten über einen asynchronen AJAX-Aufruf (z. B. fetch() oder Axios) übermittelt und das DOM dynamisch aktualisiert, ohne die URL zu ändern, wird der CNA seine Konnektivitätsprüfung niemals erneut ausführen. Der Benutzer wird auf Gateway-Ebene authentifiziert, aber die Schaltfläche des CNA in der oberen rechten Ecke bleibt auf "Abbrechen" (bzw. "Cancel") stehen. Wenn der frustrierte Benutzer auf "Abbrechen" klickt, trennt das iOS-Gerät sofort die Verbindung zur SSID und beendet die WiFi-Sitzung [1].

Um dies zu verhindern, muss der Handler für den erfolgreichen Authentifizierungsabschluss eine vollständige Seitenweiterleitung zu einer physischen Landingpage durchführen (z. B. window.location.href = '/success') oder das Anmeldeformular nativ über eine Standard-HTTP-POST-Aktion übermitteln.

Implementierungshandbuch

Um eine konsistente Darstellung auf allen Plattformen zu gewährleisten, müssen Entwickler von modernen, asset-lastigen Webdesigns zu einem hochgradig in sich geschlossenen, defensiven Codierungsstil übergehen.

Die goldene Regel: Design für null Internetkonnektivität

Während des Captive-Zustands hat das Client-Gerät keinen Zugriff auf das breitere Internet. Es kann nur IP-Adressen und Domänen auflösen und darauf zugreifen, die explizit in der Walled Garden-Liste des Wireless-Controllers freigegeben sind (wie z. B. die IP-Adresse des Captive Portal-Servers selbst). Daher schlägt das Laden aller in Ihrem HTML referenzierten externen Ressourcen fehl, was zu einem fehlerhaften Layout führt.

Um defensiv zu gestalten, implementieren Sie die folgende Checkliste für Mobile-First Captive Portal-Design:

1. Viewport-Konfiguration

Um zu verhindern, dass Mobilgeräte den Viewport auf eine Desktop-Breite (typischerweise 980px) herunterskalieren, muss der HTML-<head> ein responsives Viewport-Meta-Tag enthalten. Ohne dieses Tag erscheinen Text- und Eingabefelder auf Mobilgeräten mikroskopisch klein:

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

2. CSS einbetten und externe Abhängigkeiten entfernen

Verlinken Sie niemals auf externe CSS-Dateien oder CDNs (z. B. Bootstrap, Tailwind oder Google Fonts). Sämtlicher CSS-Code muss in einem <style>-Block im HTML-<head> eingebettet sein.

Verwenden Sie für die Typografie einen System-Schriftstapel (System Font Stack), der auf vorinstallierte lokale Betriebssystem-Schriftarten verweist. Dies vermeidet HTTP-Anfragen vollständig und stellt sicher, dass die Seite sofort mit der nativen, hochwertigen serifenlosen Schriftart des Geräts geladen wird:

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. Base64 Asset-Kodierung

Bilder, Logos und Icons sollten nicht über externe HTTP-URLs referenziert werden, es sei denn, die Hosting-Domain ist im Walled Garden des Gateways auf der Whitelist. Die zuverlässigste Methode besteht darin, kleine visuelle Assets (wie PNG- oder SVG-Logos) direkt als Base64-Daten-URIs in das HTML oder CSS zu kodieren:

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

4. Optimierung von Eingabefeldern und Touch-Zielen

Um den Standards für mobile Benutzerfreundlichkeit (wie den Human Interface Guidelines von Apple) zu entsprechen, müssen alle interaktiven Elemente für die Toucheingabe optimiert sein:

• Schriftgröße für Eingaben: Die Schriftgröße für Eingabetexte muss mindestens 16px betragen. Wenn die Schriftgröße geringer ist (z. B. 14px), zoomen iOS Safari und der CNA beim Fokussieren automatisch in das Eingabefeld hinein, was das Seitenlayout verzerrt [1].
• Touch-Ziele: Schaltflächen, Kontrollkästchen und Links müssen eine Mindestgröße für das Touch-Ziel von 44px x 44px aufweisen, um versehentliche Klicks oder Frustration bei den Benutzern zu vermeiden.

5. Rechtliche Einwilligung und GDPR-Konformität

Bei der Erfassung von Gästedaten (z. B. E-Mail, Telefonnummer oder Social-Media-Profile) muss die HTML-Struktur eine ausdrückliche rechtliche Einwilligung unterstützen. Gemäß GDPR sind vorausgewählte Kontrollkästchen oder implizite Einverständniserklärungen (z. B. „Mit der Anmeldung stimmen Sie unseren Bedingungen zu“) nicht konform [3].

• Stellen Sie ein standardmäßig nicht ausgewähltes Kontrollkästchen für die Allgemeinen Geschäftsbedingungen und Datenschutzrichtlinien bereit.
• Platzieren Sie detaillierten Rechtstext in einem scrollbaren Container mit begrenzter Höhe (max-height: 120px; overflow-y: auto;), um das Hauptanmeldeformular im sichtbaren Bereich (above the fold) zu halten.

<div class="consent-container">
    <input type="checkbox" id="terms_consent" name="terms_consent" required>
    <label for="terms_consent">
        Ich stimme den <a href="#" onclick="showTerms()">Nutzungsbedingungen</a> ausdrücklich zu und willige in die Verarbeitung meiner Daten gemäß der <a href="#" onclick="showPrivacy()">Datenschutzrichtlinie</a> ein.
    </label>
</div>

Benutzerdefinierte Captive Portal HTML/CSS-Vorlage

Unten finden Sie eine vollständige, produktionsbereite HTML/CSS-Vorlage in einer einzigen Datei, die alle Mobile-First- und CNA-konformen Best Practices berücksichtigt. Sie bietet ein responsives Layout, einen System-Schriftstapel, Base64-bereite Platzhalter für Assets, touchfreundliche Eingabefelder und explizite, GDPR-konforme Einwilligungsstrukturen:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Gast WiFi Login</title>
    <style>
        /* CSS Reset & Variablen-Deklarationen */
        :root {
            --color-primary: #7458FD; /* Purple Markenfarbe */
            --color-dark: #011638; /* Dunkelblau */
            --color-light: #F5F1ED; /* Perlenweiß */
            --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;
        }
        
        /* Responsives Card-Layout */
        .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;
        }
        
        /* Eingebetteter Base64 Logo-Platzhalter */
        .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;
        }
        
        /* Formular-Styles */
        .form-group {
            text-align: left;
            margin-bottom: 16px;
        }
        
        label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 6px;
            color: var(--color-dark);
        }
        
        /* Wichtig: Schriftgröße muss mindestens 16px betragen, um den iOS Auto-Zoom zu verhindern */
        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);
        }
        
        /* Einwilligung-Styles */
        .consent-group {
            display: flex;
            align-items: flex-start;
            text-align: left;
            margin: 20px 0;
        }
        
        /* Touch-freundliche Zielgröße */
        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">IHRE MARKE</text>
            </svg>
        </div>
        
        <h1>Willkommen im Gäste WiFi</h1>
        <p>Bitte geben Sie unten Ihre Daten ein, um einen sicheren, schnellen Internetzugang zu erhalten.</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">Vollständiger Name</label>
                <input type="text" id="guest_name" name="name" placeholder="Max Mustermann" required autocomplete="name">
            </div>
            
            <div class="form-group">
                <label for="guest_email">E-Mail-Adresse</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">
                    Ich akzeptiere die <a href="#" onclick="toggleTerms(event)">Nutzungsbedingungen</a> und willige in die Datenverarbeitung gemäß den GDPR-Vorschriften ein.
                </label>
            </div>
            
            <div id="terms_box" class="terms-scrollbox">
                <strong>WiFi Nutzungsbedingungen:</strong><br>
                1. Dieser Dienst wird ohne Gewährleistung bereitgestellt.<br>
                2. Nutzer dürfen keine illegalen, bandbreitenintensiven Aktivitäten durchführen.<br>
                3. Personenbezogene Daten werden ausschließlich für die Authentifizierung und Marketing-Einwilligungen in Übereinstimmung mit unserer Datenschutzrichtlinie erhoben.
            </div>
            
            <button type="submit" class="btn-submit">Mit WiFi verbinden</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('Sie müssen die Nutzungsbedingungen akzeptieren, um eine Verbindung herzustellen.');
                return false;
            }
            return true;
        }
    </script>
</body>
</html>

Fehlerbehebung & Risikominimierung

Bei der Bereitstellung von selbst codierten HTML/CSS-basierten Captive Portals stoßen IT-Betriebsteams häufig auf mehrere schwerwiegende operationelle Risiken:

1. Die SSL/TLS-Zertifikatswarnschleife

Da Captive Portals durch das Abfangen von Datenverkehr funktionieren, stellen sie einen grundlegenden Konflikt mit der modernen HTTPS-Websicherheit dar. Wenn ein Nutzer versucht, eine HTTPS-Website aufzurufen (z. B. https://www.google.com), und das Gateway versucht, diesen Datenverkehr auf ein HTTP-basiertes Captive Portal umzuleiten, erkennt der Browser eine Diskrepanz im SSL-Zertifikat und zeigt eine kritische Sicherheitswarnung "Ihre Verbindung ist nicht privat" an.

• Risikominimierung: Versuchen Sie niemals, HTTPS-Datenverkehr direkt abzufangen. Verlassen Sie sich stattdessen vollständig auf den nativen CNA-Assistenten des Betriebssystems (der eine unverschlüsselte HTTP-Anfrage stellt, um die Umleitung auszulösen). Stellen Sie sicher, dass die Domain Ihres Captive Portals über ein gültiges, öffentlich vertrauenswürdiges SSL-Zertifikat (z. B. Let's Encrypt oder DigiCert) verfügt und erst dann über HTTPS bereitgestellt wird, wenn die anfängliche HTTP-Umleitung den Nutzer erfolgreich zu Ihrer Portal-Domain weitergeleitet hat [2].

2. DNS-Auflösungsfehler (Die Walled-Garden-Falle)

Wenn Ihre benutzerdefinierte HTML-Seite auf externe Ressourcen verweist - wie z. B. einen OAuth-Endpunkt für Social Login (z. B. Facebook, Google) oder ein Zahlungs-Gateway - schlagen die DNS-Anfragen für diese Domains fehl, es sei denn, sie sind explizit im Walled Garden des Wireless Controllers freigegeben. Wenn eine Domain in der Whitelist fehlt, gerät der Anmeldefluss ins Stocken und zeigt einen leeren Bildschirm an.

• Risikominderung: Führen Sie eine strikte, minimale Walled Garden-Liste. Bei der Verwendung von Social Logins sollten Sie die spezifischen Wildcard-Domains freigeben, die von den Identitätsanbietern empfohlen werden (z. B. *.google.com, *.gstatic.com).

3. Sitzungs-Timeout und Schwachstellen bei MAC-Spoofing

Standardmäßige Captive Portals authentifizieren Geräte anhand ihrer MAC-Adressen. Moderne mobile Betriebssysteme (iOS 14+ und Android 10+) verwenden jedoch standardmäßig zufällige MAC-Adressen (private WiFi-Adressen) und rotieren diese regelmäßig. Dies kann dazu führen, dass Gäste wiederholt zur erneuten Authentifizierung aufgefordert werden, was die Benutzererfahrung beeinträchtigt [1].

• Risikominderung: Implementieren Sie angemessene Sitzungs-Timeouts (z. B. 24 Stunden) auf dem RADIUS-Server, um veraltete Sitzungen zu verhindern, und nutzen Sie moderne Authentifizierungsstandards wie Passpoint (Hotspot 2.0) oder WPA3-Enterprise für ein nahtloses, sicheres Onboarding, das MAC-basierte Captive Portals vollständig umgeht.

Relevanz der Purple-Produkte: Eigenentwicklung vs. Kauf

Während das Codieren einer einzelnen HTML-Seite unkompliziert ist, stellt das Hosten, Sichern und Skalieren einer benutzerdefinierten Captive Portal-Infrastruktur enorme technische und Compliance-Hürden dar. Die folgende Tabelle vergleicht die entwicklungsbezogenen und operativen Realitäten eines selbstgehosteten benutzerdefinierten Portals mit der verwalteten Enterprise-Plattform von Purple:

• Minderungs-ROI: Die Implementierung eines expliziten, nicht angekreuzten Zustimmungs-Kontrollkästchens und das Hosten von Bedingungen in einer optimierten Scrollbox gewährleistet eine 100%ige Einhaltung von Vorschriften, minimiert das Risiko von Bußgeldern in Millionenhöhe und schützt den Ruf der Marke.

Zusammenfassung der wichtigsten Erkenntnisse

• Die CNA-Sandbox ist restriktiv: Apples iOS Websheet und macOS CNA sind stark eingeschränkte Sandbox-Umgebungen, die externe Ressourcen, Cookies und Web-Schriftarten blockieren. Das gesamte Styling und alle Ressourcen müssen in sich geschlossen sein (Inline-CSS, Base64-Bilder, System-Schriftarten) [1].
• AJAX unterbricht den iOS-Exit-Handshake: Um das iOS-Gerät erfolgreich von "gesperrt" auf "verbunden" umzustellen (wodurch sich die Schaltfläche oben rechts von "Abbrechen" auf "Fertig" ändert), müssen Sie eine ganzseitige HTTP-Weiterleitung auslösen. Asynchrone DOM-Aktualisierungen führen dazu, dass das Gerät in einer Captive-Schleife verbleibt.
• Mobile-First ist obligatorisch: Über 90 % der Anmeldungen erfolgen auf Mobilgeräten. Entwerfen Sie ein einspaltiges Layout (max-width: 480px), nutzen Sie touchfreundliche Tippziele (mindestens 44px x 44px) und erzwingen Sie eine Schriftgröße von mindestens 16px bei allen Texteingaben, um ein automatisches Heranzoomen des iOS-Browsers zu verhindern.
• Walled Gardens steuern DNS: Jede externe Domain, auf die während des Logins verwiesen wird (z. B. APIs für Social Logins), muss explizit in der Walled Garden-Liste des Wireless-Controllers freigegeben werden, andernfalls kann die Seite nicht geladen werden.
• Purple beseitigt Backend-Komplexität: Die Nutzung des Portal-Builders von Purple gibt Entwicklern die vollständige HTML/CSS-Kontrolle über einen benutzerdefinierten Editor, während die immense Last in Bezug auf Sicherheit, Skalierung und Compliance für RADIUS, AP-Integrationen verschiedener Hersteller und GDPR-konformes Datenbankmanagement abgegeben wird [3].

Referenzen

• [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] So implementieren Sie die 802.1X-Authentifizierung mit Cloud RADIUS
• [5] Cisco Wireless APs: 2026 Guide to Products & Deployment
• [6] Purple WiFi Marketing- & Analyseplattform

Hören Sie sich das technische Briefing an

Hören Sie einem Senior Solutions Architect zu, der die technischen Einschränkungen und Implementierungsstrategien für benutzerdefinierte Captive Portals erläutert: