使用 JavaScript 提示符作为小型网站的密码

Posted 2023-02-14

【中文标题】使用 JavaScript 提示符作为小型网站的密码

【英文标题】：Using a JavaScript Prompt as a Password for a Small Website

【发布时间】：2022-01-17 09:58:09

【问题描述】：

这当然不是最安全的方法，但我只有 html 和 javascript，所以这是我能想到的最好的方法。我构建了一些示例代码来展示它应该如何运行，但它不起作用！

密码应该每天更改，让人们更难猜出密码。用户获取密码的方式将是通过谷歌文档发送的 html 文件并手动批准对其的访问。 javascript 将在显示密码的文件上多次混淆。还会有密码查看密码。 我已经把这段代码搞砸了好几天，什么都没有……

window.onload = function() 
  chgDailyImg();
  document.getElementById('answer').innerHTML = imagearray[i]

var passwordInput = prompt("Please enter the password to continue...");
const imagearray = new Array();
imagearray[0] = "9G7DcwnWafg*EtMH";
imagearray[1] = "MDe^5qHTG#P9dHBm";
imagearray[2] = "h%$u@2Nfu8FL9H+R";
imagearray[3] = "X&NB5tYdUs5u@G#z";
imagearray[4] = "k#Rc3LGsCdu4q%qZ";
imagearray[5] = "!$p!Ss5BA%#4zeAa";
imagearray[6] = "qz63!tue3WCUxJ@R";
let i = 0;

function chgDailyImg() 
  let d = new Date();
  i = d.getDay();


if ((passwordInput, imagearray[i]) === true) 
  document.getElementById('hiddenContent').style.visibility = "visible"
  console.log("RIGHT")
 else 
  document.getElementById('hiddenContent').style.visibility = "hidden"
  console.log("WRONG")

<h1 id="hiddenContent" style="visiblity: hidden">Hidden Stuff That Requires Password To See!</h1>

【问题讨论】：

用户不能通过检查元素绕过整个安全性吗？如果用户对开发者控制台有所了解，这整个方案将变得毫无用处。

@burningalcyes 用户在技术上可以绕过它，但我并不担心它，因为我没有直接将这个 javascript 放入 html 文档中，而是我会多次混淆它并源它在 js/access.js 中。

@burningalc html 也会被混淆

【参考方案1】：

您没有检查passwordInput 是否在imagearray 中正确。

检查密码是否在数组中：

使用(imagearray.indexOf(passwordInput) !== -1) 或imagearray.includes(passwordInput)（浏览器支持少一点）

^{See other ways of checking if an element is in an array}

window.onload = function() 
  chgDailyImg();
  document.getElementById('answer').innerHTML = imagearray[i]

var passwordInput = prompt("Please enter the password to continue...").trim();
const imagearray = new Array();
imagearray[0] = "9G7DcwnWafg*EtMH";
imagearray[1] = "MDe^5qHTG#P9dHBm";
imagearray[2] = "h%$u@2Nfu8FL9H+R";
imagearray[3] = "X&NB5tYdUs5u@G#z";
imagearray[4] = "k#Rc3LGsCdu4q%qZ";
imagearray[5] = "!$p!Ss5BA%#4zeAa";
imagearray[6] = "qz63!tue3WCUxJ@R";
let i = 0;

function chgDailyImg() 
  let d = new Date();
  i = d.getDay();


if (imagearray.indexOf(passwordInput) !== -1) 
  document.getElementById('hiddenContent').style.visibility = "visible"
  console.log("RIGHT")
 else 
  document.getElementById('hiddenContent').style.visibility = "hidden"
  console.log("WRONG")

<h1 id="hiddenContent" style="visiblity: hidden">Hidden Stuff That Requires Password To See!</h1>

<div id="answer"></div>

【讨论】：

谢谢，我一定会更多地了解 indexOf 并使用它！

indexOf 的替代品是includes。

【参考方案2】：

在对 indexOf 进行了更多研究后，我确定这不是我需要的。我使用Chris Happy's 代码来创建这个工作代码。

<h1 id="hiddenContent" style="visiblity: ">Hidden Stuff That Requires Password To See!</h1>

<div id="answer"></div>

<script type="text/javascript">
  window.onload = function() 
    chgDailyImg();
    validate();
    document.getElementById('answer').innerHTML = imagearray[b]

  
  var passwordInput = prompt("Please enter the password to continue...");
  const imagearray = new Array();
  imagearray[0] = "9G7DcwnWafg*EtMH";
  imagearray[1] = "MDe^5qHTG#P9dHBm";
  imagearray[2] = "h%$u@2Nfu8FL9H+R";
  imagearray[3] = "X&NB5tYdUs5u@G#z";
  imagearray[4] = "k#Rc3LGsCdu4q%qZ";
  imagearray[5] = "!$p!Ss5BA%#4zeAa";
  imagearray[6] = "qz63!tue3WCUxJ@R";
  let b = 0;

  function chgDailyImg() 
    let d = new Date(); /*** create a date object for use ***/
    b = d.getDay();
  

  function validate() 
    if (passwordInput == imagearray[b]) 
      console.log("RIGHT")
      document.getElementById('hiddenContent').style.visibility = "visible"
     else 
      document.getElementById('hiddenContent').style.visibility = "hidden"
      console.log("WRONG")
    
  

</script>

我对这段代码的理解是当passwordInput等于imagearray[b]（[b]等于0直到chgDailyImg()在页面加载时运行然后[b]等于星期几的数字) 它将显示hiddenContent。在window.onload 时，提示使用function validate() if (passwordInput == imagearray[b]) console.log("RIGHT") 检查提供的密码是否等于imagearray[b]（今天的密码），然后在加载页面时声明函数validate()。

我最初询问的答案比我预期的要简单得多。一个月前才开始学习 JavaScript，当时我提出的问题听起来很难，但现在我知道了提示是如何运作的，我有了更好的理解。