Skip to content

Instantly share code, notes, and snippets.

@haykam821

haykam821/index.html

Last active May 29, 2018 14:18
Show Gist options
  • Save haykam821/5a52f30240cc88ca38ae97af1c208643 to your computer and use it in GitHub Desktop.
Save haykam821/5a52f30240cc88ca38ae97af1c208643 to your computer and use it in GitHub Desktop.
Download ZIP
Password hashing vs. plaintext example
Raw
index.html
<body>
<h2>Hash it!</h2>
<input type="text" id="input"></input><br />
<span id="output">(type text above)</span>
<h2>Login</h2>
<div id="database"></div><br />
Username: <input type="text" id="usr"></input><br />
Password: <input type="password" id="pass"></input><br /><br />
<span id="loginOutput">Log in first.</span><br /><br />
<button id="login">Login (encrypted)</button>
<button id="logined">Login (plaintext)</button>
<button id="signup">Sign up</button>
</body>
Raw
index.js
const crypto = require('crypto');
const tableify = require('tableify');
document.getElementById("input").addEventListener("input", (event) => {
const hash = crypto.createHash('sha256');
hash.update(event.target.value);
document.getElementById("output").innerHTML = hash.digest('hex');
});
const passwords = {
"test1": {
hash: "bf86075ceab2af34c4bf04695936f6522b383cee6b0d377a410b470499ab5485",
pass: "encryption"
},
"admin": {
hash: "8a798890fe93817163b10b5f7bd2ca4d25d84c52739a645a889c173eee7d9d3d",
pass: "yes"
}
};
function updateUsers() {
document.getElementById("database").innerHTML = tableify(passwords); // tables!
}
updateUsers();
document.getElementById("signup").addEventListener("click", () => {
const hash = crypto.createHash('sha256');
const name = document.getElementById("usr").value;
const password = document.getElementById("pass").value;
hash.update(password);
passwords[name].password = password;
passwords[name].hash = hash.digest('hex');
updateUsers();
});
const login = document.getElementById("login");
document.getElementById("logined").addEventListener("click", () => {
const name = document.getElementById("usr").value;
const password = document.getElementById("pass").value;
document.getElementById("loginOutput").innerHTML = passwords[name].pass === password ? `Logged in successfully as ${name}!` : `The password did not match...`;
});
document.getElementById("login").addEventListener("click", () => {
const name = document.getElementById("usr").value;
const hash = crypto.createHash('sha256');
hash.update(document.getElementById("pass").value);
document.getElementById("loginOutput").innerHTML = passwords[name].hash === hash.digest('hex') ? `Logged in successfully with encryption as ${name}!` : `The password is incorrect or there is not a user with that username.`;
});
Raw
package.json
{
"name": "hashing-vs-plaintext-example",
"version": "1.0.0",
"dependencies": {
"tableify": "0.0.7"
},
"author": "haykam821"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment