0

How Can I Hide The Passcode so someone can't just inspect the element to view the password?

function onSubmit() {
    if (document.getElementById('password').value == '12345678') {
      window.location.href = 'http://google.co.in'; 
    }else{ 
      alert('Please check your passcode and try again');
    }
}
<fieldset>
 <form class="hero-form" action="#">
    <div class="row-fluid">
      <label>Enter your passcode</label>
      <input type="password" name="password" maxlength="8" class="span7" id="password" placeholder="e.g. 12345678" required/>
    </div>
 </form>
</fieldset>
<button class="btn btn-info btn-large span5" id="joe_btn" onclick="onSubmit()">Enter</button>
Minal Chauhan
  • 6,025
  • 8
  • 21
  • 41
Frank Ford
  • 73
  • 7
  • 10
    The password should be stored on the server, not on client side! – Saadi Toumi Fouad Dec 30 '20 at 05:33
  • Do you mean a password a user has entered on that very form? Once submitted to the server, that password should be hashed and made irrecoverable, so there should be absolutely no risk it'd end up back in a rendered form. – tadman Dec 30 '20 at 05:34
  • 2
    Without a server-side component, you can't lock this down. It's just a JavaScript lock someone could remove by deleting code or re-defining that function. – tadman Dec 30 '20 at 05:34
  • 1
    Hi @FrankFord. Welcome to SO. The way you are trying to "hide" password on the client side is not secure. You can add various forms of encryption/decryption in your code, mangle your source to make it harder to inspect in your code. However, it's not worth the effort and you are better of checking for the password in a server. – Abrar Hossain Dec 30 '20 at 05:36
  • Thank you for the input! Do you have an example of a different way to password protect a page that is more secure? Basically, I just want to add a part to my webpage where the user types a password and if it's correct it brings you to a new page. – Frank Ford Dec 30 '20 at 05:37
  • please check this once https://stackoverflow.com/questions/30013032/prevent-user-to-find-password-through-firebug-chrome-dev-tools – shweta ramani Dec 30 '20 at 05:39
  • @shweta ramani Thank you for your help, I will check this out :) – Frank Ford Dec 30 '20 at 05:41
  • If your code ultimately redirects to a new page, all it takes for a casual user is pressing F12 and see where your redirect URL is then copy-paste it into the address bar. This also means the user can just share that direct URL with anyone else, skipping the password input entirely. – Martheen Dec 30 '20 at 05:50

1 Answers1

3

There is no foolproof way to prevent people from accessing the password via inspect element (or other means). To fix this, generally, you will want to store the password on a server. And when the user submits the form, the password the user entered should be sent to the server, which should then check to see if the two passwords are equal.

This is a general overview of how it is usually done. It does not mention details like encryption or hashing. That being said, encryption and hashing are very important for password security, and should not be overlooked.

EKW
  • 2,059
  • 14
  • 24