Webmardi

Optimisation des performances Web - La face obscure

Repris et traduit de

Front-End Performance: The Dark Side

Dev.Opera Blog 25.04.16

Mathias Bynens
Creative Commons Attribution 3.0 Unported

dev.opera.com/blog/timing-attacks

bldesign.ch

Boris Lebon Design

Designer & developer

Spécialiste web indépendant

Web, mobile, desktop

Gestion de projet

Fullstack

chefcuisine.com

Nutresia SA

Mon employeur actuel

Startup suisse, inventeur du concept le plus innovant de plats de chef fait automatiquement à la maison par un cuiseur intelligent.

Tim Berners-Lee TimBL

The inventor of the World Wide Web in Geneva CERN.

Brendan Eich

Creator of JavaScript, co-founder of Mozilla and CEO of Brave Software.

Mathias Bynens

Web standards enthusiast from Belgium working by Opera Software.

Quelle est

la première page web?

info.cern.ch/hypertext/WWW/TheProject.html

Webmardi

Optimisation des performances Web - La face obscure


// Comparaison, ici en JavaScript
function compare(a, b) {
    return a === b;
}


// Comparaison, ici en JavaScript
function compare(a, b) {
    return a === b;
}

compare('Meetups', 'Meetups');
// → true
compare('Meetups', 'Meetupz');
// → false
compare('Liip', 'Stars');
// → false
compare('CSS', 'XSS');
// → false

@ 1000 μs

@ 1000 μs

@ 100 μs

@ 200 μs


// Implémentation d'exemple avec optimisations
function compare(a, b) {
    const lengthA = a.length;
    if (lengthA !== b.length) {
        return false; // Optimisation de performance #1
    }
    for (let index = 0; index < lengthA; index++) {
        if (a.charCodeAt(index) !== b.charCodeAt(index)) {
            return false; // Optimisation de performance #2
        }
    }
    return true; // Pire cas au niveau performance
}



function compare(a, b) {
    return a === b;
}

compare('Meetups', 'Meetups');
// → true
compare('Meetups', 'Meetupz');
// → false
compare('Liip', 'Stars');
// → false
compare('CSS', 'XSS');
// → false

@ 1000 μs

@ 1000 μs [Opt. #2]

@ 100 μs [Opt. #1]

@ 200 μs [Opt. #2]

Side-channel leak

Attaque par canal auxiliaire

Timing attack

Attaque temporelle



function compare($userInput, $secret) {
    // ...
};



function compare(a, b) {
    const lengthA = a.length;
    if (lengthA !== b.length) {
        return false; // Optimisation de performance #1
        // → Permet à l'attaquant de trouver la taille
    }
    for (let index = 0; index < lengthA; index++) {
        if (a.charCodeAt(index) !== b.charCodeAt(index)) {
            return false; // Optimisation de performance #2
            // → Permet à l'attaquant de trouver chaque caractère,
            // un par un (sauf le dernier)
        }
    }
    return true; // Pire cas au niveau performance
}



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;
}



const image = new Image();
image.onerror = stopTimer;





startTimer();
image.src = 'https://example.com/admin';



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';

750 ms

1250 ms



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';

Modern timing attacks

Attaques temporelles modernes

Sniffly

zyan.scripts.mit.edu/sniffly

yan zhu (@bcrypt)

github.com/diracdeltas

Video parsing attack

Attaque d'analyse vidéo

Tom Van Goethem (@tomvangoethem)

tom.vg/academic/#ccs2015-timing



const video = document.createElement('video');

// `suspend` event → téléchargement terminé
video.onsuspend = startTimer;
// `error` event → analyse terminée
video.onerror = stopTimer;

video.src = 'https://example.com/admin';

Cache storage attack

Attaque de mise en cache

Tom Van Goethem (@tomvangoethem)

https://tom.vg/academic/#ccs2015-timing



const url = 'https://example.com/admin';
const dummyRequest = new Request('dummy');
fetch(url, {
    'credentials': 'include',
    'mode': 'no-cors'
}).then(function(response) {
    // Le téléchargement est terminé
    startTimer();
    return cache.put(dummyRequest, response.clone());
}).then(function() {
    // La ressource est en cache.
    stopTimer();
});