cyril/crypto-sha.html

## crypto-sha.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Crypto SHA</title>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1" name="viewport" />

    <script>
      function SHA256() {
        var str = document.getElementById('plainTextGCM').value;
        var buffer = new TextEncoder('utf-8').encode(str);

        return crypto.subtle.digest('SHA-256', buffer).then(
          function (hash) {
            document.getElementById('hashtext').value = hex(hash)
          }
        );
      }

      function SHA512() {
        var str = document.getElementById('plainTextGCM').value;
        var buffer = new TextEncoder('utf-8').encode(str);

        return crypto.subtle.digest('SHA-512', buffer).then(
          function (hash) {
            document.getElementById('hashtext').value = hex(hash)
          }
        );
      }

      function SHA1() {
        var str = document.getElementById('plainTextGCM').value;
        var buffer = new TextEncoder('utf-8').encode(str);

        return crypto.subtle.digest('SHA-1', buffer).then(
          function (hash) {
            document.getElementById('hashtext').value = hex(hash)
          }
        );
      }

      function hex(buffer) {
        var hexCodes = [];
        var view = new DataView(buffer);

        for (var i = 0; i < view.byteLength; i += 4) {
          // Using getUint32 reduces the number of iterations needed (we process 4 bytes each time)
          var value = view.getUint32(i);
          // toString(16) will give the hex representation of the number without padding
          var stringValue = value.toString(16);
          // We use concatenation and slice for padding
          var padding = '00000000';
          var paddedValue = (padding + stringValue).slice(-padding.length);
          hexCodes.push(paddedValue);
        }

        // Join all the hex strings into one
        return hexCodes.join('');
      }
    </script>

    <style>
      input {
        font-family: "Courier New", Courier, monospace;
        font-size: 2em;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <p>
      <label>Plain text: <input type="text" id="plainTextGCM" value="" /></label>
    </p>

    <ul>
      <li><button type="button" onclick="SHA1()">SHA1</button></li>
      <li><button type="button" onclick="SHA256()">SHA256</button></li>
      <li><button type="button" onclick="SHA512()">SHA512</button></li>
    </ul>

    <p>
      <label>Hashed text: <input type="text" id="hashtext" /></label>
    </p>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Crypto SHA</title>
	<meta charset="utf-8" />
	<meta content="width=device-width, initial-scale=1" name="viewport" />

	<script>
	function SHA256() {
	var str = document.getElementById('plainTextGCM').value;
	var buffer = new TextEncoder('utf-8').encode(str);

	return crypto.subtle.digest('SHA-256', buffer).then(
	function (hash) {
	document.getElementById('hashtext').value = hex(hash)
	}
	);
	}

	function SHA512() {
	var str = document.getElementById('plainTextGCM').value;
	var buffer = new TextEncoder('utf-8').encode(str);

	return crypto.subtle.digest('SHA-512', buffer).then(
	function (hash) {
	document.getElementById('hashtext').value = hex(hash)
	}
	);
	}

	function SHA1() {
	var str = document.getElementById('plainTextGCM').value;
	var buffer = new TextEncoder('utf-8').encode(str);

	return crypto.subtle.digest('SHA-1', buffer).then(
	function (hash) {
	document.getElementById('hashtext').value = hex(hash)
	}
	);
	}

	function hex(buffer) {
	var hexCodes = [];
	var view = new DataView(buffer);

	for (var i = 0; i < view.byteLength; i += 4) {
	// Using getUint32 reduces the number of iterations needed (we process 4 bytes each time)
	var value = view.getUint32(i);
	// toString(16) will give the hex representation of the number without padding
	var stringValue = value.toString(16);
	// We use concatenation and slice for padding
	var padding = '00000000';
	var paddedValue = (padding + stringValue).slice(-padding.length);
	hexCodes.push(paddedValue);
	}

	// Join all the hex strings into one
	return hexCodes.join('');
	}
	</script>

	<style>
	input {
	font-family: "Courier New", Courier, monospace;
	font-size: 2em;
	width: 100%;
	}
	</style>
	</head>

	<body>
	<p>
	<label>Plain text: <input type="text" id="plainTextGCM" value="" /></label>
	</p>

	<ul>
	<li><button type="button" onclick="SHA1()">SHA1</button></li>
	<li><button type="button" onclick="SHA256()">SHA256</button></li>
	<li><button type="button" onclick="SHA512()">SHA512</button></li>
	</ul>

	<p>
	<label>Hashed text: <input type="text" id="hashtext" /></label>
	</p>
	</body>
	</html>