Web Cryptography 101

William Grasel

@willgmbr

Let's talk about cryptography!

DISCLAIMER:

I'm not a security nor a crypto expert!

But I have worked on Web Apps with critical security requirements

I'm here to show you the essencial knowledge on crypto

And the tools that you already have on your tool belt to deal with it

So you know what the Web is really capable of as a platform!

Crypto 101 Step 0:

Use HTTPS

It is FREE, easy to setup, and all others crypto API's only work on https websites!

Why do I need anything else?

... you need to store any sensible data on the client?

... you need more security layers between client and server?

These are all real world scenarios!

Welcome to the Web Crypto API 

window.crypto

https://caniuse.com/cryptography

https://caniuse.com/textencoder

You are gonna see a lot of Typed Array Buffers

Beginning with:

Strong Random Values

crypto.getRandomValues(new Uint32Array(10));

SubtleCrypto

const subtleCrypto = window.crypto.subtle;

subtleCrypto.decrypt(...);
subtleCrypto.deriveBits(...);
subtleCrypto.deriveKey(...);
subtleCrypto.digest(...);
subtleCrypto.encrypt(...);
subtleCrypto.exportKey(...);
subtleCrypto.generateKey(...);
subtleCrypto.importKey(...);
subtleCrypto.sign(...);
subtleCrypto.unwrapKey(...);
subtleCrypto.verify(...);
subtleCrypto.wrapKey(...);

It is a low level API to work with different crypto algorithms

They are all Promise Based executing out of the main thread

These API's have hardware acceleration support for better performance

These things are just possible with native support

Why Subtle Crypto?

What they mean is:

window.crypto
    .ItIsALowLevelAPI
    .ItIsVeryEasyToMissUseIt
    .IKnowWhatIamDoing
    .encrypty(...)

Fear is the path to the dark side...

and train we must!

Cryptography Algorithms 

Integrity

aka hashing 

> sha256sum ubuntu-mate-16.10-desktop-amd64.iso

c01b39c7a35ccc3b081a3e83d2c71fa9a767ebfeb45c69f08e17dfe3ef375a7b

SHA-256

"Lorem ipsum"
(data)
0x8dsf8dwl2c0
(digest)

Code Example

async function digestString(message) {
  const encoder = new TextEncoder();
  const data = encoder.encode(message);
  
  const digestBuffer = await crypto.subtle.digest('SHA-256', data);
  
  const decoder = new TextDecoder();
  return decoder.decode(digestBuffer);
}

Authenticity

aka hashing with key

HMAC

"Lorem ipsum"
(data)
0x8dsf8dwl2c0
(sign)
0x9s6mh7d8bew2
(key)

Code Example

async function signData(dataBuffer, cryptoKey) {
  const signBuffer = await crypto.subtle.sign(
    "HMAC", cryptoKey, dataBuffer
  );
  return signBuffer;
}

async function verifyData(dataBuffer, cryptoKey, signBuffer) {
  const bool = await crypto.subtle.verify(
    "HMAC", cryptoKey, signBuffer, dataBuffer
  );
  return bool;
}

Confidentiality

aka data cipher

AES-GCM

"Lorem ipsum"
(data)
0x8dsf8dwl2c0
(cipher)
0x9s6mh7d8bew2
(key)
0xd9v7fd773m2
(nonce)

Code Example

async function encryptData(dataBuffer, cryptoKey) {
  const nonce = crypto.getRandomValues(new Uint8Array(12));
  const cipher = await crypto.subtle.encrypt(
    { name: "AES-GCM", iv: nonce },
    cryptoKey,
    dataBuffer
  );
  return { cipher, nonce };
}

async function decryptData(cipher, cryptoKey, nonce) {
  const dataBuffer = await crypto.subtle.decrypt(
    { name: "AES-GCM", iv: nonce },
    cryptoKey,
    cipher
  );
  return dataBuffer;
}

Key Derivation

aka generate strong crypto keys

PBKDF2

0x8dsf8dwl2c0
(week key)
0x8dsf8dwl2c0
(stronger key)
0x9s6mh7d8bew2
(salt)
50000
(iteractions)

Code Example

const encoder = new TextEncoder();
const encodedPass = encoder.encode(userPass);

const baseKey = await crypto.subtle.importKey(
  'raw',
  encodedPass,
  'PBKDF2', // crypto algorithm
  false, // cannot be reverted
  ['deriveKey'],
),

const salt = crypto.getRandomValues(new Uint8Array(8));

const cryptoKey = await crypto.subtle.deriveKey(
  {
    "name": "PBKDF2",
    salt: salt,
    "iterations": 100000,
    "hash": "SHA-256"
  },
  baseKey,
  { "name": "AES-GCM", "length": 256 },
  false, // cannot be reverted
  [ "encrypt", "decrypt" ]
);

It is very easy to compromise your security by miss handling your crypto key!

There is no

silver bullet

when dealing with crypto keys

Demo Time!

Web Crypto Storage

https://github.com/willgm/web-crypto-storage

Thank you! =)

@willgmbr

Web Cryptography 101

By William Grasel

Web Cryptography 101

Segurança e privacidade são requisitos essenciais de nosso tempo, e claro que muita gente usa esses fatores como desculpa para fazer aplicativos nativos, pois na Web não temos nenhuma outra proteção além do HTTPS, correto? ERRADO! A Web como plataforma tem se tornado cada vez mais madura, com novas API's que possibilitam novos casos de usos! Nessa palestra vamos ver como usar algoritmos avançados de criptografia e autenticação biométrica de forma nativa e segura na sua PWA!

  • 1,005

More from William Grasel