मुख्य सामग्री पर जाएं
हिन्दी

कस्टम Captive Portal: HTML और CSS गाइड

यह आधिकारिक तकनीकी संदर्भ गाइड एक कस्टम captive portal लैंडिंग पेज को डिज़ाइन और कोड करने के लिए आवश्यक डेवलपमेंट मानकों, CSS आर्किटेक्चर और नेटवर्क-स्तरीय सीमाओं को रेखांकित करती है। यह फ्रंटएंड डेवलपर्स और नेटवर्क आर्किटेक्ट्स को Apple CNA और Android वेबव्यू (webview) वातावरणों को नेविगेट करने के लिए व्यावहारिक रणनीतियाँ प्रदान करती है, जिससे पिक्सेल-परफेक्ट, अनुपालन करने वाले और अत्यधिक प्रदर्शन करने वाले गेस्ट WiFi अनुभव सुनिश्चित होते हैं.

📖 11 मिनट का पाठ📝 2,731 शब्द🔧 2 हल किए गए उदाहरण❓ 3 अभ्यास प्रश्न📚 8 मुख्य परिभाषाएं

इस गाइड को सुनें

पॉडकास्ट ट्रांसक्रिप्ट देखें
Custom Captive Portal: HTML and CSS Guide — A Purple Technical Briefing [INTRODUCTION] Welcome to the Purple Technical Briefing series. Today we are getting into the weeds on something that affects every single guest WiFi deployment — the captive portal. Specifically, we are talking about how to write clean, reliable HTML and CSS for a custom captive portal landing page. If you have ever connected to hotel WiFi and been greeted by a broken splash page — missing images, unstyled text, a login button that does not respond to touch — you have experienced what happens when a developer builds a portal without understanding the constraints of the environment it runs in. Today, we are going to make sure that does not happen to you. This briefing is aimed at frontend developers, creative designers, and web developers who are either building a captive portal from scratch or customising an existing template. We will cover the HTML structure, the CSS rules that matter, the Apple CNA mini-browser constraints that trip up even experienced developers, and how platforms like Purple's portal builder can eliminate most of this complexity entirely. Let us get into it. [TECHNICAL DEEP-DIVE] First, let us establish what a captive portal actually is at the network level. When a device connects to a WiFi network that requires authentication, the network intercepts HTTP traffic and redirects the user to a landing page. This is the captive portal. The user sees a splash page, completes an action — entering an email, accepting terms, logging in via social — and the network then grants full internet access. The critical thing to understand is where this page is rendered. On iOS devices, it opens inside Apple's Captive Network Assistant — the CNA — which is a stripped-down WebKit webview. It is not Safari. It has no persistent cookies. It cannot load external resources. It has limited JavaScript support. And it closes the moment the user switches to another app. On macOS, the CNA renders at a fixed 900 by 572 pixels. On Android, modern devices use Chrome Custom Tabs, which are considerably more capable. Windows 10 opens the user's default browser. Samsung devices use Samsung Internet. This platform fragmentation is the single biggest source of broken captive portals in production. Developers test on their Android phone, everything looks great, and then the hotel's iPhone-toting guests get a white screen with unstyled text. So let us talk about how to code defensively. The golden rule for captive portal HTML and CSS is this: treat the page as if it has no internet connection. Because during the authentication phase, it does not. The network is captive. Any resource your page tries to load from an external URL — a Google Font, a CDN-hosted stylesheet, a JavaScript library, a logo image — will fail silently or cause a loading spinner that never resolves. Starting with the HTML structure. Your document should be a clean HTML5 page. In the head, you need a viewport meta tag with content set to width equals device-width and initial-scale equals one. This is non-negotiable for mobile rendering. Without it, iOS will render the page at 980 pixels wide and scale it down, making everything microscopic. Your CSS must be inline — either in a style block within the head element, or as inline style attributes on individual elements. Do not use an external stylesheet linked via a link tag. That stylesheet lives on your server, which the captive network cannot reach during authentication. The page will render completely unstyled. For fonts, use a system font stack. Something like: font-family — apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif. This tells the browser to use whatever system font is available. Do not use Google Fonts. The import call will fail, and your fallback font will be Times New Roman, which is not the brand experience your client is paying for. For images — your logo, background graphics, decorative elements — you have two options. Either serve them from the same captive portal server, which means they are on the same local network and accessible before authentication completes. Or, better, encode them as Base64 data URIs directly in your HTML or CSS. This eliminates the external dependency entirely. Now let us talk about the page layout. Since over ninety percent of captive portal logins happen on mobile devices, your design should be mobile-first. That means a single-column layout, a maximum width of around 480 pixels, centred on the page. Use flexbox on the body element — display flex, flex-direction column, align-items centre, justify-content centre, min-height 100 viewport height. This centres your content card vertically and horizontally on any screen size. Your primary call-to-action button needs to be touch-friendly. Apple's Human Interface Guidelines specify a minimum tap target of 44 by 44 pixels. In practice, for a primary CTA, you want something more like 48 pixels tall, full width within the container, with a border-radius of around 8 to 12 pixels. For form fields — email input, name input — set the font-size to at least 16 pixels. This is critical. iOS Safari and the CNA will automatically zoom in on any input field with a font-size below 16 pixels, which breaks your carefully crafted layout. Setting font-size to 16 pixels or above prevents this zoom behaviour. The legal consent section deserves particular attention. Under GDPR, if you are collecting personal data — even just an email address — you need explicit, informed consent. This means a checkbox that is unchecked by default, with a visible label that clearly states what the user is consenting to. Do not pre-tick the checkbox. The consent checkbox itself must be clearly visible without scrolling. Now, a critical implementation detail for iOS CNA specifically. When the user completes authentication, the CNA monitors whether the captive domain has become accessible. The check is triggered by full page navigation, not by JavaScript AJAX calls. This means if you build a single-page app that submits the form via fetch or XMLHttpRequest and updates the DOM without a full page redirect, the CNA will never detect that authentication has completed. You must redirect to a new URL after authentication — a full HTTP redirect, not a JavaScript DOM manipulation. This is one of the most common mistakes in captive portal development. For JavaScript, keep it minimal. The CNA has limited JS support and no access to localStorage or sessionStorage. Cookies are destroyed when the CNA closes. Any state management that relies on these browser APIs will fail. Vanilla JavaScript event listeners are fine. jQuery is a 30-kilobyte external dependency that will fail to load. [IMPLEMENTATION RECOMMENDATIONS AND PITFALLS] Let me give you the practical implementation checklist. First: viewport meta tag, always. Second: all CSS inline, no external stylesheets. Third: all images either served from the captive portal server or Base64-encoded. Fourth: system font stack, no web fonts. Fifth: minimum 16 pixel font size on all input fields. Sixth: touch-friendly tap targets, minimum 44 by 44 pixels. Seventh: single column layout, max-width 480 pixels. Eighth: full page redirect on authentication, not a JavaScript state update. Ninth: GDPR-compliant consent checkbox, unchecked by default. Tenth: test on a real iOS device using an actual captive network, not a browser preview. The pitfalls I see most often in production. Number one: Google Fonts — remove the import, it will fail. Number two: external JavaScript libraries — Bootstrap, jQuery, any CDN-hosted script will fail. Number three: CSS variables declared in an external stylesheet — they must be in your inline style block. Number four: background images referenced by URL — Base64 encode them. Number five: AJAX form submission without a post-authentication redirect — the CNA will not detect authentication completion. Now, the honest conversation about building versus buying. Building a custom captive portal from scratch means you are also responsible for the backend infrastructure — the RADIUS server, the database, the SSL certificate, the DNS configuration, the network integration with your access points, and the ongoing security patching. This is a significant engineering commitment. Purple's portal builder gives you a drag-and-drop interface with a custom HTML and CSS editor for developers who need pixel-perfect control, while handling all of the backend infrastructure — the authentication, the data capture, the analytics, the GDPR compliance tooling, and the network integrations with over 200 access point vendors. You get the creative control without the infrastructure overhead. [RAPID-FIRE Q AND A] Can I use CSS Grid in a captive portal? Yes, but test on iOS CNA specifically. Flexbox has broader support in older WebKit versions. Can I use SVG logos? Yes, inline SVGs are fully supported and preferable to Base64-encoded PNGs for logos because they scale perfectly on retina displays. Does the macOS CNA support the same constraints as iOS CNA? Broadly yes, with one difference: macOS CNA renders at a fixed 900 by 572 pixel window. Can I use a CSS framework like Tailwind? Only if you generate a purged, self-contained CSS file and inline it in your style block. What about HTTPS? Your captive portal must be served over HTTP for the initial redirect to work — HTTPS connections cannot be intercepted by the captive network. [SUMMARY AND NEXT STEPS] To summarise today's briefing. A custom captive portal is a constrained web environment, not a standard browser context. The Apple CNA and Android webviews impose strict limitations on external resources, cookies, JavaScript, and session state. The solution is to build self-contained HTML pages with inline CSS, system fonts, Base64-encoded images, and full-page redirects on authentication. For venue operators and IT teams evaluating their options: if your requirement is a fully branded, bespoke portal with custom HTML and CSS, the choice is between building and maintaining the full stack yourself — which is a substantial engineering commitment — or using a platform like Purple that provides the custom HTML and CSS editing capability on top of a production-grade backend infrastructure. The next steps from here: review Purple's portal editor documentation, audit your existing portal against the mobile-first checklist we covered today, and if you are starting from scratch, use the HTML template structure we outlined as your baseline. Thanks for listening, and we will see you in the next briefing.

