Tweet
Tweet

Slide 1

Slide 1 text

@mathias THE DARK SIDE FRONT-END PERFORMANCE

Slide 2

Slide 2 text

@mathias

Slide 3

Slide 3 text

@mathias THE DARK SIDE FRONT-END PERFORMANCE

Slide 4

Slide 4 text

@mathias function compare(a, b) { return a === b; } compare('Fronteers', 'Fronteers'); // → true @ 1000 μs compare('Fronteers', 'Fronteerz'); // → false @ 1000 μs compare('Spring', 'Thing'); // → false @ 100 μs compare('Spring', 'Zpring'); // → false @ 200 μs

Slide 5

Slide 5 text

@mathias function compare(a, b) { return a === b; } compare('ColdFront', 'ColdFront'); // → true @ 1000 μs compare('ColdFront', 'ColdFrond'); // → false @ 1000 μs compare('Pikachu', 'Pichu'); // → false @ 100 μs compare('CSS', 'XSS'); // → false @ 200 μs

Slide 6

Slide 6 text

@mathias function compare(a, b) { return a === b; } compare('ColdFront', 'ColdFront'); // → true @ 1000 μs compare('ColdFront', 'ColdFrond'); // → false @ 1000 μs compare('Pikachu', 'Pichu'); // → false @ 100 μs compare('CSS', 'XSS'); // → false @ 200 μs

Slide 7

Slide 7 text

