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?

Solution 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 ?

Solution 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

Solution 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

Solution 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

Solution 5

You need to make sure that the anchor tag is pointing to an absolute URL and not to a relative one. For eg your link should be

<a href="http://yourdomain.com/home.html">Home</a>

It does not break out if the link is

<a href="/home.html">Home</a>

Also please note that, this will work only if internet is available / user is connected when the link is clicked. In iOS CNA the top right button will turn to 'Done' when connected. So essentially clicking on an absolute link when the status of CNA is Done will close CNA and will load the link in Safari.

View more solutions

Comments

[Tom]

Does this open the welcome.html in Safari or in the CNA ? I need it to open in Safari because the function I give in my portal is to allow the user to download images from an image library, and the CNA doesn't allow that.

[Ian Marcinkowski]

Missed this in my previous comment. You could take a look at the question Click a link to open in Safari. I am testing out that solution for our terms and conditions. The purpose of the CNA is to get the user connected to the network, not necessarily for them to interact with the provider of the hotspot. The CNA window even has the Done/Cancel buttons on the top corner that kind of preclude using it to do any real work on a website.

[3pic]

This doesnt work. 'Click a link to open in Safari' does work Only in Safari & Mail. not in CNA.

[Ian Marcinkowski]

Thanks. I did not have a lot of confidence in the other answer I linked to when I made that comment, but was still testing. It did not work in my application either, but I forgot to follow up. Thank you for pointing that out.

[3pic]

@IanMarcinkowski your answer above is a qualified one, to me. It helps understanding mechanisms & processes beyond the curtain. Thanks for that ! But it does not answer the 'open safari' one. BTW is anyone has already see this phenomenon: safari opened from CNA window ?

[Ian Marcinkowski]

From all of the testing I have done, there should be no way to open Safari from the CNA window. The purpose of the CNA is not to interact with websites, but to connect the user to the wireless network.

[3pic]

@IanMarcinkowski : your answer is promising. After deep console studies, disassembling CNA, etc. I find it particularly great cause my portal keeps being captive. I never allow access to www. I tried your solution, presenting the fake Success page. It failed. I wonder how iOS callbacks this Success url to check if www is reachable... I accept Tos, then post-action to success.php, js redir to success.html (<title>Success</title><body>Success</body>) but nothing happens.

[3pic]

@IanMarcinkowski : another question to you: have you used wispr blocs for your solution ? If I dont, I get no popup displayed. Strange.

[Tom]

Update: What I've seen (I checked again today) is not automatic. But when you click a link in the CNA, it opens in Safari. That is perfectly fine with me, but I can't duplicate it.

[3pic]

@Tom : not automatic ? what do you mean ? can you post some screencaptures ? Please would you let me know if you have used Wispr to make your CNA displayed ?

[Ian Marcinkowski]

@3pic Your wireless network never allows the user to connect to the internet? I do not know how this would affect the iOS CNA. My success page includes the <html> tag. Perhaps the CNA expects a valid HTML page?

[Ian Marcinkowski]

@3pic Re: WISPr. I have not tried to use the WISPr XML standard with our captive portal. AFAIK, WISPr is intended for authenticating paid users. My use case only shows our company login page to make the customer aware that they are using our internet service and accept our terms and conditions.

[M to the K]

did you find a solution for this ?

[Johann Combrink]

can this be automated so instead of waiting for the click, click it for the user ?

[Rui F Ribeiro]

10.3 is buggy, I switched to 11 beta.

[Gregory Magarshak]

I think it works pre iOS 10.3 BUT you can open custom app schemes other than Safari. Can someone confirm?