pwcheck.html

<!DOCTYPE html>
<html>
  <head>
    <title>Check Password Safety</title>
  </head>
  <body>
    <h1>Check Password Safety</h1>
    <p> This tool helps you check if your password has been leaked online. We care about your privacy!
        Only a small, secure part of a code that represents your password is sent to external servers.
        Your actual password is never sent or stored.</p>
    <p> The code of this page is intentionally written to be easy to understand. You are engouraged to review the
        source code of this page. Use Ctrl-U from your browser to display the source code.</p>
    <p> <label for="password">Enter password:</label>
        <input type="password" id="password" name="password">
        <input type="button" id="button" value="Check"></p>
    <p> Status: <span id="result"></span></p>

    <script>

      const buttonElement = document.getElementById('button');
      const resultElement = document.getElementById('result');
      const passwordElement = document.getElementById('password');

      function check() {

        // Disable button while we are processing
        buttonElement.value = 'Checking...';
        buttonElement.disabled = true;
        resultElement.innerHTML = '';

        const password = passwordElement.value;

        // Securely creates a code from your password (hashing). This process ensures your password itself is never exposed.
        const uintArray = new TextEncoder().encode(password);
        crypto.subtle.digest('SHA-1', uintArray).then(function(buffer) {
          const hashArray = Array.from(new Uint8Array(buffer)); // Turns the hashed password into a series of numbers.
          const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('').toUpperCase(); // Converts numbers into a secure code.

          const hashPrefix = hashHex.substring(0,5); // Takes only the first part of the code for checking.
          const hashSuffix = hashHex.substring(5); // This part is kept private and never sent.

          const xhr = new XMLHttpRequest();
          xhr.open('GET', 'https://pwcheck.gwdg.de/range/' + hashPrefix);

          xhr.onload = function() {
            let found = false;
            lines = xhr.responseText.split("\n");
            for (const i in lines) {
              words = lines[i].split(":");
              if (words[0] == hashSuffix) {
                found = true;
                break;
              }
            }
            if (found) {
                resultElement.style.color = "red";
                resultElement.innerHTML = "<b>This password is leaked!</b> Don't use it anywhere. (Score=" + words[1] + ')';
            } else {
              resultElement.style.color = "green";
              resultElement.innerHTML = "<b>Password not leaked</b>. This means your password was not found in known breaches.";
            }
            buttonElement.value='Check'; // Reset button text
            buttonElement.disabled = false; // Re-enable button
          }
          xhr.onerror = function() {
            resultElement.style.color = "red";
            resultElement.innerHTML = "Error checking password. Please try again later.";
            buttonElement.value='Check'; // Reset button text
            buttonElement.disabled = false; // Re-enable button
          }
          xhr.send();
        });
      }

      buttonElement.addEventListener('click', check);
      passwordElement.addEventListener('keydown', function(e) {
        if (e.code === "Enter") {
          check();
        }
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Check Password Safety</title>
	</head>
	<body>
	<h1>Check Password Safety</h1>
	<p> This tool helps you check if your password has been leaked online. We care about your privacy!
	Only a small, secure part of a code that represents your password is sent to external servers.
	Your actual password is never sent or stored.</p>
	<p> The code of this page is intentionally written to be easy to understand. You are engouraged to review the
	source code of this page. Use Ctrl-U from your browser to display the source code.</p>
	<p> <label for="password">Enter password:</label>
	<input type="password" id="password" name="password">
	<input type="button" id="button" value="Check"></p>
	<p> Status: <span id="result"></span></p>

	<script>

	const buttonElement = document.getElementById('button');
	const resultElement = document.getElementById('result');
	const passwordElement = document.getElementById('password');

	function check() {

	// Disable button while we are processing
	buttonElement.value = 'Checking...';
	buttonElement.disabled = true;
	resultElement.innerHTML = '';

	const password = passwordElement.value;

	// Securely creates a code from your password (hashing). This process ensures your password itself is never exposed.
	const uintArray = new TextEncoder().encode(password);
	crypto.subtle.digest('SHA-1', uintArray).then(function(buffer) {
	const hashArray = Array.from(new Uint8Array(buffer)); // Turns the hashed password into a series of numbers.
	const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('').toUpperCase(); // Converts numbers into a secure code.

	const hashPrefix = hashHex.substring(0,5); // Takes only the first part of the code for checking.
	const hashSuffix = hashHex.substring(5); // This part is kept private and never sent.

	const xhr = new XMLHttpRequest();
	xhr.open('GET', 'https://pwcheck.gwdg.de/range/' + hashPrefix);

	xhr.onload = function() {
	let found = false;
	lines = xhr.responseText.split("\n");
	for (const i in lines) {
	words = lines[i].split(":");
	if (words[0] == hashSuffix) {
	found = true;
	break;
	}
	}
	if (found) {
	resultElement.style.color = "red";
	resultElement.innerHTML = "<b>This password is leaked!</b> Don't use it anywhere. (Score=" + words[1] + ')';
	} else {
	resultElement.style.color = "green";
	resultElement.innerHTML = "<b>Password not leaked</b>. This means your password was not found in known breaches.";
	}
	buttonElement.value='Check'; // Reset button text
	buttonElement.disabled = false; // Re-enable button
	}
	xhr.onerror = function() {
	resultElement.style.color = "red";
	resultElement.innerHTML = "Error checking password. Please try again later.";
	buttonElement.value='Check'; // Reset button text
	buttonElement.disabled = false; // Re-enable button
	}
	xhr.send();
	});
	}

	buttonElement.addEventListener('click', check);
	passwordElement.addEventListener('keydown', function(e) {
	if (e.code === "Enter") {
	check();
	}
	});
	</script>
	</body>
	</html>