Question

在我们公司更大，更好的网站升级到90年代后期之后，我被要求实施一些东西。

我们需要在我们的网站上显示促销信息。不过，我们是批发商。我们不希望任何人看到它们。我们可以接受竞争将始终找到一种潜入并获得定价的方式 - 这是一个已知的事实和常见做法 - 但我们不希望任何随机的人能够点击链接并查看它。对于这个临时实例，安全性不是一个巨大的问题。

这是一个简单的网站，没有任何形式的用户控制/登录/没有数据库。简单的HTML。在我来这里之前建造的。

所以，这就是我想知道该怎么做：

我希望用户点击“促销”导航按钮。它会将它们带到，例如，promotion.htm链接。

但是在这个页面加载时，我希望他们看到的第一件事就是覆盖整个屏幕及其背后的所有内容。我希望有一个简单的“密码”输入字段。输入正确的密码并点击下面的按钮后，此拦截密码div将消失并授予他们对内容的直观访问权。

我已经尝试用谷歌搜索这个，但我只遇到了关于如何验证密码长度/强度的链接，或者有关正确数据库和登录的密码链接。

我不需要大量代码;如果我有一个推动或一些初步想法，我想我可以自己弄清楚。

这里可能出现的问题是人们只能使用Chrome的检查程序并隐藏阻止的div /元素。同样，我们知道密码会出来，竞争最终会看到一些密码，但我们不希望任何知道如何在浏览器中隐藏div的人看到它。

有没有人知道如何制作这个（简单？）文本字段检查器？

Answer 1

这是我对它的看法，使用一些非常不安全的密码与.fromCharCode()混淆

（提示：密码是“hunter2”）

var arr = [104, 117, 110, 116, 101, 114, 50];
var str = '';
arr.forEach(function (val, index) {
  str += String.fromCharCode(val);
})

$('#form').on('submit', function (event) {
  event.preventDefault();
  
  var pw = $(this).find('#password');
  
  if ( pw.val() == str ) {
    $('#fortknox').hide();
  }
  
})

#fortknox {
  position: fixed;
  top:0;left:0;
  width:100%;
  height:100%;
  background-color:black;
  z-index: 100;
}

#fortknox form {
  display:block;
  margin: 50px auto;
  text-align: center;
}

#content {
  position:relative;
  width:100vw;
  height:100vh;
  background-image:url('http://i.imgur.com/8Jne9VO.png');
  background-repeat:no-repeat;
  background-size: 100% 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="fortknox">
  <form id="form">
    <input type="password" id="password" placeholder="password">
    <button type="submit">Enter</button>
  </form>
</div>
  
<div id="content"></div>

简单的jQuery密码屏幕？

1 个答案: