I created a simple password system using HTML, CSS, and JS to quiz myself on my variable, localstorage, and if and else statement knowledge. I don't know how to make the create/login password input fields required though. Any other improvement suggestions/feedback would be appreciated!
<!DOCTYPE html>
<html>
<head>
<style>
#loginPassword {
display: none;
}
</style>
</head>
<body>
<form id="createPassword">
<input type="password" id="createdPassword" required>
<button type="password" onclick="storepassword()">Submit</button>
</form>
<form id="loginPassword">
<input type="password" id="loggedinPassword" required>
<button type="submit" onclick="checkpassword()">Login</button>
</form>
<div id="content" style="display:none">
<h1>this is super secret content</h1>
</div>
<script>
//convenient variable
var createdPassword = document.getElementById('createdPassword').value;
function storepassword() {
//creates password
event.preventDefault();
//variables for convenience
var createdPassword = document.getElementById('createdPassword').value;
localStorage.setItem('createdPasswordstorage', createdPassword);
document.getElementById('loginPassword').style.display = "block";
document.getElementById('createPassword').style.display = "none";
}
function checkpassword() {
//convenient variables
let storedPassword = localStorage.getItem('createdPasswordstorage');
let loginPassword = document.getElementById('loggedinPassword').value;
let content = document.getElementById('content');
event.preventDefault();
//checks if password is correct
if (loginPassword == storedPassword) {
alert('Logged in');
content.style.display = "block";
//add functions for displaying content, etc. here:
} else {
alert('Incorrect Password');
}
}
function loadforms() {
//checks if password exists in storage
let storedPassword = localStorage.getItem('createdPasswordstorage');
//if it doesn't exist, create password form displayed
if (storedPassword === null) {
document.getElementById('loginPassword').style.display = "none";
document.getElementById('createPassword').style.display = "block";
} else {
//if it exists, login for displayed
document.getElementById('loginPassword').style.display = "block";
document.getElementById('createPassword').style.display = "none";
}
}
loadforms();
</script>
</body>
</html>
-
1\$\begingroup\$ @ggorlen probably a glitch when copying here, I just fixed it \$\endgroup\$HTMLNerd_1– HTMLNerd_12023年11月04日 12:40:34 +00:00Commented Nov 4, 2023 at 12:40
1 Answer 1
lint
With no indent, your code starts to become illegible. Find a pretty-printer and use it. The machine doesn't care. But people do.
security
// checks if password is correct
if (loginPassword == storedPassword) {
This is the essence of your stated goal to create a password system. It is needlessly weak.
The CTF
goal of Mallory is to trick the system into reporting boolean true,
and you've reduced that to the simple goal of retrieving (or guessing)
storedPassword. Much better that you never store a password at all,
preferring to store the hash of a password.
Npm
would be happy to obtain (PHC-winner) argon2 for you.
Ask it to produce a hash,
and store that rather than the cleartext password.
Sometimes users will choose same password on another website as on your site. Now if that website is compromised, revealed knowledge of that site's credentials will have much less impact on your site. Conversely if your list of hashes suffers a compromise, that has minimal impact on other websites frequented by your users.
-
\$\begingroup\$ My code was indented properly, but it got messed up when copy pasting into here \$\endgroup\$HTMLNerd_1– HTMLNerd_12023年11月03日 22:11:45 +00:00Commented Nov 3, 2023 at 22:11
-
\$\begingroup\$ Sha3 is not suitable or password storage, with or without a salt. Use BCrypt or Argon2. \$\endgroup\$user229044– user2290442023年11月04日 15:36:20 +00:00Commented Nov 4, 2023 at 15:36
-
\$\begingroup\$ @user229044, granted, thank you. Anything's an improvement over storing in the clear. But we really want a slow PBKDF to frustrate brute forcing a dictionary. I will update the text. \$\endgroup\$J_H– J_H2023年11月04日 16:27:27 +00:00Commented Nov 4, 2023 at 16:27