Responsive Captive Portal for Aruba Wi-Fi – updated for iOS CNA

Some time back (over 2 years in fact, wow time flies) I wrote a post on how to upload a more mobile-friendly Captive Portal page to your Aruba controller for mobile devices connecting to your Wi-Fi.

That’s served us well at the college and definitely made the system more user friendly. However over the summer I’ve been doing some re-configuration on the network and during testing found an issue that’s cropped up somewhere along the way of iOS updates that’s forced me to make some changes.

for those just wanting the TL;DR version check out my OneDrive Public folder for the new page download 😉

Something has changed…

Whilst working on a redirect page for SSL inspection I noticed that the Captive Portal login screen wasn’t appearing on the iPad I was using for testing running the latest iOS 10.3.

To be certain it wasn’t a global issue I tried on my other devices; an HTC 10 Android device as my main phone, Nokia Lumia as work phone and a ThinkPad running Windows 10 but all of those behaved as expected with the portal loading up automatically.

Wanting to get the setup working correctly across all platforms I started researching and via the Aruba forums tried a few suggestions:

• upgrade to latest ArubaOS release (handy as we needed to do this anyway)
• ensure Captive Portal is set to display over HTTPS
• ensure the HTTPS certificate is signed by a Trusted Root CA (good practice anyway)
• ensure the device can’t reach the Apple CNA domains, which appear to not be officially documented anywhere but people have made their own lists although it’s difficult to know how much the domains change.

Back to basics

However none of this made any difference, CNA still refused to appear. I raised a ticket with our support partner and their initial suggestion was to create a new CP profile and on it revert back to the default Aruba login page.

Trying this out restored CNA functionality, which was a step forward as it then pointed to something in the portal page template that iOS didn’t like.

After getting this breakthrough I must’ve made a different variation on my forum searches as it then returned a very useful thread that seemed to be discussing an almost identical issue

Ref: http://community.arubanetworks.com/t5/Wireless-Access/AOS-6-5-2-0-Captive-Portal-auto-prompt-not-working-on-iOS/td-p/295405

Imagine my surprise to notice that the user “mom” aka Matthias was using my original blog post and responsive portal too (!) He had meticulously tested the page, stripping elements out until finding that removing some chunks restored the CNA behaviour.

So it seems Apple have got more fussy (some may say stringent?) about what content is allowed in a login page and something was being blocked.

Looking back at my original page it does have a fair bit of Javascript embedded in it for the smooth page scrolling effect, custom error handling etc. which would prove difficult to strip down and retain the same functionality. With that in mind I made the decision to try and rebuild a similar-looking page with a simpler boilerplate design.

Skeleton delivers

I soon found exactly what I needed in the form of the Skeleton framework. A beautifully simple yet effective template that’s still responsive across all devices but only 200 lines of CSS!

Ref: http://getskeleton.com/

It didn’t take long to put the Aruba login form into the page template and tweak some of the core styling to match what I had before by reusing certain CSS elements from the old page. I also used a few elements from the demo page http://getskeleton.com/examples/landing/

A few features from the old login page were left out to keep the new template at its efficient best:

• custom error message handling
  removed the JS code for this entirely, page reloads if login fails but without the customisable error messages
• clickable sections in the header
  users would need to scroll the page manually instead to read the information and AUP sections
• auto smooth scrolling
  auto scroll to middle of the page no longer required in light of point 2 above
• embedded fonts
  removed any references to additional fonts just in case they were being blocked

I uploaded the new page and its supporting files (only 2 small CSS files plus a new logo image) and tried to log in again… success!

With more time I could go back and slowly start adding elements back to see exactly what causes issues, my betting would be on the Javascript but while everything is working I don’t want to mess with it now. If anyone reading fancies a challenge and finds the offending element let me know in the comments 🙂

And here’s a sample of the new pages in action, along with our new colour schemes so we can easily tell which network people are trying to connect to. I’m using two separate auth sources for the different networks (internal DB for one and NPS-based RADIUS for the other) hence why   we keep separate SSIDs and CP Profiles for them both.

After login the controller now redirects to a Welcome page, which also uses the Skeleton framework with some additional styling. I can be a bit more flexible here as the portal is already open:

   

Here’s one I made earlier

For those who just want to get up and running asap I’ve provided a packaged up sample version of the page in my OneDrive Public folder named SAMPLE CNA Skeleton.zip

It’s tested working on the following:

• iOS 10.3.1
• Android Nougat
• Windows Mobile 8.1
• Windows 10 Creators Update

To change the page colours find and replace the following:

• page background #27AE60
• button hover colour #EF8A17

Styling tips:

• to make your own matching colour schemes check out something like https://coolors.co
• edit logo.png for one of your choosing
• change the text (I recommend using Notepad++ for editing) and away you go!
• any other CSS tweaks will either be in the page body CSS or via the (neatly labelled) skeleton.css