3777e4d9bd
* * Improved readability javascript * Added new styling based on bootstrap css (Only some css to make it readable for everyone) * Better responsive support * Some styling bug fixes * removed unnecessary comment Co-authored-by: Joshua Azimullah <j.r.azimullah@student.tudelft.nl>
187 lines
4.8 KiB
HTML
187 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset='UTF-8'/>
|
|
<title>Pwned Password API lookup.</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
|
|
<link rel="stylesheet" href="./essential_bootstrap.css">
|
|
|
|
<style>
|
|
|
|
|
|
html, body {
|
|
background-color:lightblue;
|
|
height:100%;
|
|
width:100%;
|
|
padding:0;
|
|
margin:0;
|
|
}
|
|
|
|
.source {
|
|
position: absolute;
|
|
margin: 15px;
|
|
margin-left: 0px;
|
|
bottom: 0;
|
|
}
|
|
|
|
b {
|
|
color : red;
|
|
}
|
|
|
|
.bodyDiv {
|
|
position: relative;
|
|
border-radius:7px;
|
|
height:300px;
|
|
width:600px;
|
|
min-width:245px;
|
|
margin:80px;
|
|
padding:25px;
|
|
background-color: white;
|
|
}
|
|
|
|
div {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
@media only screen and (max-width : 800px) {
|
|
|
|
#hash {
|
|
font-size:10px;
|
|
}
|
|
|
|
.bodyDiv {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
width: auto;
|
|
margin: 10px;
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="bodyDiv">
|
|
<p>Only the first five characters of the hash of your password get send to <a href="https://haveibeenpwned.com/API/v2#SearchingPwnedPasswordsByRange">haveibeenpwned.com</a></p>
|
|
<form class="form-inline" onsubmit="javascript:runCheck();return false;" >
|
|
<input id="input" class="form-control" type="text" placeholder="Password...">
|
|
<button title="Click to send part of hashed password." class="btn btn-success" type="submit">Check</button>
|
|
</form>
|
|
<div><p id="output"></p></div>
|
|
|
|
<a class="source" href="https://github.com/mikepound/pwned-search">Source code on github</a>
|
|
</div>
|
|
<script>
|
|
|
|
let first = "";
|
|
let last = "";
|
|
let hash = "";
|
|
|
|
function hexString(buffer) {
|
|
// creates an array of 8-bit unsigned integers
|
|
const byteArray = new Uint8Array(buffer);
|
|
// turns that hash into hex
|
|
const hexCodes = [...byteArray].map(value => {
|
|
// each element in array is converted to base 16 string
|
|
const hexCode = value.toString(16);
|
|
// pad beggining with 0 why?
|
|
const paddedHexCode = hexCode.padStart(2, '0');
|
|
// return upper case hex hash
|
|
return paddedHexCode.toUpperCase();
|
|
});
|
|
// return a string not an array
|
|
return hexCodes.join('');
|
|
}
|
|
|
|
async function digestMessage(message) {
|
|
// Returns a newly constructed TextEncoder that will generate a byte stream with utf-8 encoding.
|
|
const encoder = new TextEncoder();
|
|
// Takes a USVString as input, and returns a Uint8Array containing utf-8 encoded text.
|
|
const data = encoder.encode(message);
|
|
|
|
// returns the hash
|
|
// The digest() method of the SubtleCrypto interface generates a digest of the given data.
|
|
// A digest is a short fixed-length value derived from some variable-length input.
|
|
return window.crypto.subtle.digest('SHA-1', data);
|
|
}
|
|
|
|
async function runCheck() {
|
|
|
|
// get references to the dom
|
|
let output = document.getElementById("output");
|
|
let input = document.getElementById("input");
|
|
|
|
|
|
|
|
try {
|
|
// extract input text from textbox
|
|
let text = input.value;
|
|
input.value = "";
|
|
|
|
|
|
if (text === "") {
|
|
throw "Textbox can't be empty";
|
|
}
|
|
|
|
// generate hash buffer
|
|
let digestValue = await digestMessage(text);
|
|
|
|
|
|
|
|
// turn buffer into string
|
|
hash = hexString(digestValue);
|
|
|
|
// split hash into head and tail
|
|
first = hash.substring(0, 5);
|
|
last = hash.substring(5);
|
|
let response = await fetch('https://api.pwnedpasswords.com/range/' + first);
|
|
|
|
// get response text
|
|
let responseText = await response.text();
|
|
|
|
// split the response into an array with potential passwords
|
|
let arr = responseText.split("\r\n");
|
|
|
|
// if nothing was found this will be displayed
|
|
document.getElementById("output")
|
|
.innerHTML = "The password : " + text +
|
|
"<br>SHA1 Hash : <span id='hash'>" + hash +
|
|
"</span><br>Was not found!";
|
|
|
|
arr.forEach((s)=>{
|
|
|
|
// split each line into the found hash and the amount of occurences
|
|
let a = s.split(":");
|
|
|
|
// a[0] is the found hash
|
|
if(a[0] === last) {
|
|
|
|
// set output text
|
|
document.getElementById("output")
|
|
.innerHTML = "The password : " + text +
|
|
"<br>SHA1 Hash : <span id='hash'>" + hash +
|
|
"</span><br>Was found <b>" + a[1] + "</b> times!";
|
|
|
|
return;
|
|
}
|
|
|
|
});
|
|
} catch (error) {
|
|
|
|
// set error output
|
|
document.getElementById("output").innerHTML =
|
|
"<b>" + error + "</b>";
|
|
}
|
|
|
|
output.value = "";
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|