Heim > Artikel > Web-Frontend > Wie schütze ich eine Seite mit einem Passwort, das nur HTML, CSS und JavaScript verwendet?
Wie schütze ich eine Seite mit einem Passwort, das nur HTML, CSS und JavaScript verwendet?
- WBOYnach vorne
- 2023-09-07 14:33:02861Durchsuche
Der Passwortschutz ist eine wichtige Sicherheitsmaßnahme für Webseiten, die vertrauliche Informationen enthalten oder für den Zugriff eine Authentifizierung erfordern. Wenn Sie Ihren Webseiten zusätzliche Sicherheit verleihen möchten, ohne eine serverseitige Sprache zu verwenden, können Sie Ihre Seiten mithilfe von HTML, CSS und JavaScript mit einem Passwort schützen.
In diesem Artikel erfahren Sie, wie Sie ein einfaches Formular erstellen, bei dem Benutzer ein Passwort eingeben müssen, um den Inhalt einer geschützten Seite anzuzeigen. Schauen wir uns das folgende Beispiel an, um die Verwendung eines Passworts zum Schutz einer Seite besser zu verstehen.
Beispiel
Im folgenden Beispiel führen wir ein Skript aus und schützen eine Webseite. Wenn der Benutzer versucht, auf die Webseite zuzugreifen, wird er zur Eingabe seines Passworts aufgefordert.
<!DOCTYPE html>
<html>
<body>
<script>
var password = "tutorial";
(function passcodeprotect() {
var passcode = prompt("Enter PassCode");
while (passcode !== password) {
alert("Incorrect PassCode");
return passcodeprotect();
}
}());
alert('Welcome To The TP..!');
</script>
</body>
</html>
Wenn das Skript ausgeführt wird, generiert es eine Ausgabe mit einer Warnung, in der Sie nach einem Passwort gefragt werden. Wenn der Benutzer mit dem Passwort übereinstimmt („Tutorial“), wird eine Meldung angezeigt. Andernfalls wird auf der Webseite das falsche Passwort angezeigt.
Beispiel
Betrachten Sie das folgende Beispiel, in dem wir ein Eingabefeld für ein Passwort erstellen, das zum Schutz einer Webseite sowie für einen Tastenklick eingegeben wird.
<!DOCTYPE HTML>
<html>
<body>
<center>
<input type="password" placeholder="passcode" id="tutorial">
<button onclick="protectpasscode()">CHECK</button>
<script>
function protectpasscode() {
const result = document.getElementById("tutorial").value;
let passcode = 12345;
let space = '';
if (result == space) {
alert("Type passcode")
} else {
if (result == passcode) {
document.write("<center><h1>TP, The Best E-Learning </h1></center>");
} else {
alert("Incorrect Passcode");
location.reload();
}
}
}
</script>
</center>
</body>
</html>
Wenn Sie das obige Skript ausführen, erscheint ein Ausgabefenster mit dem Eingabefeld zur Eingabe des Passworts und der Klickschaltfläche auf der Webseite. Wenn der Benutzer mit dem Passwort (12345) übereinstimmt, wird ein Formular mit Text geöffnet. Andernfalls wird das falsche Passwort angezeigt.
Beispiel
Führen Sie das folgende Beispiel aus, in dem wir ein Skript ausführen, um eine Webseite vor der Anzeige ihres Inhalts nach der Ausführung des Skripts zu schützen.
<!DOCTYPE html>
<html>
<body style="background-color:#EAFAF1">
Enter Password:
<input type='text' value='' id='input'><br><br>
<input type='checkbox' onclick='protectpasscode()'>Show results
<p id='tutorial' style='display:none; color: black;'>Mahendra Singh Dhoni, also known as MS Dhoni, is an Indian former international
cricketer who was captain of the Indian national cricket team in limited-overs formats
from 2007 to 2017 and in Test cricket from 2008 to 2014. </p>
<script>
function protectpasscode() {
var a = document.getElementById('input');
var b = document.getElementById('tutorial');
if (a.value === '54') {
b.style.display = 'block';
} else {
b.style.display = 'none';
}
}
</script>
</body>
</html>
Wenn das Skript ausgeführt wird, generiert es eine Ausgabe, die das Eingabefeld zur Eingabe des Passworts und das Umschalt-Kontrollkästchen auf der Webseite zeigt. Wenn der Benutzer das Passwort (54) übereinstimmt und das Kontrollkästchen aktiviert, wird der Inhalt der Webseite angezeigt.
Das obige ist der detaillierte Inhalt vonWie schütze ich eine Seite mit einem Passwort, das nur HTML, CSS und JavaScript verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!