如何实现web内容的客户端密码保护

How to implement client side password protection for web content?

本文关键字：客户端 密码保护 web 何实现 实现      更新时间：2023-09-26

我正在尝试使用JavaScript对页面的一个部分进行密码保护。用户将看到一个简单的输入字段和提交按钮，在输入正确的密码后，用户将获得对"隐藏"内容的访问权限。

目前，无法查看"隐藏"的内容，因为每次重新加载页面时（表单提交时），它都会被隐藏。

是的，我知道这不被认为是"密码保护"，因为密码是在js中找到的，但这对这个特定的场景来说并不重要。

这是我的代码，谢谢你的帮助。

<script language="JavaScript">
    window.onload=function(){
    var e = document.getElementById("hiddenContent");
    e.style.display = 'none';   
};
function showPass(form){
    var pass = form.pwd.value;
    if(pass == "password") {
        e.style.display = 'block';      
    }
}
</script>
<form action="#" onsubmit="showPass(form);return false">
Please Enter The Password: <input type="password" name="pwd" /> 
<input type="submit" value="Log In" />
</form>
<div id="hiddenContent">Here is the Hidden content...</div>

提交正确的密码后，我如何才能查看隐藏的内容？

有两个问题会使代码崩溃并停止执行。这会导致您的表单提交，而这是您不希望的，并且您的其他代码也不会运行。

onsubmit="showPass（表单）应为onsubmit="showPass（this）

e不是全局变量。它被匿名函数包围，在外部不可见。这意味着showPass（）不知道e指的是什么。更改此

var e=document.getElementById（"hiddenContent"）

至

e=document.getElementById（"hiddenContent"）（无var关键字）

或者（也许更好）在showPass（）中获得对该元素的唯一引用

我一直在寻找一个完全相同的解决方案。

我发现一篇帖子用散列解释了这一点

如何在客户端javascript应用程序中隐藏凭据

首先你需要使用散列函数来加密你的密码，在我的情况下，密码是"；SecretLog1"；

hashCode = s =>
  s.split("").reduce((a, b) => {
    a = (a << 5) - a + b.charCodeAt(0);
    return a & a;
  }, 0);
const password = "SecretLog1";
alert(hashCode(password));
<h1>HASH YOUR PASSWORD</h1>
<p></p>
</body>
</html>

然后你必须得到从散列返回的值，在密码"的情况下；SecretLog1"；是"；541756509"；并将其粘贴到哈希解码函数中，然后您就可以创建一个漂亮的页面

window.onload = function() {
  document.getElementById('secretCheckbox').style.display = 'none';
};

function unlock(){
  document.getElementById('factoryAlert').style.display = '';
}
function hideUnlock(){
  document.getElementById('factoryAlert').style.display = 'none';
}

function checkFactoryPwd() {
  var pass = document.getElementById('factoryPwd').value;
  const hashCode = s =>
    s.split('').reduce((a, b) => {
      a = (a << 5) - a + b.charCodeAt(0);
      return a & a;
    }, 0);
  if (hashCode(pass) == '541756509') {
    alert('Welcome!');
    document.getElementById('secretCheckbox').style.display = '';
  } else {
    alert('Sorry, wrong password!');
  }
  return false;
}
<!--    Bootstrap --> 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class='alert alert-info' role='alert' id='factoryAlert' style="text-align: center;">
              Now you showed this alert, press X to hide it or fill it with right password
              <br>
              <form onsubmit="return checkFactoryPwd()" action='/' method='post' >
              <input type='password' name='factoryPwd' id='factoryPwd'>
              <button type='button' class='btn btn-success btn-sm' onclick='checkFactoryPwd()'>OK</button>
              <button type='button' class='btn btn-danger btn-sm ' onclick='hideUnlock()'>&nbsp;X&nbsp;</button>
            </div>
            
<div class="form-check" id="secretCheckbox">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Secret checkbox
  </label>
  <div style='text-align: center;'><input class='btn btn-primary btn-sm' id='submitCur' type='submit' value='Submit'></div>
 </form>            
</div>

相关文章：