Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb Site Password | JavaScript Basics

    I am 13 and had just started to learn JavaScript, and from what I know I made a compact webpage site password verification. There is no was to get past it, (At least easily) through the chrome tools or Inspect Element etc.

    Code:
                   <script type="text/javascript">
    		
    			var password = prompt( "Please enter the site password:" );
    			if ( password == "sitepassword101" ) {
    				confirm( "Welcome to my website!" );
    			} else {
    				for ( var repromt = 0; repromt < 1; repromt++ ) {
    					var retryPassword = prompt( "Would you like to retry the password? (yes/no)" );
    					if ( retryPassword == "yes" ) {
    						window.location.reload();
    					} else if ( retryPassword == "no" ) {
    						window.location="http://www.google.com";
    					} else {
                                                    confirm("Please do not spam the verifycation panel!");
                                                    window.location.reload();
                                            }
    				}
    			}
    		
    		</script>

  • #2
    New Coder
    Join Date
    Aug 2014
    Posts
    20
    Thanks
    0
    Thanked 1 Time in 1 Post
    Client site verification is a terrible idea and extremely easy to get bypassed.
    For one the user can just disable the javascript on their browser. Another issue is the verification code is also visible to the user (even if minified) and so is the password inside it.

  • #3
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes I know, but it is a cool project just for beginners.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    the way to make it safe is by renaming your protected page sitepassword101.html and navigating to the string to user provides +".html". that way, nobody can see the password because it's not stored, and if your folder doesn't list it's contents, it would be verry difficult to guess that the url sitepassword101.html does something but that sitepassword100.html does nothing.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #5
    New Coder
    Join Date
    Aug 2014
    Posts
    20
    Thanks
    0
    Thanked 1 Time in 1 Post
    And this way every user must have the same password or you have to make a copy of the same html page for each user.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,298
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    You could obfuscate the password like this so that people who know nothing about Javascript would not be able to see it, but for those who do it is easily broken.

    Code:
    var password = "70617373776f7264313031";
    var result = "";
    for(var i=0;i<password.length;i=i+2){result=result+'%'+password.substr(i,2);}
    var pwd = unescape(result);
    alert (pwd);  // password101
    However, as rndme says, the best way is to redirect to whatever page +.html the user inputs - validly password101.html.

    But my understand is that the OP is looking for a method (as a learning exercise) for the user to input the password repeatedly until the correct password is entered:-

    Code:
    <script type = "text/javascript">
    
    for (var i=1; i<2; i++) {
    var ans = prompt ("Enter password here", "");
    if(ans != "password101") {   // you could obfuscate the password as above
    alert ("Incorrect password - try again!");
    i -- ;
    }
    else {alert ("Password is correct!")}
    }
    
    </script>
    Be aware that prompts, alerts and confirm boxes are considered obsolete, and not to be used in real code. Don't waste your time learning long-obsolete stuff. Use DOM methods to obtain information from and display messages to your users.

    The weakness of having the same password for all users is that one user will pass it on to another (unauthorised) user.


    "This is the worst disaster in California since I was elected." - California Governor Pat Brown, discussing a local flood
    Last edited by Philip M; 08-24-2014 at 04:55 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,298
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    If you wanted a more modern approach to this using DOM methods:-

    Code:
    
    ENTER THE PASSWORD <input type = "text"  id = "pwd" size = 12 maxlength = 12 onblur = "checkpwd(this)"><span id = "message" style="font-family:arial;color:red;font-size:12px;"></span>
    
    <script type = "text/javascript">
    
    function checkpwd(which) {
    var m  = document.getElementById("message");
    m.innerHTML = "";  // clear the field
    var p = which.value;
    if (p != "password101") {  // you can obfuscate the password
    m.innerHTML = " &nbsp Invalid password - please re-enter";
    which.value = "";
    which.focus();
    }
    else {
    m.innerHTML = "&nbsp Password correct!";
    setTimeout(clear,2500);  // clear the message after 2.5 seconds
    // do stuff
    }
    }
    
    function clear() {
    document.getElementById("message").innerHTML = "";
    }
    
    </script>
    Last edited by Philip M; 08-25-2014 at 12:50 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •