Introduction
Dans ce laboratoire, vous apprendrez comment intégrer un fichier Cascading Style Sheets (CSS) personnalisé dans le fichier index.html de votre portail captif. Bien qu'une page HTML de base soit fonctionnelle, l'application de styles personnalisés la rend plus professionnelle et convaincante. Vous allez créer un fichier style.css, y ajouter des règles de style, puis le lier à votre document HTML pour transformer l'apparence de votre page de connexion.
Ouvrir le répertoire de votre portail personnalisé
Dans cette étape, vous allez naviguer vers le répertoire qui contient vos fichiers de portail personnalisés. Tout votre travail, y compris la création de nouveaux fichiers et la modification de fichiers existants, sera effectué à l'intérieur de ce répertoire.
Tout d'abord, utilisez la commande cd (change directory) pour vous déplacer dans le répertoire custom_portal situé dans votre dossier de projet.
cd ~/project/custom_portal
Ensuite, utilisez la commande ls -l pour lister le contenu du répertoire. Cela confirmera que vous êtes au bon endroit et affichera le fichier index.html avec lequel nous allons travailler.
ls -l
Vous devriez voir la sortie suivante, indiquant la présence de votre fichier index.html :
total 4
-rw-r--r-- 1 labex labex 483 Dec 01 12:00 index.html
Créer un fichier 'style.css' avec des règles CSS
Dans cette étape, vous allez créer un fichier CSS pour définir les styles visuels de votre page de connexion. Le CSS vous permet de contrôler la mise en page, les couleurs, les polices et l'apparence générale de vos éléments HTML.
Nous allons créer un fichier nommé style.css en utilisant l'éditeur de texte nano.
nano style.css
Une fois que l'éditeur nano s'ouvre, copiez et collez le code CSS suivant dans le fichier. Ce code cible divers éléments HTML pour créer un design de formulaire de connexion propre et moderne.
body {
font-family: Arial, sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.login-container {
background-color: #ffffff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
width: 320px;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
color: #333;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 6px;
box-sizing: border-box;
}
button {
width: 100%;
padding: 12px;
background-color: #007bff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
}
button:hover {
background-color: #0056b3;
}
Après avoir collé le code, enregistrez le fichier et quittez nano en appuyant sur Ctrl+X, puis sur Y, et enfin sur Entrée.
Lier la feuille de style dans votre fichier 'index.html'
Dans cette étape, vous allez lier le fichier style.css nouvellement créé à votre fichier index.html. Il ne suffit pas de créer une feuille de style ; vous devez indiquer au document HTML de l'utiliser. Ceci est fait en ajoutant une balise <link> à l'intérieur de la section <head> de votre HTML.
Ouvrez le fichier index.html avec l'éditeur nano.
nano index.html
Naviguez jusqu'à la section <head> du fichier. Ajoutez la ligne suivante juste avant la balise de fermeture </head> :
<link rel="stylesheet" href="style.css" />
Votre fichier index.html devrait maintenant ressembler à ceci :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>WiFi Login</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="login-container">
<h1>Please Log In to Access the Internet</h1>
<form action="#" method="post">
<p>Username:</p>
<input
type="text"
name="username"
placeholder="Enter your username"
required
/>
<p>Password:</p>
<input
type="password"
name="password"
placeholder="Enter your password"
required
/>
<br /><br />
<button type="submit">Log In</button>
</form>
</div>
</body>
</html>
Appuyez sur Ctrl+X, Y, puis Entrée pour enregistrer les modifications et quitter l'éditeur. Votre page HTML est maintenant liée à votre feuille de style, et tout navigateur affichant la page appliquera les règles CSS.
Lancer l'attaque avec votre portail personnalisé
Dans cette étape, vous allez prévisualiser votre page de portail captif stylisée. Au lieu de lancer une attaque réseau complète, nous utiliserons un simple serveur web Python pour héberger les fichiers localement. Cela vous permettra de voir exactement à quoi ressemblera la page pour un utilisateur.
Assurez-vous d'être toujours dans le répertoire ~/project/custom_portal. Exécutez la commande suivante pour démarrer un serveur web sur le port 8000.
python3 -m http.server 8000
Cette commande demande à Python d'exécuter son module intégré http.server, qui sert les fichiers du répertoire courant (custom_portal). Le serveur sera accessible sur votre machine locale sur le port 8000.
Le terminal affichera un message indiquant que le serveur est en cours d'exécution :
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
Le serveur est maintenant actif. Laissez ce terminal ouvert et passez à l'étape suivante pour visualiser la page.
Vérifier que les styles personnalisés sont appliqués sur la page de connexion
Dans cette dernière étape, vous allez vérifier que vos styles CSS sont correctement appliqués en visualisant la page de connexion dans un navigateur web.
Sur le côté droit de l'environnement de laboratoire, vous verrez une interface de bureau. Cliquez sur l'icône Navigateur Web pour l'ouvrir.
Dans la barre d'adresse du navigateur, tapez l'URL suivante et appuyez sur
Entrée:http://127.0.0.1:8000
Vous devriez maintenant voir votre page de connexion personnalisée. Au lieu d'une page simple et sans style, elle devrait avoir un fond gris clair, une boîte de connexion blanche centrée avec une ombre, des champs de saisie stylisés et un bouton de connexion bleu. Cela confirme que votre fichier style.css a été correctement lié et appliqué.
Une fois que vous avez vérifié l'apparence, retournez dans le terminal où le serveur Python est en cours d'exécution et appuyez sur Ctrl+C pour l'arrêter.
Résumé
Dans ce laboratoire, vous avez réussi à améliorer un portail captif de base en intégrant une feuille de style CSS personnalisée. Vous avez appris à créer un fichier .css séparé pour gérer les styles, à écrire des règles CSS pour cibler des éléments HTML spécifiques et à lier la feuille de style à un document HTML à l'aide de la balise <link>. En prévisualisant votre travail avec un serveur web local, vous avez pu constater l'impact immédiat de votre stylisation, transformant une page simple en un formulaire de connexion visuellement attrayant et plus convaincant. Cette compétence est fondamentale pour le développement web et cruciale pour la création de portails captifs personnalisés efficaces.