CODEWITHSUNDEEP
iosmobile-safaricaptivenetwork
Tom
Tom

Reputation: 2873

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

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:

What I want is:

or

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?

Upvotes: 8

Views: 12870

Answers (5)

Ian Marcinkowski
Ian Marcinkowski

Reputation: 404

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

Upvotes: 4

Wilkin Ho
Wilkin Ho

Reputation: 178

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

Upvotes: 3

Johann Combrink
Johann Combrink

Reputation: 703

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

Upvotes: 2

Tony
Tony

Reputation: 593

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.

Upvotes: 1

3pic
3pic

Reputation: 1219

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 ?

Upvotes: 5

Related Questions