Captive Wifi Popup: Click a link to open Safari

MacOS

Question or issue on macOS:

We are having an issue on our network with iOS devices (ipads, iphones etc): After connecting to the SSID, the iphone / ipad immediately opens the Captive Network Assistant (CNA) – it is like a scaled-down browser without navigation buttons etc – that displays our welcome page (ready for the user to authenticate his MAC in the network to give him internet). This CNA is a functin of iOS, and happens automatically.

I was looking around on this forum how to make the user open his Safari browser by clicking a link (while in the CNA), thus sending him away from the CNA and into Safari (which is where I would prefer him to be).

I searched phrases such as: “How to set a link to open in safari”, but I get results about people using phonegap to do such a thing…
One user talked about using
window.open(myURL, ‘_system’)
but I don’t know if that is solving my issue.

Basically my plan is to:
– Have my Welcome Page (the page displayed after the user connected to my SSID) detect what type of browser the user’s device has. My Welcome Page is hosted at a site which is in the Walled Garden of my controller, so every device can see that Welcome page (whether they have full internet access or not).
– If the user has an iOS device, the CNA browser opens automatically. My controller detects the device has a CNA browser and loads a simple page with the message (like): “click here to start to navigate”
– During the next few seconds (while the user is digesting the message), my controller gives the user’s MAC full internet access
– When the user clicks that link in the CNA browser, the CNA closes and then opens Safari, and also forces Safari to open the destination Welcome Page (where I want my user to be, depending on the antenna to which he connected).

I really hope that all makes sense…

I found this link about the CNA browser in this forum:
Bypasses Apple Captive Network Assistant Login in iOS 7

But it talks having the user open Safari right from the start (disabling the CNA function), “hoping” that the user opens Safari (rather then going directly to one of his apps). I prefer that the user has to “click to continue”, which makes Safari open and he sees my Welcome Page.

How to solve this problem?

Solution no. 1:

EDIT : this solution doesn’t work after iOS 10.3. Not sure if that’s a feature or a bug : https://forums.developer.apple.com/thread/75498

EDIT2 : Apparently it works again on iOS 11


There is a simple way to do that, if you have control over the captive portal server.

When connecting to a wifi network, iOS devices send a GET request to a bunch of predefined urls (http://www.apple.com/library/test/success.html, …) , to see if there is Internet connectivity (wispr requests). The iOS device expects the answer <HTML><HEAD><TITLE>Success</TITLE></HEAD><BODY>Success</BODY></HTML>. If the request succeeds, but the answer is different (for example your captive portal page), it triggers the CNA to open.

At this stage, the CNA thinks you are not connected and will show a Cancel button at the top. Every link will open inside the CNA and not in a Safari window, no matter what you do. The CNA is done so that you can get your user through the log-in process. In order to see if the log-in process is done and connection is finally established, the iOS device will now and then send another wispr request. This happens every 40 seconds, or whenever an HTTP request is emitted (navigation within the CNA).

When your server finally answers Success to a wispr request, the CNA will mark as connected, the button at the top will change into Done. At this stage, any link to an external url will close the CNA and open in Safari 🙂

So to summarize, you can achieve what you want with the following connection steps :

  1. server answers initial wispr request with your CNA page.
  2. the page opens in CNA. In that page, have some JavaScript that immediately triggers navigation within the CNA, for example : <script>window.location.reload(true)</script> this will trigger the iOS device to immediately send another wispr request
  3. server answers this second wispr request with <HTML><HEAD><TITLE>Success</TITLE></HEAD><BODY>Success</BODY></HTML>, this will trigger the CNA to mark as connected
  4. have your CNA page to show a link to an external url

Solution no. 2:

Extracted from an answer by Ryan at How can I open an external link in Safari not the app’s UIWebView?

To have a specific link switch to Safari, simply add target=”_system” to the link, as in

Link Text

Or to catch all links in your javascript that have target=”_blank”, include jQuery and pass them to window.open with the ‘_system’ param. This will work on both iOS and Android.

$(document).on('click', 'a[target="_blank"]', function(ev) {
  var url;

  ev.preventDefault();
  url = $(this).attr('href');
  window.open(url, '_system');
});

Solution no. 3:

Javascript does NOT work fully in CNA, it is disabled for security reason.
target=”_system” is a safari feature, not a CNA one.
==> briefly, _system fails in CNA.

Hope this helps!