iOS: Open a Welcome Page in Safari, not CNA (post-authentication)

Question

I'm running a captive portal, target audience are mobile devices only. I would like to open a "welcome page" to the user after he authenticated in the CNA. This page should open in (mobile) Safari, not in the CNA, because it contains interactive elements that don't work in the limited CNA environment.

I've seen this working at other portals before, but I don't know how they do it and can't figure out how even after long research.

What I have is:

• captive portal / captive network is working
• users connecting get the splash page shown in popup (CNA)
• since I don't need authentication, they are connected at this point, and the top-right button shows "OK"

What I want is:

• a link or button on this splash page that opens a Safari window

or

• some JavaScript, redirect, whatever else that opens a Safari window when the CNA is closed.

Nothing I found so far (e.g. using target="_system" was mentioned) works. Does anyone know how these hotel and other portals that somehow manage to do it, do it?

Answer 1

You cannot make the OS (OS X or iOS) to open Safari. When iOSX detects a walled garden (captive portal), it launches CNA. That is.

CNA ≠ Safari. Let's try <a href="..." target="_blank">test</a> Any try to open another CNA window fails.

Let's try <a href="..." target="_system">test</a> Any try to open Safari fails (_system works only for Safari, Mail & Safari webviews in iOS applications)

To me: answer = IMPOSSIBLE .

But I wonder: Is there anyone who has already seen this phenomenon. Have you ever Seen a safari page automatically launched after having been presented the CNA window ?

Answer 2

Another bug is introduced in iOS 11 such that CNA will not close itself after opening the link in Safari.

Refer to the discussion here: https://forums.developer.apple.com/thread/75498#221482

Answer 3

The secret is sending an HTML response to the iOS client with a BODY element that contains only the word "Success". The iOS CNA expects something like http://www.apple.com/library/test/success.html to be returned.

For example: Success Success

You can redirect the iOS CNA window using javascript:

<script type="text/javascript">
    window.location.href = "yourdomain.com/welcome.html";
</script>

Additionally, you can hide the "Success" message by changing the body text to white with a STYLE attribute on the BODY tag. The iOS CNA application doesn't seem to be looking for a page that exactly conforms to Apple's success.html. It seems to be looking for a BODY element that contains the word "Success".

My use case

The captive portal I am using requires that the user agree to the terms of service. The mobile device will detect the captive portal with their CNA (Captive Network Assistant) and open the OS-level browser window with the captive portal login page.

When the user clicks on "Agree & Connect" a form is POSTed which performs the authorization of their MAC on the captive portal appliance.

The webserver returns my own success.html with the white text and the javascript redirect to either the URL requested by the user (for those cases where the user is manually browsing to a website using their mobile browser) or the branded welcome page.

TL;DR:

1. User connects to the captive portal

2. Mobile device detects the captive portal

3. Mobile CNA loads the captive portal login page

4. User clicks "Agree & Connect", issuing a POST request to my webserver which performs authentication

5. HTTP 302 redirect is returned from the POST URL pointing to a success.html on my webserver which contains a javscript redirect after the BODY element This triggers the iOS CNA web view to detect that it has successfully connected to the network

6. CNA login window is redirected to my branded welcome.html

7. CNA webview window automatically closes in Android or the user can click "Done" on the iOS CNA webview window to close it

Answer 4

I managed to get my iOS 9.1 Device to redirect in a mikrotik environment by doing the following:

change the alogin.html page (your connected page) to have a title of connected and a body of connected like so :

<html>
<head>
   <title>Success</title>
</head>
<body>
    Success

<script>
     function addElement(absoluteurl)
     {
        var anchor = document.createElement('a');
        anchor.href = absoluteurl;
        window.document.body.insertBefore(anchor, window.document.body.firstChild);

        setTimeout(function(){ anchor.click(); }, 1000);

        // document.body.appendChild(elemDiv); // appends last of that element
    }
    addElement("http://www.google.com");
</script>

</body>

on newer devices 10.3.1 this seems to no longer work, currently testing variations of it. https://forums.developer.apple.com/thread/75498