Benutzerdefiniertes CSS-Stylesheet in Captive Portal integrieren

Einleitung

In diesem Lab lernen Sie, wie Sie eine benutzerdefinierte Cascading Style Sheets (CSS)-Datei in die index.html-Datei Ihres Captive Portals integrieren. Während eine einfache HTML-Seite funktional ist, verleiht das Anwenden benutzerdefinierter Stile ihr ein professionelleres und überzeugenderes Aussehen. Sie erstellen eine style.css-Datei, fügen ihr Styling-Regeln hinzu und verknüpfen sie dann mit Ihrem HTML-Dokument, um das Erscheinungsbild Ihrer Anmeldeseite zu verändern.

Öffnen Sie das Verzeichnis Ihres benutzerdefinierten Portals

In diesem Schritt navigieren Sie zu dem Verzeichnis, das Ihre benutzerdefinierten Portaldateien enthält. Alle Ihre Arbeiten, einschließlich der Erstellung neuer Dateien und der Bearbeitung vorhandener Dateien, werden innerhalb dieses Verzeichnisses durchgeführt.

Verwenden Sie zuerst den Befehl cd (change directory), um in das Verzeichnis custom_portal zu wechseln, das sich in Ihrem Projektordner befindet.

cd ~/project/custom_portal

Als Nächstes verwenden Sie den Befehl ls -l, um den Inhalt des Verzeichnisses aufzulisten. Dies bestätigt, dass Sie sich am richtigen Ort befinden, und zeigt die Datei index.html an, mit der wir arbeiten werden.

ls -l

Sie sollten die folgende Ausgabe sehen, die die Anwesenheit Ihrer index.html-Datei anzeigt:

total 4
-rw-r--r-- 1 labex labex 483 Dec 01 12:00 index.html

Erstellen einer 'style.css'-Datei mit CSS-Regeln

In diesem Schritt erstellen Sie eine CSS-Datei, um die visuellen Stile für Ihre Anmeldeseite zu definieren. CSS ermöglicht es Ihnen, das Layout, die Farben, die Schriftarten und das allgemeine Erscheinungsbild Ihrer HTML-Elemente zu steuern.

Wir erstellen eine Datei namens style.css mit dem Texteditor nano.

nano style.css

Sobald der nano-Editor geöffnet ist, kopieren Sie den folgenden CSS-Code und fügen Sie ihn in die Datei ein. Dieser Code zielt auf verschiedene HTML-Elemente ab, um ein sauberes, modernes Design für das Anmeldeformular zu erstellen.

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;
}

Nachdem Sie den Code eingefügt haben, speichern Sie die Datei und beenden Sie nano, indem Sie Strg+X drücken, gefolgt von Y und dann Enter.

Verknüpfen Sie das Stylesheet in Ihrer 'index.html'-Datei

In diesem Schritt verknüpfen Sie die neu erstellte style.css-Datei mit Ihrer index.html-Datei. Das bloße Erstellen eines Stylesheets reicht nicht aus; Sie müssen dem HTML-Dokument mitteilen, dass es dieses verwenden soll. Dies geschieht durch Hinzufügen eines <link>-Tags innerhalb des <head>-Abschnitts Ihres HTML.

Öffnen Sie die Datei index.html mit dem nano-Editor.

nano index.html

Navigieren Sie zum <head>-Abschnitt der Datei. Fügen Sie die folgende Zeile direkt vor dem schließenden </head>-Tag hinzu:

<link rel="stylesheet" href="style.css" />

Ihre index.html-Datei sollte nun wie folgt aussehen:

<!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>

Drücken Sie Strg+X, Y und Enter, um die Änderungen zu speichern und den Editor zu verlassen. Nun ist Ihre HTML-Seite mit Ihrem Stylesheet verknüpft, und jeder Browser, der die Seite rendert, wird die CSS-Regeln anwenden.

Starten Sie den Angriff mit Ihrem benutzerdefinierten Portal

In diesem Schritt sehen Sie Ihre gestylte Captive-Portal-Seite in der Vorschau. Anstatt einen vollständigen Netzwerkangriff zu starten, verwenden wir einen einfachen Python-Webserver, um die Dateien lokal zu hosten. So können Sie genau sehen, wie die Seite für einen Benutzer aussehen wird.

Stellen Sie sicher, dass Sie sich immer noch im Verzeichnis ~/project/custom_portal befinden. Führen Sie den folgenden Befehl aus, um einen Webserver auf Port 8000 zu starten.

python3 -m http.server 8000

Dieser Befehl weist Python an, sein integriertes Modul http.server auszuführen, das die Dateien aus dem aktuellen Verzeichnis (custom_portal) bereitstellt. Der Server ist auf Ihrem lokalen Rechner unter Port 8000 erreichbar.

Das Terminal zeigt eine Meldung an, die darauf hinweist, dass der Server läuft:

Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

Der Server ist nun aktiv. Lassen Sie dieses Terminal laufen und fahren Sie mit dem nächsten Schritt fort, um die Seite anzuzeigen.

Überprüfen Sie, ob die benutzerdefinierten Stile auf der Anmeldeseite angewendet werden

In diesem letzten Schritt überprüfen Sie, ob Ihre CSS-Stile korrekt angewendet werden, indem Sie die Anmeldeseite in einem Webbrowser anzeigen.

Auf der rechten Seite der Laborumgebung sehen Sie eine Desktop-Oberfläche. Klicken Sie auf das Symbol Web Browser, um es zu öffnen.
Geben Sie in die Adressleiste des Browsers die folgende URL ein und drücken Sie Enter:
```
http://127.0.0.1:8000
```

Sie sollten nun Ihre benutzerdefinierte Anmeldeseite sehen. Anstelle einer einfachen, ungestylten Seite sollte sie einen hellgrauen Hintergrund, ein zentriertes weißes Anmeldefeld mit Schatten, gestylte Eingabefelder und einen blauen Anmeldebutton haben. Dies bestätigt, dass Ihre style.css-Datei erfolgreich verknüpft und angewendet wurde.

Nachdem Sie das Erscheinungsbild überprüft haben, kehren Sie zum Terminal zurück, in dem der Python-Server läuft, und drücken Sie Strg+C, um ihn zu stoppen.

Zusammenfassung

In diesem Lab haben Sie ein grundlegendes Captive Portal erfolgreich durch die Integration eines benutzerdefinierten CSS-Stylesheets verbessert. Sie haben gelernt, wie Sie eine separate .css-Datei zur Verwaltung von Stilen erstellen, CSS-Regeln schreiben, um bestimmte HTML-Elemente anzusprechen, und das Stylesheet mithilfe des <link>-Tags mit einem HTML-Dokument verknüpfen. Durch die Vorschau Ihrer Arbeit mit einem lokalen Webserver konnten Sie die unmittelbare Auswirkung Ihres Stylings sehen und eine einfache Seite in ein visuell ansprechendes und überzeugenderes Anmeldeformular verwandeln. Diese Fähigkeit ist grundlegend für die Webentwicklung und entscheidend für die Erstellung effektiver benutzerdefinierter Captive Portals.

Benutzerdefiniertes CSS-Stylesheet in das Captive Portal integrieren