@mathias function compare(a, b) { const lengthA = a.length; if (lengthA !== b.length) { return false; // performance optimization #1 } for (let index = 0; index < lengthA; index++) { if (a.charCodeAt(index) !== b.charCodeAt(index)) { return false; // performance optimization #2 } } return true; // worst-case perf scenario }

Slide 8

Slide 8 text

@mathias compare('ColdFront', 'ColdFront'); // → true @ 1000 μs compare('ColdFront', 'ColdFrond'); // → false @ 1000 μs [opt. #2] compare('Pikachu', 'Pichu'); // → false @ 100 μs [opt. #1] compare('CSS', 'XSS'); // → false @ 200 μs [opt. #2]

Slide 9

Slide 9 text

@mathias SIDE-CHANNEL LEAK

Slide 10

Slide 10 text

@mathias TIMING ATTACK

Slide 11

Slide 11 text

@mathias compare($userInput, $secret);

Slide 12

Slide 12 text

@mathias function compare(a, b) { const lengthA = a.length; if (lengthA !== b.length) { return false; // performance optimization #1 // allows attackers to figure out expected length } for (let index = 0; index < lengthA; index++) { if (a.charCodeAt(index) !== b.charCodeAt(index)) { return false; // performance optimization #2 // allows attackers to figure out expected // characters, one by one (except the last one) } } return true; // worst-case perf scenario }

Slide 13

Slide 13 text

@mathias function safeCompare(a, b) { const lengthA = a.length; let result = 0; if (lengthA !== b.length) { b = a; result = 1; } for (let index = 0; index < lengthA; index++) { result |= ( a.charCodeAt(index) ^ b.charCodeAt(index) ); // XOR } return result === 0; }

Slide 14

Slide 14 text

@mathias STEALING BROWSING HISTORY

Slide 15

Slide 15 text

@mathias :link { color: green; } :visited { color: red; }

Slide 16

Slide 16 text

@mathias
  • Facebook
  • Twitter
  • Reddit
  • Instagram
  • GitHub

Slide 17

Slide 17 text

@mathias const links = document.querySelector(':visited'); for (const link of links) { console.log(`The user has visited ${ link.href }!`); }

Slide 18

Slide 18 text

@mathias const links = document.querySelector(':visited'); for (const link of links) { console.log(`The user has visited ${ link.href }!`); } not a timing attack

Slide 19

Slide 19 text

@mathias for (const link of document.links) { const color = getComputedStyle(link).color; if (color === 'rgb(255, 0, 0)') { // The color is red, i.e. `:visited` applies. console.log(`The user has visited ${ link.href }!`); } }

Slide 20

Slide 20 text

@mathias for (const link of document.links) { const color = getComputedStyle(link).color; if (color === 'rgb(255, 0, 0)') { // The color is red, i.e. `:visited` applies. console.log(`The user has visited ${ link.href }!`); } } not a timing attack

Slide 21

Slide 21 text

@mathias /* CSS */ :link { /* Increasing blur-radius makes (re-)rendering */ /* links slower. */ text-shadow: 100px 100px 199px #000; } /* JavaScript */ requestAnimationFrame(timeEachFrame);

Slide 22

Slide 22 text

@mathias /* CSS */ :link { /* Increasing blur-radius makes (re-)rendering */ /* links slower. */ text-shadow: 100px 100px 199px #000; } /* JavaScript */ requestAnimationFrame(timeEachFrame); timing attack!!1

Slide 23

Slide 23 text

@mathias SNIFFLY @BCRYPT

Slide 24

Slide 24 text

@mathias

Slide 25

Slide 25 text

@mathias SIMPLEST POSSIBLE TIMING ATTACK ON THE WEB

Slide 26

Slide 26 text

@mathias const image = new Image(); image.onerror = stopTimer; const end = performance.now(); const delta = end - start; alert(`Loading took ${ delta } milliseconds.`); }; startTimer(); image.src = 'https://example.com/admin.php';

Slide 27

Slide 27 text

@mathias const image = new Image(); image.onerror = function() { const end = performance.now(); const delta = end - start; alert(`Loading took ${ delta } milliseconds.`); }; const start = performance.now(); image.src = 'https://example.com/admin.php';

Slide 28

Slide 28 text

@mathias

Slide 29

Slide 29 text

@mathias 750 ms

Slide 30

Slide 30 text

@mathias

Slide 31

Slide 31 text

@mathias 1250 ms

Slide 32

Slide 32 text

@mathias const image = new Image(); image.onerror = function() { const end = performance.now(); const delta = end - start; alert(`Loading took ${ delta } milliseconds.`); }; const start = performance.now(); image.src = 'https://example.com/admin.php';

Slide 33

Slide 33 text

@mathias REDIRECT DETECTION ⏱ ATTACK @TOMVANGOETHEM

Slide 34

Slide 34 text

@mathias const start = performance.now(); fetch(url, { 'credentials': 'include', 'mode': 'no-cors' }).then(function() { const entries = performance.getEntriesByName(url); const fetchStart = entries.pop().fetchStart; const delta = fetchStart - start; const isRedirect = delta > 10; if (isRedirect) { console.log(`The URL ${ url } is a redirect.`); } else { console.log(`The URL ${ url } is not a redirect.`); } });

Slide 35

Slide 35 text

@mathias const start = performance.now(); fetch(url, { 'credentials': 'include', 'mode': 'no-cors' }).then(function() { const entries = performance.getEntriesByName(url); const fetchStart = entries.pop().fetchStart; const delta = fetchStart - start; const isRedirect = delta > 10; if (isRedirect) { console.log(`The URL ${ url } is a redirect.`); } else { console.log(`The URL ${ url } is not a redirect.`); } });

Slide 36

Slide 36 text

@mathias const start = performance.now(); fetch(url, { 'credentials': 'include', 'mode': 'no-cors' }).then(function() { const entries = performance.getEntriesByName(url); const fetchStart = entries.pop().fetchStart; const delta = fetchStart - start; const isRedirect = delta > 10; if (isRedirect) { console.log(`The URL ${ url } is a redirect.`); } else { console.log(`The URL ${ url } is not a redirect.`); } });

Slide 37

Slide 37 text

@mathias const start = performance.now(); fetch(url, { 'credentials': 'include', 'mode': 'no-cors' }).then(function() { const entries = performance.getEntriesByName(url); const fetchStart = entries.pop().fetchStart; const delta = fetchStart - start; const isRedirect = delta > 10; if (isRedirect) { console.log(`The URL ${ url } is a redirect.`); } else { console.log(`The URL ${ url } is not a redirect.`); } });

Slide 38

Slide 38 text

@mathias const start = performance.now(); fetch(url, { 'credentials': 'include', 'mode': 'no-cors' }).then(function() { const entries = performance.getEntriesByName(url); const fetchStart = entries.pop().fetchStart; const delta = fetchStart - start; const isRedirect = delta > 10; if (isRedirect) { console.log(`The URL ${ url } is a redirect.`); } else { console.log(`The URL ${ url } is not a redirect.`); } });

Slide 39

Slide 39 text

@mathias

Slide 40

Slide 40 text

@mathias

Slide 41

Slide 41 text

@mathias

Slide 42

Slide 42 text

@mathias

Slide 43

Slide 43 text

@mathias VIDEO PARSING ⏱ ATTACK @TOMVANGOETHEM

Slide 44

Slide 44 text

@mathias const video = document.createElement('video'); // `suspend` event == download complete video.onsuspend = startTimer; // `error` event == parsing complete video.onerror = stopTimer; video.src = 'https://example.com/admin.php';

Slide 45

Slide 45 text

@mathias CACHE STORAGE ⏱ ATTACK @TOMVANGOETHEM

Slide 46

Slide 46 text

@mathias const url = 'https://example.com/admin.php'; const dummyRequest = new Request('dummy'); fetch(url, { 'credentials': 'include', 'mode': 'no-cors' }).then(function(response) { // The download has completed. startTimer(); return cache.put(dummyRequest, response.clone()); }).then(function() { // The resource has been stored in the cache. stopTimer(); });

Slide 47

Slide 47 text

@mathias

Slide 48

Slide 48 text

@mathias

Slide 49

Slide 49 text

@mathias

Slide 50

Slide 50 text

@mathias

Slide 51

Slide 51 text

@mathias

Slide 52

Slide 52 text

@mathias 30 ms

Slide 53

Slide 53 text

@mathias

Slide 54

Slide 54 text

@mathias 15 ms

Slide 55

Slide 55 text

@mathias

Slide 56

Slide 56 text

@mathias

Slide 57

Slide 57 text

@mathias

Slide 58

Slide 58 text

@mathias

Slide 59

Slide 59 text

@mathias "

Slide 60

Slide 60 text

@mathias HEIST

Slide 61

Slide 61 text

@mathias

Slide 62

Slide 62 text

@mathias HTTP

Slide 63

Slide 63 text

@mathias HTTP Encrypted

Slide 64

Slide 64 text

@mathias HTTP Encrypted Information can be

Slide 65

Slide 65 text

@mathias HTTP Encrypted Information can be Stolen through

Slide 66

Slide 66 text

@mathias HTTP Encrypted Information can be Stolen through TCP windows

Slide 67

Slide 67 text

@mathias mths.be/bvo

Slide 68

Slide 68 text

@mathias “HEIST is a set of techniques that exploit timing side-channels in the browser […] to determine whether a response fitted into a single TCP window or whether it needed multiple. […] an attacker can determine the exact amount of bytes that were needed to send the response back to the client, all from within the browser. It so happens to be that knowing the exact size of a cross-origin resource is just what you need to launch a compression-based attack, which can be used to extract content (e.g. CSRF tokens) from any website using gzip compression.”

Slide 69

Slide 69 text

@mathias “HEIST is a set of techniques that exploit timing side-channels in the browser […] to determine whether a response fitted into a single TCP window or whether it needed multiple. […] an attacker can determine the exact amount of bytes that were needed to send the response back to the client, all from within the browser. It so happens to be that knowing the exact size of a cross-origin resource is just what you need to launch a compression-based attack, which can be used to extract content (e.g. CSRF tokens) from any website using gzip compression.”

Slide 70

Slide 70 text

@mathias PREVENTION

Slide 71

Slide 71 text

@mathias SAME-SITE COOKIES

Slide 72

Slide 72 text

@mathias Set-Cookie: key=value; HttpOnly; secure; SameSite=strict

Slide 73

Slide 73 text

@mathias Set-Cookie: key=value; HttpOnly; secure; SameSite=strict

Slide 74

Slide 74 text

@mathias Set-Cookie: key=value; HttpOnly; secure; SameSite=lax

Slide 75

Slide 75 text

@mathias BLOCK THIRD-PARTY ###

Slide 76

Slide 76 text

@mathias

Slide 77

Slide 77 text

@mathias THANKS! Research by @pdjstone: mths.be/bvn Sniffly by @bcrypt: mths.be/buy Research by @tomvangoethem: mths.be/buz HEIST by @tomvangoethem & @vanhoefm: mths.be/bvp Introduction to Same-Site cookies: mths.be/bvq