header_image.png

कार्यकारी सारांश

एंटरप्राइज वेन्यू के लिए—लक्जरी होटलों Hospitality और रिटेल चेन Retail से लेकर ट्रांजिट हब Transport और आधुनिक मेडिकल परिसरों Healthcare तक—गेस्ट WiFi स्प्लैश पेज डिजिटल फ्रंट डोर (मुख्य द्वार) है। हालांकि, 90% से अधिक गेस्ट WiFi लॉगिन मोबाइल उपकरणों पर होते हैं, जहां रेंडरिंग सफारी या क्रोम जैसे मानक ब्राउज़रों द्वारा नहीं, बल्कि अत्यधिक प्रतिबंधित Captive Network Assistant (CNA) वेबव्यू [1] द्वारा नियंत्रित होती है।

ये "मिनी-ब्राउज़र" गंभीर सैंडबॉक्स सीमाएं लागू करते हैं: वे सुरक्षा जोखिमों को कम करने और सेशन हाईजैकिंग को रोकने के लिए बाहरी CDN को ब्लॉक करते हैं, लगातार रहने वाली कुकीज़ (persistent cookies) को अक्षम करते हैं, बाहरी वेब फ़ॉन्ट्स को अनदेखा करते हैं, और JavaScript निष्पादन को गंभीर रूप से प्रतिबंधित करते हैं [2]।

जब कोई डेवलपर पारंपरिक वेब मानकों का उपयोग करके स्प्लैश पेज डिज़ाइन करता है, तो इन सीमाओं के कारण लेआउट टूट जाते हैं, ब्रांड एसेट गायब हो जाते हैं, और लॉगिन बटन काम नहीं करते हैं, जिससे सीधे तौर पर ग्राहक संतुष्टि और डिजिटल जुड़ाव प्रभावित होता है। यह गाइड इन चुनौतियों का समाधान प्रदान करती है, जिसमें सहज क्रॉस-प्लेटफ़ॉर्म रेंडरिंग सुनिश्चित करने के लिए सुरक्षात्मक कोडिंग प्रथाओं—जैसे इनलाइन CSS, Base64 एसेट एन्कोडिंग, सिस्टम फ़ॉन्ट स्टैक और स्पष्ट नेविगेशन-संचालित प्रमाणीकरण हैंडशेक—को प्रस्तुत किया गया है। इसके अलावा, हम यह जांचते हैं कि Purple के पोर्टल बिल्डर जैसे प्रबंधित समाधान का उपयोग करने से डेवलपर्स को RADIUS प्रमाणीकरण, डेटाबेस स्केलिंग, GDPR/PCI अनुपालन और मल्टी-वेंडर AP एकीकरण को आउटसोर्स करते हुए पूर्ण HTML/CSS रचनात्मक नियंत्रण बनाए रखने की अनुमति कैसे मिलती है [3]।

तकनीकी गहन विश्लेषण

एक मजबूत कस्टम captive portal बनाने के लिए, डेवलपर्स को नेटवर्क-स्तरीय इंटरसेप्शन और ब्राउज़र वर्चुअलाइजेशन को समझना होगा जो तब होता है जब कोई गेस्ट एक ओपन Service Set Identifier (SSID) से जुड़ता है।

Captive Portal लाइफसाइकिल

