Question

我正在尝试使用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>

如何在正确提交密码后查看隐藏内容？

Answer 1

有两个问题会导致代码崩溃并停止执行。这会导致您的表单提交，您不需要，也不会运行任何其他代码。

onsubmit =“showPass（form）应为 onsubmit =”showPass（this）

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

var e = document.getElementById（“hiddenContent”）;

到

e = document.getElementById（“hiddenContent”）; （没有var关键字）

或（可能更好）在showPass（）

中获得对该元素的唯一引用

Answer 2

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

我找到了一篇用散列解释这一点的帖子

How to hide credentials in client-side javascript application

首先你需要使用哈希函数来加密你的密码，在我的例子中密码是“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>

如何为Web内容实现客户端密码保护？

2 个答案: