Katy Moe
1. intro to crypto
2. why we need web crypto
3. how to use the API
4. the spec
The next twenty minutes
THIS IS A SECRET MESSAGE TO BE XORED WITH A SECRET KEY TO PRODUCE A CIPHERTEXT. THIS IS CALLED ENCRYPTION.
plaintext
HSD0472B1VX8V5BLR02010DHCV8B6W25N6KGBJV9SYS9C6 5BOG98383BY398Y98FR9GBBV2964783NHJFIFNJB90N7480
9GFGJFHGD76FVB2C1SD1SA2P408G00ZXBVB302479DHFJHAA83T1VSNXYBV8B9CBVA7F5395GKVBQ9X8GK2N1V49V09
+
=
key
ciphertext
H487SBFK593OSFH0N8BLSK4278SBTOB9P
Alice
Alice
Alice's key
Alice's key
my secret
my secret
H487SBFK593OSFH0N8BLSK4278SBTOB9P
Alice
Bob
Bob's public key
Bob's private key
Hello, Bob!
Hello, Bob!
?
?
?
?
?
?
browser
server
browser
TLS
TLS
plaintext
plaintext
plaintext
link layer
internet/IP layer
transport layer
application layer
TLS
Web Crypto API
JS || GTFO
// 1. create key buffer
const keyArrayBuffer = new Uint8Array([0x00, 0x11, 0x22, 0x33,
0x44, 0x55, 0x66, 0x77,
0x88, 0x99, 0xaa, 0xbb,
0xcc, 0xdd, 0xee, 0xff]);
// 2. encode plaintext
const encoder = new TextEncoder('utf-8');
const plaintext = 'Alice has a secret';
const encodedPlaintext = encoder.encode(plaintext);
// 3. import raw key
window.crypto.subtle.importKey(
'raw', keyArrayBuffer, {
name: 'AES-GCM'
}, false, ['encrypt', 'decrypt']
).then(function(key) {
// 4. generate random IV
const iv = window.crypto.getRandomValues(new Uint8Array(12));
// 5. encrypt
return window.crypto.subtle.encrypt({
name: 'AES-GCM',
iv
}, key, encodedPlaintext);
}).then(function(ciphertext) {
console.log(new Uint8Array(ciphertext));
});
5. encrypt
1. create key buffer
2. encode plaintext
3. import raw key
4. generate random IV
Symmetric encryption
window.crypto.getRandomValues
window.crypto.subtle
1. create key buffer
const keyArrayBuffer = new Uint8Array([0x00, 0x11, 0x22, 0x33,
0x44, 0x55, 0x66, 0x77,
0x88, 0x99, 0xaa, 0xbb,
0xcc, 0xdd, 0xee, 0xff]);
2. encode plaintext
const encoder = new TextEncoder('utf-8');
const plaintext = 'Alice has a secret';
const encodedPlaintext = encoder.encode(plaintext);
3. import raw key
// def: keyArrayBuffer
window.crypto.subtle.importKey(
'raw',
keyArrayBuffer,
{ name: 'AES-GCM' },
false,
['encrypt', 'decrypt']
);
4. generate random IV
const iv = window.crypto.getRandomValues(new Uint8Array(12));
5. encrypt
// def: encodedPlaintext, iv, key
window.crypto.subtle.encrypt({
name: 'AES-GCM',
iv
}, key, encodedPlaintext);
// 1. create key buffer
const keyArrayBuffer = new Uint8Array([0x00, 0x11, 0x22, 0x33,
0x44, 0x55, 0x66, 0x77,
0x88, 0x99, 0xaa, 0xbb,
0xcc, 0xdd, 0xee, 0xff]);
// 2. encode plaintext
const encoder = new TextEncoder('utf-8');
const plaintext = 'Alice has a secret';
const encodedPlaintext = encoder.encode(plaintext);
// 3. import raw key
window.crypto.subtle.importKey(
'raw', keyArrayBuffer, {
name: 'AES-GCM'
}, false, ['encrypt', 'decrypt']
).then(function(key) {
// 4. generate random IV
const iv = window.crypto.getRandomValues(new Uint8Array(12));
// 5. encrypt
return window.crypto.subtle.encrypt({
name: 'AES-GCM',
iv
}, key, encodedPlaintext);
}).then(function(ciphertext) {
console.log(new Uint8Array(ciphertext));
});
Working Draft
Candidate Recommendation
Proposed Recommendation
W3C Recommendation
Web Crypto API
Resources
Opinions