Hesham/pwned-search
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

New version for html code (#38)

Browse Source 
* * 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>
This commit is contained in:
djosh34 2020-06-22 13:00:43 +02:00 committed by GitHub
parent cccf6ba8c0
commit 3777e4d9bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 272 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
html/essential_bootstrap.css Normal file
View File

@ -0,0 +1,98 @@
/* took only the essential parts of the bootstrap css library to ensure that it is possible for everyone to read the code */
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333333;
}
p {
margin: 0 0 10px;
}
a {
color: #337ab7;
text-decoration: none;
}
.form-control {
display: block;
width: 100%;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
}
.btn {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button, select {
text-transform: none;
}
button {
overflow: visible;
}
button, input, optgroup, select, textarea {
color: inherit;
font: inherit;
margin: 0;
}
*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
}

188
html/index.html
View File

@ -1,81 +1,90 @@
<!DOCTYPE html> <!DOCTYPE html>
<!-- FYI must be serverd via HTTPS to function properly -->
<html> <html>
<head> <head>
<meta charset='UTF-8'/> <meta charset='UTF-8'/>
<title>Pwned Password API lookup.</title> <title>Pwned Password API lookup.</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<style> <link rel="stylesheet" href="./essential_bootstrap.css">
* {
box-sizing: border-box; <style>
}
html, body { html, body {
background-color:lightblue; background-color:lightblue;
cursor:pointer;
height:100%; height:100%;
width:100%; width:100%;
padding:0; padding:0;
margin:0; margin:0;
} }
.source {
position: absolute;
margin: 15px;
margin-left: 0px;
bottom: 0;
}
b { b {
color : red; color : red;
} }
#bodyDiv { .bodyDiv {
border:2px solid blue; position: relative;
border-radius:7px; border-radius:7px;
height:150px; height:300px;
width:600px; width:600px;
min-width:245px;
margin:80px; margin:80px;
padding:25px; padding:25px;
background-color:darkgrey; background-color: white;
color:black;
} }
@media only screen and (max-width : 700px) { div {
margin-top: 10px;
#bodyDiv {
border:2px solid blue;
border-radius:7px;
width:100%;
height:80%;
margin:0;
padding:25px;
background-color:darkgrey;
color:black;
} }
@media only screen and (max-width : 800px) {
#hash { #hash {
font-size:10px; font-size:10px;
} }
.bodyDiv {
position: fixed;
top: 0;
right: 0;
left: 0;
width: auto;
margin: 10px;
} }
</style> }
</head>
<body>
<div id="bodyDiv">
<span title="Password does not leave the browser, but it will show on the screen.">?</span>
<input id="inPut" type="text" placeholder="Password...">
<button title="Click to send part of hashed password.">Check</button>
<div>
<p id="outPut"></p>
</div>
</div> </style>
<a href="https://github.com/mikepound/pwned-search">The inspiration!</a> </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> <script>
let first = "";
let last = ""; let first = "";
let hash = ""; let last = "";
function hexString(buffer) { let hash = "";
function hexString(buffer) {
// creates an array of 8-bit unsigned integers // creates an array of 8-bit unsigned integers
const byteArray = new Uint8Array(buffer); const byteArray = new Uint8Array(buffer);
// turns that hash into hex // turns that hash into hex
const hexCodes = [...byteArray].map(value => { const hexCodes = [...byteArray].map(value => {
// eash element in array is converted to base 16 string // each element in array is converted to base 16 string
const hexCode = value.toString(16); const hexCode = value.toString(16);
// pad beggining with 0 why? // pad beggining with 0 why?
const paddedHexCode = hexCode.padStart(2, '0'); const paddedHexCode = hexCode.padStart(2, '0');
@ -84,83 +93,94 @@ function hexString(buffer) {
}); });
// return a string not an array // return a string not an array
return hexCodes.join(''); return hexCodes.join('');
} }
function digestMessage(message) { async function digestMessage(message) {
// Returns a newly constructed TextEncoder that will generate a byte stream with utf-8 encoding. // Returns a newly constructed TextEncoder that will generate a byte stream with utf-8 encoding.
const encoder = new TextEncoder(); const encoder = new TextEncoder();
// Takes a USVString as input, and returns a Uint8Array containing utf-8 encoded text. // Takes a USVString as input, and returns a Uint8Array containing utf-8 encoded text.
const data = encoder.encode(message); const data = encoder.encode(message);
// returns the hash // returns the hash
//The digest() method of the SubtleCrypto interface generates a digest of the given data. // 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. // A digest is a short fixed-length value derived from some variable-length input.
return window.crypto.subtle.digest('SHA-1', data); return window.crypto.subtle.digest('SHA-1', data);
} }
function runCheck() { async function runCheck() {
let outPut = document.getElementById("outPut");
let inPut = document.getElementById("inPut"); // get references to the dom
let text = inPut.value; let output = document.getElementById("output");
if (text === "") return false; let input = document.getElementById("input");
inPut.value = "";
digestMessage(text).then(digestValue => {
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); hash = hexString(digestValue);
// split hash into head and tail
first = hash.substring(0, 5); first = hash.substring(0, 5);
last = hash.substring(5); last = hash.substring(5);
fetch('https://api.pwnedpasswords.com/range/' + first) let response = await fetch('https://api.pwnedpasswords.com/range/' + first);
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
return response.text();
})
.then(function(text) {
return text.split("\r\n");
})
.then(function(arr){
document.getElementById("outPut") // 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 + .innerHTML = "The password : " + text +
"SHA1 Hash : " + hash + "<br>SHA1 Hash : <span id='hash'>" + hash +
"<br>Was not found!"; "</span><br>Was not found!";
arr.forEach((s)=>{ arr.forEach((s)=>{
// split each line into the found hash and the amount of occurences
let a = s.split(":"); let a = s.split(":");
if(a[0] == last) { // a[0] is the found hash
if(a[0] === last) {
document.getElementById("outPut") // set output text
document.getElementById("output")
.innerHTML = "The password : " + text + .innerHTML = "The password : " + text +
"<br>SHA1 Hash : <span id='hash'>" + hash + "<br>SHA1 Hash : <span id='hash'>" + hash +
"</span><br>Was found <b>" + a[1] + "</b> times!"; "</span><br>Was found <b>" + a[1] + "</b> times!";
return true; return;
} }
}); });
} catch (error) {
}) // set error output
.catch(function(error) { document.getElementById("output").innerHTML =
log('Request failed', error) "<b>" + error + "</b>";
}); }
}); output.value = "";
}
outPut.value = "";
}
document.querySelector("button")
.addEventListener("click", runCheck);
</script> </script>
</body> </body>
</html> </html>