8

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?

Tom
  • 2,688
  • 3
  • 29
  • 53
  • have you managed to get it working as you want ? @Tom – 3pic Jul 13 '15 at 12:34
  • Possible duplicate of [Captive Wifi Popup: Click a link to open Safari](http://stackoverflow.com/questions/23281552/captive-wifi-popup-click-a-link-to-open-safari) – sebpiq Nov 18 '16 at 15:59

5 Answers5

5

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 ?

3pic
  • 1,188
  • 8
  • 26
  • 2
    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. – Tom Jul 21 '15 at 08:10
  • @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 ? – 3pic Jul 21 '15 at 11:26
  • did you find a solution for this ? – M to the K Feb 18 '16 at 10:52
  • I think it works pre iOS 10.3 BUT you can open custom app schemes other than Safari. Can someone confirm? – Gregory Magarshak Jan 03 '18 at 16:20
4

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

For example:

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

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 simply 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 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 redirects 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 web view window automatically closes in Android or the user can click "Done" on the iOS CNA web view window to close it
Jeremy Caney
  • 7,102
  • 69
  • 48
  • 77
Ian Marcinkowski
  • 408
  • 1
  • 3
  • 11
  • 3
    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. – Tom May 15 '15 at 13:28
  • Missed this in my previous comment. You could take a look at the question [Click a link to open in Safari](https://stackoverflow.com/questions/23281552/click-a-link-to-open-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. – Ian Marcinkowski May 19 '15 at 17:28
  • This doesnt work. 'Click a link to open in Safari' does work Only in Safari & Mail. not in CNA. – 3pic Jul 08 '15 at 13:49
  • 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. – Ian Marcinkowski Jul 09 '15 at 14:29
  • @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 ? – 3pic Jul 13 '15 at 12:39
  • 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. – Ian Marcinkowski Jul 14 '15 at 14:51
  • @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 (SuccessSuccess) but nothing happens. – 3pic Jul 17 '15 at 12:27
  • @IanMarcinkowski : another question to you: have you used wispr blocs for your solution ? If I dont, I get no popup displayed. Strange. – 3pic Jul 17 '15 at 12:28
  • @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 tag. Perhaps the CNA expects a valid HTML page? – Ian Marcinkowski Jul 27 '15 at 19:47
  • @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. – Ian Marcinkowski Jul 27 '15 at 19:49
3

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

Wilkin Ho
  • 178
  • 1
  • 1
  • 7
2

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

Johann Combrink
  • 692
  • 8
  • 18
1

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.

Tony
  • 593
  • 2
  • 6
  • 16