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…

This Post Has 7 Comments

  1. Hey There. I found your blog the use of msn. This is an extremely
    smartly written article. I'll be sure to bookmark it and
    come back to learn extra of your useful info.
    Thank you for the post. I will definitely return.

  2. It's going to be finish of mine day, however before end I am reading this great post to increase my knowledge.

  3. Why users still use to read news papers when in this technological world everything
    is presented on web?

  4. Very nice post. I just stumbled upon your weblog and wanted to say
    that I have truly enjoyed surfing around your blog posts.

    In any case I'll be subscribing to your feed and
    I hope you write again very soon!

  5. Fantastic website. A lot of useful info here. I'm sending it to several pals ans also sharing in delicious.

    And naturally, thank you in your effort!

  6. Great blog here! Additionally your site so much up fast!
    What host are you the usage of? Can I am getting your affiliate link on your host?
    I want my website loaded up as quickly as yours
    lol

  7. Thank you a lot for sharing this with all of us you actually
    recognize what you are speaking approximately!
    Bookmarked. Kindly additionally talk over with my
    website =). We could have a link alternate contract among us

Leave a Reply

Close Menu