Live programming @ University of Washington
Websocket client usagePiano transcription toolsWhat's my IP?Identifying free variables in JS blocksQR codes
Using the SubtleCrypto Web API
keyPair = window.crypto.subtle.generateKey(
{
name: "RSA-OAEP",
modulusLength: 4096,
publicExponent: new Uint8Array([1, 0, 1]),
hash: "SHA-256"
},
true,
["encrypt", "decrypt"]
);
exported1 = crypto.subtle.exportKey('jwk', keyPair.publicKey)
imported = crypto.subtle.importKey('jwk', exported1, {
name: "RSA-OAEP",
//modulusLength: 4096,
//publicExponent: new Uint8Array([1, 0, 1]),
hash: "SHA-256"
}, true, exported1.key_ops)
encrypted1 = crypto.subtle.encrypt({
name: "RSA-OAEP"
},
imported, // (the public key from above, to prove that works)
new TextEncoder().encode("testing") )
decoded1 = new TextDecoder().decode(await crypto.subtle.decrypt({
name: "RSA-OAEP"
},
keyPair.privateKey,
encrypted1))
md`## Signing and verifying`
keyPair2 = window.crypto.subtle.generateKey(
{
name: "RSASSA-PKCS1-v1_5",
modulusLength: 4096,
publicExponent: new Uint8Array([1, 0, 1]),
hash: "SHA-256"
},
true,
["sign", "verify"]
);
known_message = new TextEncoder().encode("The only one who knows this ounce of words is just a token, is he who has a ton to tell that must remain unspoken.")
signature = await window.crypto.subtle.sign(
"RSASSA-PKCS1-v1_5",
keyPair2.privateKey,
known_message
)
result = await window.crypto.subtle.verify(
"RSASSA-PKCS1-v1_5",
keyPair2.publicKey,
_base64ToArrayBuffer(signature_as_text), // (demonstrates conversion -- see below)
known_message
)
new Uint8Array(signature)
md`## Converting between ArrayBuffer and string (for embedding in JSON)`
signature_as_text = _arrayBufferToBase64(signature)
out = "MIFqnXKlR7eG4sOD4vEiEIB8uaJwALP4fyVw6qZpHrvIpu8uW8erYxqjXZqLK5Is/xrkfneMqP+yBvSJhKPq4inujN0V7wP+tUEZwN8OfWbKSXYXuKwT03WjGmeWYPig5eyATwSzbjonki8ct9J9x9CvyLla4qW4if2TkAuMpIOs9lWv/nYh2qq4I9oEgpPC6+0Sypldaz/BLf28e3R33M5rmevI6jbTarMZk0hB7iXrBLajfRAdrENtem9v7nmKkQbe/GgcaboSW4kb9eVHWx8tD2bItBDDYnBdncOcWUBfE/Vf5ZGsykjyqy6WZC8yMYtViq9A9YsdBIF+sZUiU7jckYz25e5D6GUj7bayrmi11Dha3rHdsxtMXmLt2eZqqV6AGbMdGPhIb+5hnymkT/vg7i++UNiQO5GJ4p+4t3S86czFzZtA4RyylhFGG6fkVZr/bwVAvfuBxlC7k4LkJ9wr7LvHDeEnguOmMp5MHzKCxNm2ZWrxtdVJgrY5xsizn1zjCAcZZzZgm9xdRCeyFYD45O0vbQPx9SyU2N+IJGsfPr2+ATYbzliohMZ0OkNzjbBlG6fnUDjTabQv2vqMylnH+UPR0FIpWqu5qUAkHdeLXFPlBVaB399KJtHzIg5LCpxbGbi3Tya8i+S+L/nFc/esdMJeKWMrW5rju0/z624="
function _arrayBufferToBase64( buffer ) {
var binary = '';
var bytes = new Uint8Array( buffer );
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode( bytes[ i ] );
}
return window.btoa( binary );
}
function _base64ToArrayBuffer(base64) {
var binary_string = window.atob(base64);
var len = binary_string.length;
var bytes = new Uint8Array(len);
for (var i = 0; i < len; i++) {
bytes[i] = binary_string.charCodeAt(i);
}
return bytes.buffer;
}
exported = JSON.stringify(await crypto.subtle.exportKey('jwk', keyPair2.publicKey))
exported2 = crypto.subtle.exportKey('jwk', keyPair2.publicKey)
imported2 = crypto.subtle.importKey('jwk', exported2, {
name: "RSASSA-PKCS1-v1_5",
hash: "SHA-256"
}, true, exported2.key_ops)
result2 = await window.crypto.subtle.verify(
"RSASSA-PKCS1-v1_5",
keyPair2.publicKey,
_base64ToArrayBuffer(signature_as_text), // (demonstrates conversion -- see below)
known_message
)
// any array buffer can be digested into a collision-resistant one
_arrayBufferToBase64(await crypto.subtle.digest('SHA-512', signature))
exported3 = _arrayBufferToBase64(await crypto.subtle.exportKey('spki', keyPair2.publicKey))
imported3 = crypto.subtle.importKey('spki', _base64ToArrayBuffer(exported3), {
name: "RSASSA-PKCS1-v1_5",
hash: "SHA-256"
}, true, exported2.key_ops)
result3 = await window.crypto.subtle.verify(
"RSASSA-PKCS1-v1_5",
keyPair2.publicKey,
_base64ToArrayBuffer(signature_as_text), // (demonstrates conversion -- see below)
known_message
)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
