Cryptography and Biometric Authentication in the browser

William Grasel

@willgmbr

Let's talk about cryptography!

Well, calm down...

I'm not a security nor a crypto expert!

But I have worked on Web Apps with critical security requirements

Side by side with actual security experts, that didn't know much about frontend

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

That every frontend web dev should have at least heard about

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?

... you want 2FA or better ways to login without password?

These are not requirements from another dimension! 

And you don't need to be a superhero to do any of it!

We already have native HTML5 API's with great support!

https://caniuse.com/cryptography

https://caniuse.com/textencoder

https://caniuse.com/webauthn​

These API's have hardware acceleration support for better performance

And OS integration for biometrical support!

Web Crypto API 

const crypto = window.crypto || window.msCrypto; // for IE 11

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

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(...);

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!

Shall we begin?

Examples of 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
(interactions)

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 common to mix all types of crypto algorithms

Biometric Authentication

All modern cellphones and computers have biometric features

Which is always much faster and normally much safer than password

WebAuthn API is the interface between or WebApp and the OS

Protects from phishing attacks as it is domain safe

Registering a Credential

Logging In

Demo Time!

Web Crypto Storage

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

Summing Up!

But remember...

References

That's it! =)

@willgmbr

Cryptography and Biometric Authentication in the browser

By William Grasel

Cryptography and Biometric Authentication in the browser

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!

  • 607

More from William Grasel