Wie schütze ich eine Seite mit einem Passwort, das nur HTML, CSS und JavaScript verwendet?-js-Tutorial-php.cn

Wie schütze ich eine Seite mit einem Passwort, das nur HTML, CSS und JavaScript verwendet?

WBOY

Freigeben： 2023-09-07 14:33:02

nach vorne

935 Leute haben es durchsucht

如何仅使用 HTML、CSS 和 JavaScript 来密码保护页面？

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!