जब कोई क्लाइंट डिवाइस एक कैप्टिव SSID से जुड़ता है, तो निम्नलिखित अनुक्रम ट्रिगर होता है:

  1. IP एसोसिएशन: डिवाइस 3-वे हैंडशेक पूरा करता है और DHCP के माध्यम से एक IP पते का अनुरोध करता है।
  2. सक्रिय कनेक्टिविटी प्रोब: ऑपरेटिंग सिस्टम का बैकग्राउंड नेटवर्क मैनेजर तुरंत एक समर्पित वेंडर-न्यूट्रल कैनरी URL (जैसे, Apple का http://captive.apple.com/hotspot-detect.html या Google का http://connectivitycheck.gstatic.com/generate_204) पर HTTP GET अनुरोध भेजता है [1]।
  3. DNS/HTTP इंटरसेप्शन: स्थानीय वायरलेस LAN कंट्रोलर (WLC) या एक्सेस पॉइंट (AP) इस पोर्ट 80 HTTP अनुरोध को इंटरसेप्ट करता है। अपेक्षित HTTP 200 या 204 स्टेटस वापस करने के बजाय, गेटवे क्लाइंट के ट्रैफ़िक को HTTP 302 रीडायरेक्ट के माध्यम से captive portal के लैंडिंग पेज URL पर रीडायरेक्ट करता है [2]।
  4. वेबव्यू स्पॉनिंग: रीडायरेक्ट का पता चलने पर, OS रीडायरेक्ट किए गए स्प्लैश पेज को प्रदर्शित करने के लिए अपने मूल Captive Network Assistant (CNA) मिनी-ब्राउज़र को स्पॉन करता है, जिससे उपयोगकर्ता को मैन्युअल रूप से एक पूर्ण ब्राउज़र खोलने की आवश्यकता नहीं होती है।
  5. प्रमाणीकरण और स्थिति संक्रमण: उपयोगकर्ता लॉगिन फॉर्म पूरा करता है, क्रेडेंशियल वापस पोर्टल सर्वर पर सबमिट करता है, जो गेटवे को MAC पते को अधिकृत करने का निर्देश देता है (अक्सर RADIUS Access-Accept या बाहरी API कॉल के माध्यम से)।
  6. CNA एक्जिट हैंडशेक: CNA मिनी-ब्राउज़र अपने कैनरी URL पर दूसरा HTTP GET निष्पादित करता है। यदि इसे अपेक्षित 200/204 प्रतिक्रिया प्राप्त होती है, तो यह अपने शीर्ष-दाएं बटन को "Cancel" से बदलकर "Done" कर देता है और WiFi कनेक्शन को प्राथमिक नेटवर्क इंटरफ़ेस के रूप में स्थापित करता है।

प्लेटफ़ॉर्म-विशिष्ट मिनी-ब्राउज़र सीमाएँ

प्रत्येक ऑपरेटिंग सिस्टम विभिन्न वेबव्यू वातावरणों के भीतर इस लाइफसाइकिल को संभालता है, जिसके परिणामस्वरूप अत्यधिक खंडित व्यवहार होता है। नीचे दी गई तालिका इन महत्वपूर्ण सीमाओं का विवरण देती है:

प्लेटफ़ॉर्म / वेबव्यू डिस्प्ले विधि लगातार रहने वाली कुकीज़ बाहरी वेब फ़ॉन्ट्स JavaScript निष्पादन विंडो आयाम एक्जिट हैंडशेक ट्रिगर
Apple iOS CNA (Websheet) मिनी-ब्राउज़र पॉपअप ब्लॉक (बंद होने पर नष्ट) ब्लॉक (ऑफ़लाइन) सीमित (कोई localStorage/sessionStorage नहीं) रिस्पॉन्सिव (डिवाइस-चौड़ाई) केवल पूर्ण-पृष्ठ HTTP रीडायरेक्ट [1]
Apple macOS CNA (Captive Network Assistant) मिनी-ब्राउज़र पॉपअप ब्लॉक ब्लॉक सीमित (कोई अलर्ट/कन्फर्म डायलॉग नहीं) फिक्स्ड (900px x 572px) केवल पूर्ण-पृष्ठ HTTP रीडायरेक्ट
Android (Google) (CaptivePortalLogin) पुश नोटिफिकेशन -> Chrome Custom Tab अनुमति प्राप्त (क्रोम के साथ साझा) अनुमति प्राप्त (यदि वॉल्ड गार्डन में श्वेतसूचीबद्ध हो) पूर्ण रिस्पॉन्सिव स्वचालित (Captive Portal API / 204 चेक) [2]
Samsung Android (Samsung Internet) पुश नोटिफिकेशन -> मिनी-ब्राउज़र अनुमति प्राप्त अनुमति प्राप्त पूर्ण रिस्पॉन्सिव स्वचालित
Windows 10/11 (डिफ़ॉल्ट ब्राउज़र) ऑटो-लॉन्च डिफ़ॉल्ट ब्राउज़र अनुमति प्राप्त (पूर्ण ब्राउज़र संदर्भ) अनुमति प्राप्त पूर्ण रिस्पॉन्सिव मैन्युअल / स्वचालित

cna_constraints_comparison.png

Apple CNA "Done" बटन ट्रैप से निपटने के लिए कोडिंग

कस्टम पोर्टल विकास में सबसे लगातार विफलताओं में से एक iOS उपकरणों पर "Done" बटन ट्रैप है। जब कोई उपयोगकर्ता प्रमाणित करता है, तो iOS Websheet वेबव्यू को यह पता लगाना चाहिए कि नेटवर्क अब कैप्टिव नहीं है। यह अपने बैकग्राउंड कैनरी अनुरोधों की सफलता की निगरानी करके ऐसा करता है।

महत्वपूर्ण रूप से, iOS CNA केवल एक पूर्ण-पृष्ठ HTTP नेविगेशन (लोकेशन रीडायरेक्ट) पर ही इस जांच को ट्रिगर करेगा। यदि कोई डेवलपर एक आधुनिक सिंगल पेज एप्लीकेशन (SPA) बनाता है जो एसिंक्रोनस AJAX कॉल (जैसे, fetch() या Axios) के माध्यम से फॉर्म डेटा सबमिट करता है और URL को बदले बिना DOM को गतिशील रूप से अपडेट करता है, तो CNA अपनी कनेक्टिविटी जांच को कभी भी दोबारा नहीं चलाएगा। उपयोगकर्ता गेटवे स्तर पर प्रमाणित हो जाएगा, लेकिन शीर्ष-दाएं कोने में CNA बटन "Cancel" के रूप में ही रहेगा। यदि निराश उपयोगकर्ता "Cancel" पर क्लिक करता है, तो iOS डिवाइस तुरंत डिस्कनेक्टSSID से अलग हो जाता है, जिससे WiFi सेशन समाप्त हो जाता है [1]।

इसे रोकने के लिए, ऑथेंटिकेशन सक्सेस हैंडलर को एक फिजिकल लैंडिंग पेज पर फुल-पेज रीडायरेक्ट अवश्य करना चाहिए (जैसे, window.location.href = '/success') या मानक HTTP POST एक्शन के माध्यम से लॉगिन फॉर्म को नेटिव रूप से सबमिट करना चाहिए।

इम्प्लीमेंटेशन गाइड

सभी प्लेटफॉर्म पर लगातार रेंडरिंग सुनिश्चित करने के लिए, डेवलपर्स को आधुनिक, एसेट-हैवी वेब डिज़ाइन से अत्यधिक सेल्फ-कंटेन्ड, डिफेंसिव कोडिंग स्टाइल में बदलाव करना होगा।

गोल्डन रूल: ज़ीरो इंटरनेट कनेक्टिविटी के लिए डिज़ाइन करें

Captive state के दौरान, क्लाइंट डिवाइस के पास व्यापक इंटरनेट तक कोई पहुंच नहीं होती है। यह केवल वायरलेस कंट्रोलर के Walled Garden में स्पष्ट रूप से व्हाइटलिस्ट किए गए IP एड्रेस और डोमेन को ही रिज़ॉल्यूशन और एक्सेस कर सकता है (जैसे कि खुद Captive Portal सर्वर का IP)। इसलिए, आपके HTML में संदर्भित कोई भी बाहरी एसेट लोड होने में विफल हो जाएगी, जिसके परिणामस्वरूप लेआउट खराब हो जाएगा।

डिफेंसिव रूप से डिज़ाइन करने के लिए, निम्नलिखित Mobile-First Captive Portal डिज़ाइन चेकलिस्ट को लागू करें:

mobile_first_checklist.png

1. व्यूपोर्ट कॉन्फ़िगरेशन

मोबाइल डिवाइस को व्यूपोर्ट को डेस्कटॉप चौड़ाई (आमतौर पर 980px) तक छोटा करने से रोकने के लिए, HTML `` में एक रिस्पॉन्सिव व्यूपोर्ट मेटा टैग शामिल होना चाहिए। इसके बिना, मोबाइल डिवाइस पर टेक्स्ट और इनपुट फ़ील्ड बहुत छोटे दिखाई देंगे:

2. इनलाइनिंग CSS और बाहरी डिपेंडेंसी हटाना

कभी भी बाहरी CSS फ़ाइलों या CDNs (जैसे, Bootstrap, Tailwind, या Google Fonts) से लिंक न करें। सभी CSS को HTML `` में `

<div class="portal-card">
    <div class="logo-container">
        
        
            
            आपका ब्रांड
        
    </div>
    
    <h1>Guest WiFi में आपका स्वागत है</h1>
    <p>सुरक्षित, हाई-स्पीड इंटरनेट एक्सेस प्राप्त करने के लिए कृपया नीचे अपना विवरण दर्ज करें।</p>
    
    
    
        <div class="form-group">
            पूरा नाम
            
        </div>
        
        <div class="form-group">
            ईमेल पता
            
        </div>
        
        <div class="consent-group">
            
            
                मैं <a href="#">सेवा की शर्तों</a> को स्वीकार करता हूँ और GDPR नियमों के अनुपालन में डेटा प्रोसेसिंग के लिए सहमति देता हूँ।
            
        </div>
        
        <div id="terms_box" class="terms-scrollbox">
            <strong>WiFi सेवा की शर्तें:</strong><br />
            1. यह सेवा बिना किसी वारंटी के 'जैसी है वैसी ही' प्रदान की जाती है।<br />
            2. उपयोगकर्ताओं को अवैध बैंडविड्थ-गहन गतिविधियों में शामिल नहीं होना चाहिए।<br />
            3. व्यक्तिगत डेटा केवल हमारी गोपनीयता नीति के अनुपालन में प्रमाणीकरण और मार्केटिंग ऑप्ट-इन के लिए एकत्र किया जाता है।
        </div>
        
        WiFi से कनेक्ट करें
    
    
    <div class="footer">
        Purple द्वारा संचालित | सुरक्षित Guest WiFi
    </div>
</div>


## समस्या निवारण और जोखिम न्यूनीकरण

कस्टम-कोडेड HTML/CSS Captive Portals को तैनात करते समय, IT ऑपरेशन्स टीमों को अक्सर कई गंभीर परिचालन जोखिमों का सामना करना पड़ता है:

### 1. SSL/TLS सर्टिफिकेट चेतावनी लूप

चूंकि Captive Portals ट्रैफ़िक को इंटरसेप्ट करके काम करते हैं, इसलिए वे आधुनिक HTTPS वेब सुरक्षा के साथ एक मौलिक संघर्ष पैदा करते हैं। जब कोई उपयोगकर्ता किसी HTTPS साइट (जैसे, `https://www.google.com`) पर जाने का प्रयास करता है, और गेटवे उस ट्रैफ़िक को HTTP Captive Portal पर रीडायरेक्ट करने का प्रयास करता है, तो ब्राउज़र SSL सर्टिफिकेट में बेमेल का पता लगाता है और एक गंभीर "Your connection is not private" सुरक्षा चेतावनी प्रदर्शित करता है। 

* **शमन (Mitigation)**: कभी भी सीधे HTTPS ट्रैफ़िक को इंटरसेप्ट करने का प्रयास न करें। पूरी तरह से ऑपरेटिंग सिस्टम के मूल CNA हेल्पर पर भरोसा करें (जो रीडायरेक्ट को ट्रिगर करने के लिए एक अनएन्क्रिप्टेड HTTP अनुरोध करता है)। सुनिश्चित करें कि आपके Captive Portal के डोमेन के पास एक वैध, सार्वजनिक रूप से विश्वसनीय SSL सर्टिफिकेट (जैसे, Let's Encrypt या DigiCert) है और प्रारंभिक HTTP रीडायरेक्ट द्वारा उपयोगकर्ता को आपके पोर्टल डोमेन पर सफलतापूर्वक रूट करने के *बाद ही* इसे HTTPS पर सर्व किया जाता है [2]।

### 2. DNS रिज़ॉल्यूशन विफलताएं (The Walled Garden Trap)

यदि आपका कस्टम HTML पेज बाहरी संसाधनों को संदर्भित करता है—जैसे कि सोशल लॉगिन OAuth एंडपॉइंट (जैसे, Facebook, Google) या पेमेंट गेटवे—तो इन डोमेन के लिए DNS अनुरोध तब तक विफल रहेंगे जब तक कि उन्हें वायरलेस कंट्रोलर के Walled Garden में स्पष्ट रूप से व्हाइटलिस्ट न किया गया हो। यदि कोई डोमेन व्हाइटलिस्ट से गायब है, तो लॉगिन प्रक्रिया रुक जाएगी और एक खाली स्क्रीन दिखाई देगी।

* **शमन (Mitigation)**: एक सख्त, न्यूनतम Walled Garden सूची बनाए रखें। यदि सोशल लॉगिन का उपयोग कर रहे हैं, तो पहचान प्रदाताओं (identity providers) द्वारा अनुशंसित विशिष्ट वाइल्डकार्ड डोमेन (जैसे, `*.google.com`, `*.gstatic.com`) को व्हाइटलिस्ट करें। 

### 3. सेशन टाइमआउट और MAC स्पूफिंग कमजोरियां

मानक Captive Portals उनके MAC एड्रेस के आधार पर डिवाइसों को प्रमाणित करते हैं। हालांकि, आधुनिक मोबाइल ऑपरेटिंग सिस्टम (iOS 14+ और Android 10+) डिफ़ॉल्ट रूप से रैंडमाइज्ड MAC एड्रेस (प्राइवेट WiFi एड्रेस) का उपयोग करते हैं, और उन्हें समय-समय पर बदलते रहते हैं। इससे मेहमानों को बार-बार पुन: प्रमाणित करने के लिए कहा जा सकता है, जिससे उपयोगकर्ता अनुभव खराब होता है [1]।

* **शमन (Mitigation)**: पुराने सेशन को रोकने के लिए RADIUS सर्वर पर उचित सेशन टाइमआउट (जैसे, 24 घंटे) लागू करें, और सहज, सुरक्षित ऑनबोर्डिंग के लिए **Passpoint (Hotspot 2.0)** या **WPA3-Enterprise** जैसे आधुनिक प्रमाणीकरण मानकों का उपयोग करें जो MAC-आधारित Captive Portals को पूरी तरह से बायपास करते हैं।

## Purple उत्पाद प्रासंगिकता: बनाएं या खरीदें

हालांकि एक सिंगल HTML पेज को कोड करना आसान है, लेकिन एक कस्टम Captive Portal इन्फ्रास्ट्रक्चर को होस्ट करना, सुरक्षित करना और स्केल करना भारी तकनीकी और अनुपालन बाधाएं पेश करता है। नीचे दी गई तालिका एक कस्टम पोर्टल को स्वयं होस्ट करने बनाम Purple के प्रबंधित एंटरप्राइज़ प्लेटफ़ॉर्म का उपयोग करने की इंजीनियरिंग और परिचालन वास्तविकताओं की तुलना करती है:

| विशेषता / परिचालन आवश्यकता | स्व-होस्टेड कस्टम पोर्टल | Purple एंटरप्राइज़ WiFi प्लेटफ़ॉर्म |
| :--- | :--- | :--- |
| **HTML/CSS कस्टमाइज़ेशन** | पूरी तरह से मैन्युअल कोडिंग, व्यक्तिगत APs या स्थानीय वेब सर्वर पर फ़ाइलें अपलोड करना। | **पिक्सेल-परफेक्ट डेवलपर एडिटर** जो कस्टम HTML/CSS इंजेक्ट की अनुमति देता है, साथ ही ड्रैग-एंड-ड्रॉप विज़ुअल बिल्डर। |
| **RADIUS इन्फ्रास्ट्रक्चर** | अत्यधिक उपलब्ध FreeRADIUS या Cloud RADIUS सर्वर को तैनात, कॉन्फ़िगर और बनाए रखना होगा [4]। | एक्टिव-एक्टिव रिडंडेंसी और 99.99% अपटाइम SLAs के साथ **बिल्ट-इन, विश्व स्तर पर वितरित, क्लाउड-नेटिव RADIUS**। |
| **मल्टी-वेंडर AP सपोर्ट** | प्रत्येक हार्डवेयर वेंडर (Cisco, Aruba, Meraki, Ruckus) के लिए कस्टम इंटीग्रेशन स्क्रिप्ट की आवश्यकता होती है [5]। | 200 से अधिक हार्डवेयर मॉडलों के साथ **नेटिव, आउट-ऑफ़-द-बॉक्स इंटीग्रेशन**; मिश्रित-हार्डवेयर संपत्तियों में एकीकृत पोर्टल परिनियोजन। |
| **डेटा गोपनीयता और अनुपालन** | स्थान (Venue) GDPR, CCPA और PCI DSS अनुपालन के लिए 100% कानूनी दायित्व लेता है, जिसमें सुरक्षित डेटाबेस एन्क्रिप्शन और डेटा विलोपन वर्कफ़्लो शामिल हैं। | **डिज़ाइन द्वारा पूरी तरह से अनुपालन**। बिल्ट-इन सहमति प्रबंधन, स्वचालित डेटा-विषय विलोपन अनुरोध, और सुरक्षित ISO 27001-प्रमाणित होस्टिंग। |
| **एनालिटिक्स और मार्केटिंग** | कस्टम डेटा अंतर्ग्रहण (data ingestion) पाइपलाइन बनाने और तीसरे पक्ष के मार्केटिंग टूल को एकीकृत करने की आवश्यकता होती है। | वास्तविक समय में फुटफ़ॉल ट्रैकिंग, रिटर्न-रेट मेट्रिक्स और स्वचालित मार्केटिंग अभियान ट्रिगर्स के साथ **एंटरप्राइज़-ग्रेड एनालिटिक्स डैशबोर्ड** [6]। |
| **पहचान प्रदाता (Identity Provider) एकीकरण** | Google, Facebook, Apple और स्थानीय SMS गेटवे के साथ मैन्युअल OAuth2 एकीकरण। | प्रमुख सोशल प्लेटफॉर्म, SMS गेटवे और कॉर्पोरेट मेहमानों के लिए Azure AD / Okta के साथ **वन-क्लिक एकीकरण**। |

Purple का प्लेटफ़ॉर्म "बनाएं बनाम खरीदें" की दुविधा को हल करता है। यह डेवलपर्स को कस्टम HTML/CSS वर्कस्पेस की पूर्ण रचनात्मक स्वतंत्रता प्रदान करता है, जबकि बड़े पैमाने पर सुरक्षित RADIUS प्रमाणीकरण का समर्थन करने के लिए आवश्यक जटिल, उच्च जोखिम वाले बैकएंड इन्फ्रास्ट्रक्चर इंजीनियरिंग को समाप्त करता है।

## ROI और व्यावसायिक प्रभाव

व्यावसायिक रूप से इंजीनियर, रिस्पॉन्सिव कस्टम Captive Portal में निवेश करने से IT ऑपरेशन्स, मार्केटिंग और कानूनी अनुपालन में मापने योग्य रिटर्न मिलता है।

### 1. परिचालन लागत में कमी (IT हेल्पडेस्क टिकट)

बड़े पैमाने पर तैनाती में, जैसे कि स्टेडियम या मल्टी-साइट रिटेल चेन, एक खराब Captive Portal IT हेल्पडेस्क एस्केलेशन का एक प्रमुख कारण होता है। जब मेहमानों को "सफेद स्क्रीन" या गैर-प्रतिक्रियाशील लॉगिन बटन का सामना करना पड़ता है, तो वे ऑन-साइट कर्मचारियों को परेशान करते हैं या सपोर्ट टिकट जमा करते हैं।

$$\text{Annual Support Savings} = (\text{Total Annual Guest Visits} \times \text{Portal Failure Rate} \times \text{Helpdesk Contact Rate}) \times \text{Cost Per Support Ticket}$$

* **Sपरिदृश्य**: 1,000,000 वार्षिक आगंतुकों वाला एक कन्वेंशन सेंटर। एक खराब कोड वाले पोर्टल की पुराने iOS डिवाइसों पर 5% विफलता दर है, जिससे 10% हेल्पडेस्क संपर्क दर होती है। $15 प्रति सपोर्ट टिकट के उद्योग-मानक पर, परिचालन लागत है:
  $$(1,000,000 \times 0.05 \times 0.10) \times \$15 = \$75,000 \text{ वार्षिक रूप से टाले जा सकने वाले सपोर्ट ओवरहेड में}$$
* **परिणाम**: CNA-अनुकूलित, मोबाइल-फर्स्ट टेम्पलेट पर स्विच करने से पोर्टल विफलता दर घटकर &lt;0.1% हो जाती है, जिससे यह परिचालन लागत लगभग समाप्त हो जाती है।

### 2. मार्केटिंग डेटा कैप्चर और ऑप्ट-इन अनुकूलन

रिटेल और हॉस्पिटैलिटी वेन्यू के लिए, गेस्ट WiFi पोर्टल क्लीन, फर्स्ट-पार्टी कस्टमर डेटा कैप्चर करने का प्राथमिक माध्यम है। सूक्ष्म टेक्स्ट या खराब फॉर्म लेआउट वाला एक खराब डिज़ाइन किया गया यूजर इंटरफेस उच्च **बाउंस दर (bounce rates)** का कारण बनता है—उपयोगकर्ता लॉगिन प्रक्रिया को पूरी तरह से छोड़ देते हैं, जिसके परिणामस्वरूप मार्केटिंग के अवसर खो जाते हैं।

* **केस स्टडी (रिटेल)**: एक राष्ट्रीय रिटेल चेन ने Purple के प्लेटफॉर्म का उपयोग करके मोबाइल-फर्स्ट अनुकूलित Captive Portal लागू किया। एक मल्टी-स्टेप लॉगिन फॉर्म को सिंगल-फील्ड ईमेल इनपुट (font-size: 16px) और एक अनुकूलित 48px टैप-टार्गेट बटन से बदलकर, उन्होंने पहली तिमाही के भीतर **पूरे किए गए रजिस्ट्रेशन में 42% की वृद्धि** और **मार्केटिंग न्यूज़लेटर ऑप्ट-इन में 28% की वृद्धि** देखी [6]।

### 3. कानूनी और नियामक जोखिम न्यूनीकरण

GDPR और CCPA के तहत, गैर-अनुपालन वाले डेटा संग्रह पर गंभीर वित्तीय दंड (GDPR के तहत वैश्विक वार्षिक टर्नओवर का 4% तक) लगता है। पहले से टिक किए गए चेकबॉक्स पर भरोसा करना या अपने स्प्लैश पेज पर स्पष्ट, आसानी से सुलभ गोपनीयता नीति (Privacy Policy) प्रदान करने में विफल होना उद्यम को भारी कानूनी देनदारी के जोखिम में डालता है।

* **न्यूनीकरण ROI**: एक स्पष्ट, अन-टिक सहमति चेकबॉक्स लागू करना और अनुकूलित स्क्रॉलबॉक्स के भीतर शर्तों को होस्ट करना 100% नियामक अनुपालन सुनिश्चित करता है, जिससे लाखों डॉलर के नियामक जुर्माने का जोखिम कम होता है और ब्रांड की प्रतिष्ठा सुरक्षित रहती है।

## मुख्य निष्कर्षों का सारांश

* **CNA सैंडबॉक्स प्रतिबंधात्मक है**: Apple का iOS वेबशीट और macOS CNA अत्यधिक सैंडबॉक्स वाले वातावरण हैं जो बाहरी एसेट, कुकीज़ और वेब फ़ॉन्ट को ब्लॉक करते हैं। सभी स्टाइलिंग और एसेट स्व-निहित (inline CSS, Base64 इमेज, सिस्टम फ़ॉन्ट) होने चाहिए [1]।
* **AJAX, iOS एक्जिट हैंडशेक को बाधित करता है**: iOS डिवाइस को "captive" से "connected" में सफलतापूर्वक स्थानांतरित करने के लिए (ऊपरी-दाएं बटन को "Cancel" से "Done" में बदलना), आपको एक फुल-पेज HTTP रीडायरेक्ट ट्रिगर करना होगा। एसिंक्रोनस DOM अपडेट डिवाइस को कैप्टिव लूप में छोड़ देंगे।
* **मोबाइल-फर्स्ट अनिवार्य है**: 90% से अधिक लॉगिन मोबाइल पर होते हैं। सिंगल-कॉलम लेआउट (max-width: 480px) डिज़ाइन करें, टच-फ्रेंडली टैप टारगेट (न्यूनतम 44px x 44px) का उपयोग करें, और स्वचालित iOS ब्राउज़र ज़ूमिंग को रोकने के लिए सभी टेक्स्ट इनपुट पर न्यूनतम 16px फ़ॉन्ट आकार लागू करें।
* **वॉल्ड गार्डन DNS को नियंत्रित करते हैं**: लॉगिन के दौरान संदर्भित किसी भी बाहरी डोमेन (जैसे, सोशल लॉगिन API) को वायरलेस कंट्रोलर के वॉल्ड गार्डन में स्पष्ट रूप से श्वेतसूची (whitelist) में डाला जाना चाहिए, अन्यथा पेज लोड होने में विफल हो जाएगा।
* **Purple बैकएंड की जटिलता को समाप्त करता है**: Purple के पोर्टल बिल्डर का उपयोग करने से डेवलपर्स को एक कस्टम एडिटर के माध्यम से पूर्ण HTML/CSS नियंत्रण मिलता है, जबकि RADIUS, मल्टी-वेंडर AP एकीकरण, और GDPR-अनुकूल डेटाबेस प्रबंधन के भारी सुरक्षा, स्केलिंग और अनुपालन बोझ से मुक्ति मिलती [3] है।

## संदर्भ

* [1] [Wireless Broadband Alliance: Captive Network Portal Behavior](https://captivebehavior.wballiance.com/)
* [2] [Android Open Source Project: Captive Portal Login Webview Integration](https://source.android.com/docs/core/connect/android-custom-tabs-captive-portal)
* [3] [European Data Protection Board: Guidelines on Consent under Regulation 2016/679](https://edpb.europa.eu/our-work-tools/our-documents/guidelines/guidelines-052020-consent-under-regulation-2016679_en)
* [4] [Cloud RADIUS के साथ 802.1X प्रमाणीकरण कैसे लागू करें](/guides/implementing-8021x-with-cloud-radius)
* [5] [Cisco Wireless APs: उत्पादों और परिनियोजन के लिए 2026 गाइड](/blog/cisco-wireless-ap)
* [6] [Purple WiFi मार्केटिंग और एनालिटिक्स प्लेटफॉर्म](/guest-wifi-marketing-analytics-platform)

---

## तकनीकी ब्रीफिंग सुनें

कस्टम Captive Portals के लिए तकनीकी सीमाओं और कार्यान्वयन रणनीतियों पर चर्चा करते हुए एक सीनियर सॉल्यूशंस आर्किटेक्ट को सुनें:

मुख्य परिभाषाएं

Captive Portal

A web page that is displayed to newly connected users of a Wi-Fi network before they are granted broader access to network resources, typically used for authentication, payment, or displaying terms of service.

IT teams deploy captive portals at the gateway level to control guest access, capture user data, and enforce legal compliance.

Captive Network Assistant (CNA)

A highly restricted, sandboxed mini-browser spawned automatically by operating systems (such as Apple iOS and macOS) upon detecting a captive network redirect, designed solely to facilitate portal authentication.

CNA webviews enforce strict limitations, including blocking external CDNs, persistent cookies, and local storage, which frequently break standard web designs.

Walled Garden

A restricted list of IP addresses, subnets, or domain names that an unauthenticated guest user is permitted to access through the gateway before completing the captive portal login process.

Developers must ensure that any external resource (such as social login APIs or payment gateways) is whitelisted in the walled garden to prevent the login flow from stalling.

Base64 Encoding

A binary-to-text encoding scheme that represents binary data (such as images) as an ASCII string, allowing assets to be embedded directly within HTML or CSS documents.

Utilizing Base64 encoding for logos and icons eliminates external HTTP requests, ensuring assets render perfectly within offline CNA environments.

RADIUS (Remote Authentication Dial-In User Service)

A networking protocol that provides centralized Authentication, Authorization, and Accounting (AAA) management for users who connect and use a network service.

The captive portal server communicates with a RADIUS server to authorize the guest's MAC address at the network gateway once authentication criteria are met.

System Font Stack

A CSS font-family declaration that prioritizes pre-installed operating system fonts (such as San Francisco on iOS, Segoe UI on Windows, and Roboto on Android) over external web fonts.

Implementing a system font stack ensures immediate typography rendering without triggering blocked external HTTP requests to services like Google Fonts.

Canary URL

A dedicated, unencrypted HTTP URL maintained by operating system vendors (e.g., captive.apple.com) to test whether a device has unrestricted internet connectivity.

The OS background network manager checks this URL to detect the presence of a captive portal and trigger the CNA webview popup.

Passpoint (Hotspot 2.0)

An industry standard developed by the Wi-Fi Alliance that enables mobile devices to automatically discover and securely authenticate with Wi-Fi hotspots, bypassing manual captive portal logins.

Enterprises utilize Passpoint alongside platforms like Purple to transition guests from friction-heavy splash pages to seamless, cellular-like secure roaming experiences.

हल किए गए उदाहरण

A luxury 250-room hotel chain [Hospitality](/industries/hospitality) wants to implement a custom guest WiFi login page that perfectly matches their premium brand guidelines. Their creative agency designed a splash page utilizing custom brand typography (hosted on Adobe Fonts), multiple high-resolution background images (hosted on a public AWS S3 bucket), and a multi-step animated JavaScript wizard. When deployed, iOS guests connect to the SSID, but the portal pops up as a blank white screen, and users are unable to authenticate.

To resolve the blank screen and broken branding, we must restructure the portal's frontend architecture to comply with the Apple CNA sandbox constraints:

  1. Typography Remediation: Since Adobe Fonts requires an external HTTP request that is blocked by the CNA, we replace the custom font call with a native, premium system font stack (font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;). This ensures instant rendering without external network calls.
  2. Asset Optimization: The background images on AWS S3 are blocked because S3 is not in the gateway's walled garden. We compress the primary brand logo, convert it to a lightweight SVG, and encode it directly in the HTML as a Base64 Data URI. For the background, we replace the heavy images with a clean, responsive CSS gradient using the hotel's brand colors, significantly reducing page weight.
  3. JavaScript Simplification: The multi-step animated wizard relies on external jQuery and GSAP libraries. We strip out these external dependencies and refactor the form into a single-page, single-column HTML structure. Form validation is rewritten in lightweight, vanilla JavaScript.
  4. Authentication Handshake: The form submission is modified from an AJAX-based submission to a native HTML <form action="/submit" method="POST"> to trigger a full-page redirect, allowing the iOS Websheet to execute its canary check and display the 'Done' button.
परीक्षक की टिप्पणी: This scenario represents the classic conflict between high-end creative design and the rigid security constraints of captive webviews. Creative agencies often treat the captive portal as a standard desktop website. However, because the device is in a pre-authenticated state, the network blocks all external traffic. By inlining CSS, system-stacking fonts, Base64-encoding assets, and utilizing native form submissions, we preserve the premium brand aesthetic while achieving 100% operational reliability on iOS and Android devices.

A national retail chain [Retail](/industries/retail) with 450 stores wants to capture guest emails via WiFi splash pages to fuel their CRM. They require guests to opt-in to marketing newsletters. The initial design has a pre-checked 'I agree to receive marketing emails' checkbox. Furthermore, the portal is hosted on a single local server in their headquarters. During peak hours (Saturday afternoon), guests across the country experience severe delays, and many are unable to load the login page, leading to a massive drop in data capture rates.

We must address both the compliance violation and the infrastructure bottleneck:

  1. Compliance Remediation: Under GDPR and CCPA, pre-checked consent boxes are illegal. We modify the HTML to make the marketing consent checkbox unchecked by default (<input type="checkbox" id="marketing_consent">). We also add a separate, mandatory checkbox for the Terms of Service to decouple legal agreement from marketing opt-in.
  2. Infrastructure Scaling: Hosting a national captive portal on a single centralized server creates a single point of failure and a massive latency bottleneck. We migrate the portal frontend to a highly available, globally distributed Content Delivery Network (CDN) with edge-caching.
  3. RADIUS Integration: We configure the local store access points to point to a cloud-native RADIUS cluster with active-active redundancy, ensuring that authentication requests are processed locally at the edge with sub-50ms latency, even during peak Saturday traffic.
  4. Purple Migration: To eliminate this entire engineering overhead, the retailer migrates to Purple. Purple's built-in GDPR consent tooling automatically manages compliant opt-ins, and their globally distributed cloud infrastructure handles millions of daily authentications with 99.99% uptime, completely resolving the scaling bottleneck.
परीक्षक की टिप्पणी: Pre-checked consent checkboxes represent a severe compliance risk that can lead to massive regulatory fines. Decoupling marketing consent from the Terms of Service is a technical and legal best practice. On the infrastructure side, centralized hosting of captive portals is an anti-pattern. A nationwide retail footprint requires a decentralized, edge-cached frontend combined with a cloud-native RADIUS backend. Migrating to a managed platform like Purple eliminates this architectural complexity, allowing the retailer to focus on marketing campaigns rather than database scaling.

अभ्यास प्रश्न

Q1. An IT team at a major international airport [Transport](/industries/transport) deploys a custom-coded captive portal. They notice that while Android users connect seamlessly, a significant portion of iOS users experience an issue where they authenticate successfully but cannot browse the web. On closer inspection, the iOS devices show they are connected to the SSID, but the top-right button on the captive popup still says 'Cancel' instead of 'Done'. What is the root cause of this issue, and how should the developer fix it?

संकेत: Analyze how the Apple CNA helper detects that a network has transitioned from captive to authenticated, and what browser action is required to trigger this check.

मॉडल उत्तर देखें

The root cause is that the portal's success page is updating the UI dynamically via JavaScript (AJAX/SPA routing) rather than performing a full-page HTTP navigation. The Apple iOS Captive Network Assistant (CNA) mini-browser only re-runs its background connectivity check (the canary request to captive.apple.com) when a full-page URL redirect or navigation occurs. If the developer submits the login form via AJAX and simply displays a 'Success' message in the DOM, the CNA remains unaware that the network has been unlocked. Consequently, the top-right button remains as 'Cancel'. If the user clicks 'Cancel' to exit, the OS assumes the login failed and disconnects from the WiFi network.

Solution: The developer must modify the authentication success handler to force a full-page redirect. This can be achieved by submitting the login form natively via a standard HTML <form action="/submit" method="POST"> or by executing window.location.href = '/success_landing_page' in JavaScript once the API returns a successful authentication response. This triggers the required full-page load, forcing the CNA helper to re-evaluate the network state, verify that the canary URL is now reachable, and change the top-right button to 'Done'.

Q2. A stadium operations team [Events] wants to launch a guest WiFi network that captures marketing opt-ins. The compliance officer insists that the portal must be 100% GDPR-compliant. The development team presents a mockup where the login form has a pre-checked box saying 'I agree to the Terms of Service and consent to receive marketing newsletters'. Why is this design non-compliant, and how should the HTML/CSS and form structure be refactored to satisfy GDPR while maintaining a high conversion rate?

संकेत: Consider GDPR's strict requirements regarding explicit consent, the decoupling of marketing opt-ins from terms of service, and the physical visibility of legal text on mobile screens.

मॉडल उत्तर देखें

The proposed design violates GDPR on two major fronts: first, pre-checked checkboxes do not constitute valid consent, which must be freely given, specific, informed, and unambiguous. Second, bundling marketing consent with the agreement to the Terms of Service is non-compliant; a user cannot be forced to accept marketing emails as a condition of using the WiFi service.

Refactoring Strategy:

  1. Decouple Consent: Split the checkbox into two separate checkboxes. Checkbox A is mandatory and covers the Terms of Service and Privacy Policy. Checkbox B is optional and covers marketing newsletter opt-in.
  2. Set to Unchecked: Ensure both checkboxes are unchecked by default in the HTML (checked attribute omitted).
  3. CSS Visibility: Since over 90% of users are on mobile, place the checkboxes directly above the 'Connect' button so they are visible 'above the fold' without scrolling. Use a system font stack and set the label font size to 14px with a line-height of 1.4 for readability.
  4. Terms Scrollbox: To prevent the legal text from pushing the form elements off the screen, place the detailed Terms of Service in a scrollable container with a fixed height (max-height: 100px; overflow-y: auto; background-color: #F5F1ED; border: 1px solid #D1D5DB; border-radius: 6px;) that can be toggled open or closed via a text link. This maintains a clean, high-converting layout while ensuring absolute legal compliance.

Q3. A retail chain [Retail](/industries/retail) is deploying a custom-coded splash page across 100 stores. The designer used Google Fonts (Montserrat) and linked to a CDN-hosted Bootstrap stylesheet in the HTML head. During testing on a corporate network, the page renders beautifully. However, when deployed on a test store AP with a captive network configuration, the page renders with unstyled Times New Roman text, broken alignment, and missing icons. Why does this happen, and how must the assets be refactored?

संकेत: Analyze the state of the network connection before a user is authenticated, and determine how the browser handles external HTTP requests to domains outside the walled garden.

मॉडल उत्तर देखें

This failure occurs because the device is in an unauthenticated, captive state when the splash page is loaded. In this state, the wireless gateway blocks all outbound internet traffic, allowing requests only to domains explicitly whitelisted in the gateway's Walled Garden. Because the CDN domains for Bootstrap (cdn.jsdelivr.net) and Google Fonts (fonts.googleapis.com) are not whitelisted, the browser's requests to fetch the stylesheet and font files fail silently. Consequently, the browser falls back to its default rendering engine, resulting in unstyled HTML (Times New Roman text) and broken layouts.

Refactoring Strategy:

  1. Inline CSS: Remove the external Bootstrap stylesheet link. Copy the necessary CSS grid/flexbox rules directly into a <style> block in the HTML <head>. This ensures that all layout instructions are delivered in the initial single-page payload.
  2. Implement System Font Stack: Remove the Google Fonts @import or <link> call. Replace it with a native system font stack in the CSS (font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;). This forces the device to use high-quality fonts already pre-installed on the operating system, eliminating the external network dependency entirely.
  3. Base64 Encode Icons/Logos: If the layout relies on external images or icon libraries (like FontAwesome), convert these icons into SVG format and embed them inline within the HTML or as Base64 Data URIs in the CSS. This guarantees that the page is 100% self-contained and renders perfectly even with zero internet connectivity.

इस श्रृंखला में आगे पढ़ें

अपने व्यवसाय के लिए WiFi हॉटस्पॉट कैसे सेट अप करें

यह आधिकारिक गाइड IT लीडर्स, नेटवर्क आर्किटेक्ट्स और वेन्यू ऑपरेशंस डायरेक्टर्स को सुरक्षित, कंप्लायंट और व्यवसाय बढ़ाने वाले गेस्ट WiFi हॉटस्पॉट डिप्लॉय करने के लिए एक व्यावहारिक, वेंडर-न्यूट्रल ब्लूप्रिंट प्रदान करती है। यह महत्वपूर्ण आर्किटेक्चर निर्णयों को कवर करती है—VLAN सेगमेंटेशन और Captive Portal कॉन्फ़िगरेशन से लेकर GDPR अनुपालन और ट्रैफ़िक शेपिंग तक—और प्रदर्शित करती है कि Purple के Guest WiFi और एनालिटिक्स क्षमताओं का उपयोग करके नेटवर्क बुनियादी ढाँचे को लागत केंद्र से राजस्व-संचालित एनालिटिक्स प्लेटफ़ॉर्म में कैसे बदला जाए।

गाइड पढ़ें →

Purple बनाम Cisco Spaces (DNA Spaces): किसे कब चुनें

यह तकनीकी संदर्भ गाइड एंटरप्राइज Captive Portal और अतिथि WiFi तैनाती के लिए Purple और Cisco Spaces (पूर्व में DNA Spaces) की एक व्यापक तुलना प्रदान करती है। यह IT नेताओं को सूचित बुनियादी ढांचा निर्णय लेने में मदद करने के लिए आर्किटेक्चरल अंतर, मार्केटिंग ऑटोमेशन की गहराई और हार्डवेयर विक्रेता लॉक-इन के महत्वपूर्ण प्रश्न का मूल्यांकन करती है।

गाइड पढ़ें →

Purple बनाम GlobalReach Technology: कैरियर-ग्रेड WiFi की तुलना

यह गाइड Captive Portal क्षमताओं, WBA OpenRoaming तत्परता, कैरियर ऑफ़लोड आर्किटेक्चर और व्यावसायिक मॉडलों में Purple और GlobalReach Technology की एक आधिकारिक तकनीकी तुलना प्रदान करती है। यह होटल, रिटेल चेन, स्टेडियम और नगर पालिकाओं के IT प्रबंधकों, नेटवर्क आर्किटेक्ट्स और CTO के लिए लिखी गई है, जिन्हें इस तिमाही में प्लेटफ़ॉर्म का निर्णय लेने की आवश्यकता है। मुख्य निष्कर्ष यह है कि जबकि GlobalReach गहरे MNO कैरियर ऑफ़लोड और मानक लेखकत्व में अग्रणी है, Purple एक हार्डवेयर-एग्नोस्टिक ओवरले और वास्तव में मुफ़्त OpenRoaming Identity Provider टियर के साथ बाज़ार में क्रांति लाता है, जिससे कैरियर-ग्रेड WiFi बिना किसी अग्रिम सॉफ़्टवेयर लाइसेंसिंग लागत के किसी भी वेन्यू के लिए सुलभ हो जाता है।

गाइड पढ़ें →