我正在尝试使用 JavaScript 对网页进行密码保护

Question

我正在尝试使用密码保护我的网页（例如http://mywebsite.com/），以便用户每次会话只需输入一次密码。这是我的问题：如果用户取消了初始提示或输入了错误的密码，然后被重定向到 google.com，然后重新访问 http://mywebsite.com/ 它允许他们在不提示输入密码的情况下查看页面。

不知道我做错了什么来解决这个小问题的后门。

这是我尝试实现的 JavaScript：

//Protect only once per browser session? (0=no, 1=yes)
       //Specifying 0 will cause protect to load every time page is loaded
   var once_per_session=1

   function get_cookie(Name) {
          var search = Name + "="
          var returnvalue = "";
          if (document.cookie.length > 0) {
            offset = document.cookie.indexOf(search)
            if (offset != -1) { // if cookie exists
                offset += search.length
                // set index of beginning of value
                end = document.cookie.indexOf(";", offset);
                // set index of end of cookie value
                if (end == -1)
                     end = document.cookie.length;
                returnvalue=unescape(document.cookie.substring(offset, end))
                }
           }
          return returnvalue;
   }

    function passwordProtect(){
        var password;
        var pass1 = "thePassword";
        password = prompt('Enter password to view page',' ');
        if(password == pass1){
            alert('Correct password, click ok to enter');
            window.location="http://mywebsite.com";
        }
        else {
            window.location="http://google.com";
        }
    }

   function loadornot(){
          if (get_cookie('protect')==''){
          passwordProtect()
          document.cookie="protect=yes"
          }
   }

   if (once_per_session==0)
          passwordProtect()
   else
          loadornot()

Answer 1

如果protect cookie 是空白字符串，您的loadornot() 只会加载passwordProtect()。它还将 cookie 的值设置为“是”。因此，下次您调用它时，cookie 不再为空白，并且永远不会调用 `passwordProtect()'。

您似乎相信，如果 passwordProtect() 将用户发送到 google 页面，原因是未能提供正确的密码，loadornot() 函数将在不执行最后一行的情况下结束。事实并非如此。请记住，javascript 有一个异步执行模型，这意味着loadornot() 在执行对passwordProtect() 的调用时不会停止执行。当您的用户输入密码时，将 cookie 值设置为“yes”的行已经执行。

如果您希望函数 A 根据函数 B 中的决策结果有条件地执行，您必须告诉函数 A 等到函数 B 告诉您已做出决策。执行此操作的主要方法是回调和承诺。

有关如何进行回调的简单示例，请参阅 w3schools.com 的 this example。有关使用回调和承诺自定义确认框的更复杂示例，请参阅this。

Answer 2

我通过从 passwordProtect() 返回一个布尔值，然后在将 cookie 更新为“是”之前检查该布尔值是否为真来解决了这个问题。我知道这是密码保护的基本实现，但所有帮助都很棒。

我之前所做的更改：

   //Protect only once per browser session? (0=no, 1=yes)
   //Specifying 0 will cause protect to load every time page is loaded
    var once_per_session=1
    var bool

    function get_cookie(Name) {
       [see post]
    }

    function passwordProtect(){
        var password;
        var pass1 = "thepassword";
        password = prompt('Enter password to view page',' ');
        if(password === pass1){
            alert('Correct password, click ok to enter');
            window.location="http://example.com";
            return true;
        }
        else {
            window.location="http://google.com";
            return false;
        }
    }

    function loadornot(){
        if (get_cookie('protect')===''){
            bool = passwordProtect();
            if(bool === true)
                document.cookie="protect=yes";
        }
    }

    if (once_per_session===0)
        passwordProtect()
    else
        loadornot()