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

时间:2018-07-30 02:59:45

标签: javascript html webpage password-protection

我正在尝试用密码保护我的网页(例如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()

2 个答案:

答案 0 :(得分:1)

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

您似乎认为,如果passwordProtect()将用户未能提供正确的密码而发送到google页面,则loadornot()函数将终止而不执行最后一行。事实并非如此。请记住,javascript具有异步执行模型,这意味着loadornot()在执行对passwordProtect()的调用时不会停止执行。在您的用户输入密码时,将cookie值设置为“是”的行已经执行。

如果您希望函数A根据在函数B中做出的决定的结果有条件地执行,则必须告诉函数A等待,直到函数B告诉您已经做出了决定。做到这一点的主要方法是回调和承诺。

有关如何执行回调的简单示例,请参阅w3schools.com上的this example。有关使用回调和Promise自定义确认框的更多示例,请参见this

答案 1 :(得分:0)

我通过从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()