EcSignatureP256Sha256String/ecsignaturestringsign.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>EC P-256 signature SHA-256 (signature only)</title>
	<style>
		body {background-color: powderblue;}
		h1 {color: blue;}
		h2 {font-size: 200%;}
		p {font-size: 150%; }
		button {height: 100%; font-size: 150%;}
		textarea {font-size: 150%;}
		input[type="text"] {font-size: 100%; }
		input[type="button"] {font-size: 100%; }
	</style>	
</head>
<body>
<h1>EC P-256 signature SHA-256 (signature only)</h1>
<hr><p>
<b>Important note: this program is doing what it promises but the programming itself is of very poor quality and for demonstration purposes only. Never ever use this program as source for your own programs because there are a lot of conversions to get it run.</b>
<br><br>Get more information about this program on <a href="https://github.com/java-crypto/cross_platform_crypto/blob/main/docs/ecdsa_signature_ieee_p1363_string.md"  target="_blank">
my webpage <b>Elliptic key string signature (ECDSA) with IEEE P1363 encoding</b></a><br>
</p><hr>	  
	  
<p>Insert your own Private Key (in PEM encoding):</p>
<textarea name="privatekey-value" id="privatekey-value" form= "myform" rows="6" cols="70">-----BEGIN EC PRIVATE KEY-----
MEECAQAwEwYHKoZIzj0CAQYIKoZIzj0DAQcEJzAlAgEBBCAU2f8tzo99Z1HoxJlY96yXUhFY5vppVjw1iPKRfk1wHA==
-----END EC PRIVATE KEY-----</textarea>
<section class="import-key spki">
<p>Enter a message to sign:</p>
<input type="text" id="plaintext" name="plaintext" size="50" value="The quick brown fox jumps over the lazy dog">
<hr>
<p><b>Instructions:</b><br>
1.: insert your own private and press the "Import key" button<br>
2.: if the private key is valid the "Sign" button is enabled<br>
3.: enter the message to sign<br>
4.: press the "Sign" button<br>
5.: receive the signature in Base64 encoding</p>
<hr>
<input class="import-key-button" type="button" value="Import Key">
<input class="sign-button hidden" type="button" value="Sign" disabled>
<hr>
</section>
<p>signature (will be in IEEE P1363 = R|S = raw format and in Base64 encoding):</p>
<textarea name="signatureBase64" id="signatureBase64" form= "myform" rows="4" cols="64">the signature in Base64 encoding comes here...</textarea>
</div>
</p>
<hr><p><b>Technical note: this program uses the ECDSA Elliptic curve signature algorithm and curve SECP256R1 / NIST P-256 / PRIME256V1 / O.I.D. identifier 1.2.840.10045.3.1.7, the signature is encoded in IEEE P1363 = R|S = raw format.</b></p><hr>
</body>

<SCRIPT LANGUAGE="JavaScript">

const bufToB64 = buf =>
  btoa(Array.prototype.map.call(buf, ch => String.fromCharCode(ch)).join(""));

  /*
  The unwrapped signing key.
  */
  let privatekey;

  const signButton = document.querySelector(".spki .sign-button");

  /*
  Convert a string into an ArrayBuffer
  from https://developers.google.com/web/updates/2012/06/How-to-convert-ArrayBuffer-to-and-from-String
  */
  function str2ab(str) {
    const buf = new ArrayBuffer(str.length);
    const bufView = new Uint8Array(buf);
    for (let i = 0, strLen = str.length; i < strLen; i++) {
      bufView[i] = str.charCodeAt(i);
    }
    return buf;
  }

        /*
        Import a PEM encoded RSA private key, to use for RSA-PSS signing.
        Takes a string containing the PEM encoded key, and returns a Promise
        that will resolve to a CryptoKey representing the private key.
        */
        function importPrivateKey(pem) {
          // fetch the part of the PEM string between header and footer
          const pemHeader = "-----BEGIN EC PRIVATE KEY-----";
          const pemFooter = "-----END EC PRIVATE KEY-----";
          const pemContents = pem.substring(pemHeader.length, pem.length - pemFooter.length);
          // base64 decode the string to get the binary data
          const binaryDerString = window.atob(pemContents);
          // convert from a binary string to an ArrayBuffer
          const binaryDer = str2ab(binaryDerString);
           return window.crypto.subtle.importKey(
            "pkcs8",
            binaryDer,
            {
     		  name: "ECDSA",
			  namedCurve:"P-256",
      		  hash: "SHA-256"
            },
            true,
      	  ["sign"]
          );
        }

  /*
  Fetch the contents of the "message" textbox, and encode it
  in a form we can use for the encrypt operation.
  */
  function getMessageEncoding() {
    const messageBox = document.querySelector("#plaintext");
    const message = messageBox.value;
    const enc = new TextEncoder();
    return enc.encode(message);
  }
  
  /*
  Get the encoded message-to-sign, sign it and display a representation
  of the first part of it in the "signature" element.
  */
	async function signMessage() {
		let encoded = getMessageEncoding();
		signature = await window.crypto.subtle.sign(
			{
				name: "ECDSA",
				hash: {name: "SHA-256"},
			},
			privateKey,
			encoded
		);
		document.getElementById("signatureBase64").value = bufToB64(new Uint8Array(signature));
	}

  /*
  Show and enable the sign button.
  */
  function enableSignButton() {
    signButton.classList.add('fade-in');
    signButton.addEventListener('animationend', () => {
      signButton.classList.remove('fade-in');
    });
    signButton.removeAttribute("disabled");
    signButton.classList.remove("hidden");
  }

  /*
  When the user clicks "Import Key"
  - import the key
  - enable the "Sign" button
  */
  const importKeyButton = document.querySelector(".spki .import-key-button");
        importKeyButton.addEventListener("click", async () => {
          var pemEncodedKeyTextarea = document.getElementById("privatekey-value").value;
      	privateKey = await importPrivateKey(pemEncodedKeyTextarea);
		enableSignButton();
        });
        signButton.addEventListener("click", signMessage);
</SCRIPT>	
</html>