Bagaimana untuk melindungi kata laluan halaman menggunakan HTML, CSS dan JavaScript sahaja?-tutorial js-php.cn

Bagaimana untuk melindungi kata laluan halaman menggunakan HTML, CSS dan JavaScript sahaja?

WBOY

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

ke hadapan

964 orang telah melayarinya

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

Perlindungan kata laluan ialah langkah keselamatan penting untuk halaman web yang mengandungi maklumat sensitif atau memerlukan pengesahan untuk mengakses. Jika anda ingin menambah keselamatan tambahan pada halaman web anda tanpa menggunakan bahasa sebelah pelayan, anda boleh melindungi kata laluan halaman anda menggunakan HTML, CSS dan JavaScript.

Artikel ini akan menunjukkan kepada anda cara membuat borang ringkas yang memerlukan pengguna memasukkan kata laluan untuk melihat kandungan halaman yang dilindungi. Mari lihat contoh berikut untuk lebih memahami menggunakan kata laluan untuk melindungi halaman.

Contoh

Dalam contoh di bawah, kami menjalankan skrip dan melindungi halaman web jika pengguna cuba mengakses halaman web, mereka akan diminta untuk kata laluan mereka.

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

Salin selepas log masuk

Apabila skrip dilaksanakan, ia akan menghasilkan output yang menunjukkan amaran meminta kata laluan. Apabila pengguna memadankan kata laluan ("tutorial"), mesej dipaparkan jika tidak, kata laluan yang salah dipaparkan pada halaman web.

Contoh

Pertimbangkan contoh berikut di mana kami mencipta medan input untuk kata laluan yang dimasukkan untuk melindungi halaman web serta klik butang.

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

Salin selepas log masuk

Apabila anda menjalankan skrip di atas, tetingkap output akan muncul menunjukkan medan input untuk memasukkan kata laluan dan butang klik pada halaman web. Jika pengguna sepadan dengan kata laluan (12345), ia akan membuka borang yang terdiri daripada teks jika tidak, kata laluan yang salah akan dipaparkan.

Contoh

Laksanakan contoh di bawah di mana kami menjalankan skrip untuk melindungi halaman web daripada memaparkan kandungannya selepas melaksanakan skrip.

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

Salin selepas log masuk

Apabila skrip dilaksanakan, ia akan menghasilkan output yang menunjukkan medan input untuk memasukkan kata laluan dan kotak semak togol pada halaman web. Apabila pengguna memadankan kata laluan (54) dan menogol kotak semak, kandungan dalam halaman web dipaparkan.

Atas ialah kandungan terperinci Bagaimana untuk melindungi kata laluan halaman menggunakan HTML, CSS dan JavaScript sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!