Camilla Schoeser
316 lines
13 KiB
HTML
316 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Présentation Cryptographie - Protocoles de Messagerie</title>
|
|
<style>
|
|
:root {
|
|
--primary: #2563eb;
|
|
--secondary: #64748b;
|
|
--bg: #0f172a;
|
|
--card: #1e293b;
|
|
--text: #f8fafc;
|
|
--accent: #38bdf8;
|
|
--success: #22c55e;
|
|
--danger: #ef4444;
|
|
}
|
|
|
|
body, html {
|
|
margin: 0; padding: 0;
|
|
height: 100%; overflow: hidden;
|
|
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
background-color: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
|
|
.slides-container {
|
|
width: 100%; height: 100%;
|
|
display: flex; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.slide {
|
|
min-width: 100%; height: 100%;
|
|
display: flex; flex-direction: column;
|
|
justify-content: center; align-items: center;
|
|
padding: 40px; box-sizing: border-box;
|
|
position: relative;
|
|
}
|
|
|
|
h1 { font-size: 3rem; color: var(--accent); margin-bottom: 20px; text-align: center; }
|
|
h2 { font-size: 2.2rem; color: var(--primary); margin-bottom: 15px; }
|
|
h3 { color: var(--accent); margin-top: 0; }
|
|
|
|
.content {
|
|
max-width: 1100px; width: 100%;
|
|
background: var(--card);
|
|
padding: 40px; border-radius: 15px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
ul { line-height: 1.6; font-size: 1.2rem; }
|
|
li { margin-bottom: 10px; }
|
|
|
|
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
|
|
|
|
table {
|
|
width: 100%; border-collapse: collapse; margin-top: 20px;
|
|
background: rgba(255,255,255,0.05);
|
|
}
|
|
th, td {
|
|
padding: 12px; border: 1px solid var(--secondary);
|
|
text-align: center; font-size: 0.9rem;
|
|
}
|
|
th { background: var(--primary); }
|
|
.check { color: var(--success); font-weight: bold; }
|
|
.cross { color: var(--danger); font-weight: bold; }
|
|
|
|
.timeline-item {
|
|
border-left: 3px solid var(--primary);
|
|
padding-left: 20px; margin-bottom: 20px;
|
|
position: relative;
|
|
}
|
|
.date { font-weight: bold; color: var(--accent); font-size: 1.3rem; }
|
|
|
|
.controls {
|
|
position: fixed; bottom: 20px; right: 20px;
|
|
display: flex; gap: 10px; z-index: 100;
|
|
}
|
|
button {
|
|
background: var(--primary); border: none; color: white;
|
|
padding: 10px 20px; border-radius: 5px; cursor: pointer;
|
|
opacity: 0.7; transition: 0.3s;
|
|
}
|
|
button:hover { opacity: 1; }
|
|
|
|
.progress-bar {
|
|
position: fixed; top: 0; left: 0; height: 5px;
|
|
background: var(--accent); transition: width 0.3s;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-block; padding: 2px 8px; border-radius: 4px;
|
|
background: var(--secondary); font-size: 0.8rem; margin-right: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="progress-bar" id="progress"></div>
|
|
|
|
<div class="slides-container" id="container">
|
|
|
|
<section class="slide">
|
|
<h1>Analyse des Protocoles de Messagerie Sécurisée</h1>
|
|
<p style="font-size: 1.5rem; color: var(--secondary)">De l'Email à Signal : L'évolution vers la souveraineté numérique</p>
|
|
<div style="margin-top: 50px; text-align: center;">
|
|
<p><strong>Telecom Nancy</strong></p>
|
|
<p>Tom & Collaborateur</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide">
|
|
<div class="content">
|
|
<h2>Rappel : Les piliers du protocole</h2>
|
|
<div class="grid">
|
|
<div>
|
|
<h3>Fondamentaux (C.I.D.A)</h3>
|
|
<ul>
|
|
<li><strong>Confidentialité :</strong> Seul le destinataire lit le msg.</li>
|
|
<li><strong>Intégrité :</strong> Le msg n'est pas modifié.</li>
|
|
<li><strong>Authentification :</strong> Prouver l'identité de l'émetteur.</li>
|
|
<li><strong>Disponibilité :</strong> Le service doit être accessible.</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3>Modernes (Post-Snowden)</h3>
|
|
<ul>
|
|
<li><strong>E2EE :</strong> Serveur totalement exclu.</li>
|
|
<li><strong>Confidentialité Persistante (PFS) :</strong> Clés éphémères.</li>
|
|
<li><strong>Auto-guérison :</strong> Réparation après compromission.</li>
|
|
<li><strong>Déniabilité :</strong> Pas de preuve légale "statique".</li>
|
|
<li><strong>Asynchronisme :</strong> Envoyer sans que l'autre soit en ligne.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide">
|
|
<div class="content">
|
|
<h2>L'ère du Transport (SMS / Email)</h2>
|
|
<div class="timeline-item">
|
|
<span class="date">1982 - 1992</span>
|
|
<p><strong>Email (SMTP) & SMS :</strong> Sécurité nulle par conception. Texte clair sur les serveurs (Orange, SFR, Google).</p>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<span class="date">Années 2000</span>
|
|
<p><strong>Sécurité de Transport (TLS) :</strong> Chiffrement entre tél et serveur. Mais le serveur possède les clés (Hop-by-Hop).</p>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<span class="date">2008 - 2024</span>
|
|
<p><strong>RCS (Google/GSMA) :</strong> Modernisation du SMS. E2EE imposé par Google en 2020.
|
|
<br><small style="color:var(--danger)">Danger : Fallback SMS si mauvaise connexion = perte totale de sécurité.</small></p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide">
|
|
<div class="content">
|
|
<h2>Premières avancées : PGP & OTR</h2>
|
|
<div class="grid">
|
|
<div style="border-right: 1px solid var(--secondary); padding-right: 20px;">
|
|
<h3>PGP (1991)</h3>
|
|
<p><span class="badge">E2EE</span> <span class="badge">Asynchrone</span></p>
|
|
<ul>
|
|
<li>Démocratisation de la crypto forte.</li>
|
|
<li class="cross">Rigide : Clés statiques.</li>
|
|
<li class="cross">Pas de PFS : Une clé volée déchiffre tout le passé.</li>
|
|
</ul>
|
|
</div>
|
|
<div style="padding-left: 20px;">
|
|
<h3>OTR (2004)</h3>
|
|
<p><span class="badge">E2EE</span> <span class="badge">PFS</span> <span class="badge">Déniabilité</span></p>
|
|
<ul>
|
|
<li class="cross">Synchrone : Bob doit être en ligne.</li>
|
|
<li class="cross">Fragile : La session casse si l'IP change (4G/Wi-Fi).</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide">
|
|
<div class="content">
|
|
<h2>2013 : La Révolution Signal</h2>
|
|
<div class="grid">
|
|
<div>
|
|
<ul>
|
|
<li><strong>X3DH :</strong> Asynchronisme parfait (Pre-keys stockées sur serveur).</li>
|
|
<li><strong>Double Ratchet :</strong> Renouvellement de clé à chaque message.</li>
|
|
<li><strong>Auto-guérison :</strong> Compromission d'une clé n'affecte pas les futurs messages.</li>
|
|
</ul>
|
|
</div>
|
|
<div style="background: rgba(255,255,255,0.05); padding: 15px; border-radius: 10px;">
|
|
<p><strong>Adoption Massive :</strong></p>
|
|
<p>✅ Protocole intégré dans <strong>WhatsApp</strong> (2016), <strong>Google Messages</strong>, <strong>Messenger</strong> et <strong>Skype</strong>.</p>
|
|
<p><span class="date">2023 :</span> Déploiement de <strong>PQXDH</strong> (Post-Quantique).</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide">
|
|
<div class="content">
|
|
<h2>Comparaison Technique</h2>
|
|
<table>
|
|
<tr>
|
|
<th>Critère</th>
|
|
<th>SMS/Email</th>
|
|
<th>PGP</th>
|
|
<th>OTR</th>
|
|
<th>Signal</th>
|
|
</tr>
|
|
<tr><td>Confidentialité</td><td>Partielle</td><td class="check">✅</td><td class="check">✅</td><td class="check">✅</td></tr>
|
|
<tr><td>Intégrité</td><td class="cross">❌</td><td class="check">✅</td><td class="check">✅</td><td class="check">✅</td></tr>
|
|
<tr><td>Disponibilité</td><td class="check">✅</td><td class="check">✅</td><td class="cross">❌ (Sync)</td><td class="check">✅</td></tr>
|
|
<tr><td>E2EE</td><td class="cross">❌</td><td class="check">✅</td><td class="check">✅</td><td class="check">✅</td></tr>
|
|
<tr><td>PFS (Passé)</td><td class="cross">❌</td><td class="cross">❌</td><td class="check">✅</td><td class="check">✅</td></tr>
|
|
<tr><td>Auto-guérison</td><td class="cross">❌</td><td class="cross">❌</td><td class="cross">❌</td><td class="check">✅</td></tr>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide">
|
|
<div style="text-align: center;">
|
|
<h1 style="font-size: 5rem;">Cœur technique</h1>
|
|
<p style="font-size: 2rem;">Place à Tom & au tableau blanc</p>
|
|
<div style="font-size: 5rem; margin-top: 30px;">🦦</div>
|
|
<p>(Dessin de l'Axolotl)</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide">
|
|
<div class="content">
|
|
<h2>Limitations & Défis</h2>
|
|
<ul>
|
|
<li><strong>Menace Quantique :</strong> Risque <em>"Harvest Now, Decrypt Later"</em> (Algorithme de Shor).</li>
|
|
<li><strong>Points d'extrémité :</strong> Le protocole est blindé, mais si l'OS est corrompu (Spyware Pegasus), la crypto est inutile.</li>
|
|
<li><strong>Attaque MitM :</strong> Substitution de clés publiques sur le serveur (nécessite vérification manuelle des <em>Safety Numbers</em>).</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide">
|
|
<div class="content">
|
|
<h2>Gouvernance & Souveraineté</h2>
|
|
<table>
|
|
<tr>
|
|
<th>Plateforme</th>
|
|
<th>Réseau</th>
|
|
<th>E2EE par défaut</th>
|
|
<th>Métadonnées</th>
|
|
<th>Souveraineté</th>
|
|
</tr>
|
|
<tr><td>Signal</td><td>Centralisé</td><td class="check">✅ Oui</td><td>Minimisées</td><td>Moyenne (USA)</td></tr>
|
|
<tr><td>Discord</td><td>Centralisé</td><td class="cross">❌ (Sauf A/V)</td><td>Exploitées</td><td>Nulle</td></tr>
|
|
<tr><td>Matrix</td><td>Fédéré</td><td class="check">✅ Oui</td><td>Variables</td><td class="check">Totale</td></tr>
|
|
</table>
|
|
<div style="margin-top: 20px; font-size: 0.9rem;">
|
|
<p><strong>Discord :</strong> Priorité à la modération et l'UX communautaire.</p>
|
|
<p><strong>Matrix :</strong> Standard ouvert décentralisé (Ex: Tchap pour l'État Français).</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide">
|
|
<h1>Conclusion</h1>
|
|
<div class="content">
|
|
<p style="font-size: 1.5rem; text-align: center;">
|
|
La sécurité ne se mesure plus seulement à la puissance du chiffrement,<br>
|
|
mais à la <strong>maîtrise des métadonnées</strong> et à la <strong>souveraineté de l'infrastructure</strong>.
|
|
</p>
|
|
<h2 style="text-align: center; margin-top: 40px;">Merci de votre attention</h2>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<button onclick="prevSlide()">← Précédent</button>
|
|
<button onclick="nextSlide()">Suivant →</button>
|
|
</div>
|
|
|
|
<script>
|
|
let currentSlide = 0;
|
|
const container = document.getElementById('container');
|
|
const slides = document.querySelectorAll('.slide');
|
|
const progress = document.getElementById('progress');
|
|
|
|
function updateSlide() {
|
|
container.style.transform = `translateX(-${currentSlide * 100}%)`;
|
|
progress.style.width = `${((currentSlide + 1) / slides.length) * 100}%`;
|
|
}
|
|
|
|
function nextSlide() {
|
|
if (currentSlide < slides.length - 1) {
|
|
currentSlide++;
|
|
updateSlide();
|
|
}
|
|
}
|
|
|
|
function prevSlide() {
|
|
if (currentSlide > 0) {
|
|
currentSlide--;
|
|
updateSlide();
|
|
}
|
|
}
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'ArrowRight' || e.key === ' ') nextSlide();
|
|
if (e.key === 'ArrowLeft') prevSlide();
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |