Front-End Performance: The Dark Side @ Fronteers Spring Conference 2016

In security-sensitive situations, performance can actually be a bug rather than a feature. This presentation covers timing attacks on the web, and demonstrates how modern performance-related web APIs can sometimes have a negative security impact.

More information: https://dev.opera.com/blog/timing-attacks/

Transcript

1. @mathias
   THE DARK SIDE
   FRONT-END PERFORMANCE
   

   View Slide

2. @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
   

   View Slide

3. @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('CSS', 'XSS');
   // → false @ 200 μs
   

   View Slide

4. @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('CSS', 'XSS');
   // → false @ 200 μs
   

   View Slide

5. @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
   }
   

   View Slide

6. @mathias
   compare('Fronteers', 'Fronteers');
   // → true @ 1000 μs
   compare('Fronteers', 'Fronteerz');
   // → false @ 1000 μs [opt. #2]
   compare('Spring', 'Thing');
   // → false @ 100 μs [opt. #1]
   compare('CSS', 'XSS');
   // → false @ 200 μs [opt. #2]
   

   View Slide

7. @mathias
   SIDE-CHANNEL LEAK
   

   View Slide

8. @mathias
   TIMING ATTACK
   

   View Slide

9. @mathias
   compare($userInput, $secret);
   

   View Slide

10. @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
    }
    

    View Slide

11. @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;
    }
    

    View Slide

12. @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';
    

    View Slide

13. @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';
    

    View Slide

14. @mathias
    

    View Slide

15. @mathias
    750 ms
    

    View Slide

16. @mathias
    

    View Slide

17. @mathias
    1250 ms
    

    View Slide

18. @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';
    

    View Slide

19. @mathias
    MODERN TIMING ATTACKS
    

    View Slide

20. @mathias
    SNIFFLY
    OMG @BCRYPT R0CKX!!1
    

    View Slide

21. @mathias
    

    View Slide

22. @mathias
    VIDEO PARSING ⏱ ATTACK
    @TOMVANGOETHEM
    

    View Slide

23. @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';
    

    View Slide

24. @mathias
    CACHE STORAGE ⏱ ATTACK
    @TOMVANGOETHEM
    

    View Slide

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

    View Slide

26. @mathias
    

    View Slide

27. @mathias
    

    View Slide

28. @mathias
    

    View Slide

29. @mathias
    30 ms
    

    View Slide

30. @mathias
    

    View Slide

31. @mathias
    15 ms
    

    View Slide

32. @mathias
    

    View Slide

33. @mathias
    

    View Slide

34. @mathias
    

    View Slide

35. @mathias
    "
    

    View Slide

36. @mathias
    THANKS!
    Sniffly by @bcrypt: https://mths.be/buy
    Research by @tomvangoethem: https://mths.be/buz
    Bonus — examples by @sirdarckcat: https://mths.be/bva
    

    View Slide