How to build a captive web portal with any router and a Raspberry Pi

 

This article explains how to build a captive web portal with a Raspberry PI, redirecting all clients to a web site on the internet.

This article is based on excellent port of Brennan available on this link (https://brennanhm.ca/knowledgebase/2016/10/raspberry-pi-access-point-and-captive-portal-without-internet/)

Situation

The following schema gives an overall view of the situation

We want that the clients connecting to our Hotspot are automatically redirected to a web site on the internet and nowhere else.

Creating the hotspot

Any router should do the job (here an Asus RT-AC66U)

Configure the router with the following parameters

  • Choose the SSID you want (here ASUS)
  • Configure the authentication to "Open"

Then, disable DHCP

Then configure the firewall to allow only connection to the captive web site

Configure the Raspberry Pi

Install required packages

Add the two following packages

 

apt-get install dnsmasq nginx

  • dnsmasq : provides DHCP and DNS services for small networks
  • nginx : a web server that will redirect our clients to the captive web site

Configure a static IP address for the Raspberry Pi

 

sudo nano /etc/dhcpcd.conf

Modify the file to fit your needs

 

# Example static IP configuration:
interface eth0
static ip_address=192.168.1.30/24
#static ip6_address=fd51:42f8:caae:d92e::ff/64
static routers=192.168.1.1
static domain_name_servers=8.8.8.8

Configure the hosts file

 

sudo nano /etc/hosts

Modify the file like bellow

 

127.0.0.1 localhost
::1 localhost ip6-localhost ip6-loopback
ff02::1 ip6-allnodes
ff02::2 ip6-allrouters

127.0.1.1 raspberrypi
192.168.1.30 hotspot.localnet
212.147.79.236 gremaudpi.emf-informatique.ch

Notice the two entries at the end of the file

  • 192.168.1.30     is for the local host
  • 212.147.79.236     is the ip address of the captive web portal

Dnsmasq will upload this file on startup and answer DNS queries consequently

Configure dnsmasq

 

sudo nano /etc/dnsmasq.conf

Modify the file like bellow

 

# Never forward addresses in the non-routed address spaces.
bogus-priv
# Add other name servers here, with domain specs if they are for non-public d$
server=/localnet/192.168.1.30
# Add local-only domains here, queries in these domains are answered from /etc$
local=/localnet/
# Make all host names resolve to the Raspberry Pi's IP address
address=/#/192.168.1.30
# Specify the interface that will listen for DHCP and DNS requests
interface=eth0
# Set the domain for dnsmasq
domain=localnet
# Specify the range of IP addresses the DHCP server will lease out to devices, $
dhcp-range=192.168.1.100,192.168.1.254,1h
# Specify the default route
dhcp-option=3,192.168.1.1
# Specify the DNS server address
dhcp-option=6,192.168.1.30
# Set the DHCP server to authoritative mode.

Restart dnsmasq

 

sudo service dnsmasq restart

This configuration turns the Raspberry Pi into a fake DNS server.

It will resolve all DNS queries to it's own IP address, except the captive web portal (gremaudpi.emf-informatique.ch) that will be resolved to the IP address found in the hosts file (212.147.79.236 )

We can test the result by connecting to our hotspot with a laptop and launch following commands

We can see that www.google.com resolves to the Raspberry Pi address (192.168.1.30)

And our captive web site address (gremaudpi.emf-informatique.ch) resolves to the real address (212.147.79.236)

Configure nginx

Now we want to configure nginx to redirect all http and https requests to our captive web site.

 

sudo nano /etc/nginx/sites-available/default

 

# Default server configuration
#
server {
listen 80 default_server;
listen [::]:80 default_server;
listen 443 ssl;
listen [::]:443;

root /var/www/html;

# Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html;

server_name _;

return 302 $scheme://gremaudpi.emf-informatique.ch/hotspot/;
}

Remark: Notice the last line that redirect all traffic to the captive web portal by answering with an HTTP status code "302 Found" which is a common way of performing a url redirection. This will allow most smartphones (android and iphones) to spontaneously open a popup to our web site when connecting to the hostspot.

Restart nginx

 

sudo service nginx restart

Configure the web site

The web site I will use is very basic and made of three pages

http://gremaudpi.emf-informatique.ch/hotspot/index.html

This page will serve following code

 

<html>
<body>
<br>
<h1>Welcome to my hotspot</h1>
<h1>&nbsp</h1>
<h1><a href="./page1/">Page1</a></h1>
<h1>&nbsp</h1>
<h1><a href="./page2/">Page2</a></h1>
</body>
</html>

http://gremaudpi.emf-informatique.ch/hotspot/page1/index.html

This page will serve following code

 

<html>
<body>
<h1>&nbsp</h1>
<h1>Welcome to Page 1</h1>
<h1>&nbsp</h1>
<h1><a href="../">Home</a></h1>
</body>
</html>

Test the result

Now, when you connect to the WIFI hotspot with a smartphone,

you should be automatically redirected to the captive web site.

Where you can navigate as you want

The only problem is that I could never get reed of the annoying header "Connexion Wi-Fi requise" nor of the footer "QUITTER"

If you have an idea how to do this, please post a comment.

That's all folks…

Leave a Reply

Close Menu