Camilla Schoeser
515 lines
21 KiB
HTML
515 lines
21 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 Decrypto - The FUNKY Edition</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
/* Variables Funky */
|
|
:root {
|
|
--primary-f: #8A2BE2; /* Amethyst */
|
|
--secondary-f: #FF69B4; /* Hot Pink */
|
|
--bg-f: #1a0f2b; /* Dark Purple */
|
|
--card-f: #3a1c5d; /* Medium Purple */
|
|
--text-f: #e0f2f7; /* Light Cyan */
|
|
--accent-f: #00FFFF; /* Aqua */
|
|
--success-f: #32CD32; /* Lime Green */
|
|
--danger-f: #FF4500; /* Orange Red */
|
|
--gradient-start: #8A2BE2;
|
|
--gradient-end: #00FFFF;
|
|
}
|
|
|
|
body, html {
|
|
margin: 0; padding: 0;
|
|
height: 100%; overflow: hidden;
|
|
font-family: 'Poppins', sans-serif;
|
|
background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
|
|
background-size: 400% 400%;
|
|
animation: gradientBG 15s ease infinite;
|
|
color: var(--text-f);
|
|
}
|
|
|
|
@keyframes gradientBG {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
.slides-container {
|
|
width: 100%; height: 100%;
|
|
display: flex; transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Bounce effect */
|
|
}
|
|
|
|
.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;
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
|
|
}
|
|
|
|
.slide.active {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
h1 {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 4.5rem;
|
|
color: var(--accent-f);
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
text-shadow: 0 0 15px var(--accent-f);
|
|
}
|
|
h2 {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 2.8rem;
|
|
color: var(--primary-f);
|
|
margin-bottom: 25px;
|
|
text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
|
|
}
|
|
h3 {
|
|
color: var(--secondary-f);
|
|
margin-top: 0;
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.content {
|
|
max-width: 1200px; width: 100%;
|
|
background: var(--card-f);
|
|
padding: 40px; border-radius: 25px;
|
|
box-shadow: 0 15px 40px rgba(0,0,0,0.6);
|
|
border: 2px solid var(--primary-f);
|
|
animation: fadeInScale 0.8s ease-out forwards;
|
|
}
|
|
|
|
@keyframes fadeInScale {
|
|
from { opacity: 0; transform: scale(0.9); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
|
|
ul { line-height: 1.8; font-size: 1.3rem; padding-left: 30px; }
|
|
li { margin-bottom: 12px; }
|
|
|
|
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
|
|
|
|
table {
|
|
width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 25px;
|
|
background: var(--card-f); border-radius: 15px; overflow: hidden;
|
|
box-shadow: 0 5px 20px rgba(0,0,0,0.4);
|
|
}
|
|
th, td {
|
|
padding: 15px 10px; border-bottom: 1px solid rgba(255,255,255,0.1);
|
|
text-align: center; font-size: 1rem;
|
|
color: var(--text-f);
|
|
}
|
|
th { background: var(--primary-f); font-weight: 700; color: white; }
|
|
tr:last-child td { border-bottom: none; }
|
|
td.check { color: var(--success-f); font-weight: bold; }
|
|
td.cross { color: var(--danger-f); font-weight: bold; }
|
|
|
|
.timeline-item {
|
|
border-left: 4px solid var(--secondary-f);
|
|
padding-left: 25px; margin-bottom: 30px;
|
|
position: relative;
|
|
animation: slideInLeft 0.7s ease-out forwards;
|
|
opacity: 0;
|
|
}
|
|
.timeline-item:nth-child(even) { animation-delay: 0.1s; }
|
|
.timeline-item:nth-child(odd) { animation-delay: 0.2s; }
|
|
|
|
@keyframes slideInLeft {
|
|
from { opacity: 0; transform: translateX(-50px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
|
|
.date {
|
|
font-weight: bold;
|
|
color: var(--accent-f);
|
|
font-size: 1.5rem;
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
text-shadow: 0 0 10px var(--accent-f);
|
|
}
|
|
|
|
.controls {
|
|
position: fixed; bottom: 30px; right: 30px;
|
|
display: flex; gap: 15px; z-index: 100;
|
|
}
|
|
button {
|
|
background: var(--primary-f); border: none; color: white;
|
|
padding: 12px 25px; border-radius: 30px; cursor: pointer;
|
|
font-size: 1.1rem; font-weight: 600;
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.4);
|
|
transition: all 0.3s ease;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
button:hover {
|
|
background: var(--secondary-f);
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 8px 20px rgba(0,0,0,0.5);
|
|
}
|
|
button:active {
|
|
transform: translateY(0);
|
|
box-shadow: 0 3px 10px rgba(0,0,0,0.4);
|
|
}
|
|
|
|
.progress-bar {
|
|
position: fixed; top: 0; left: 0; height: 8px;
|
|
background: var(--accent-f); transition: width 0.4s ease-out;
|
|
box-shadow: 0 0 15px var(--accent-f);
|
|
}
|
|
|
|
.badge {
|
|
display: inline-block; padding: 4px 10px; border-radius: 20px;
|
|
background: var(--secondary-f); font-size: 0.9rem; margin-right: 8px;
|
|
color: white; font-weight: 600;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.feature-card {
|
|
background: var(--card-f);
|
|
border: 1px solid var(--secondary-f);
|
|
border-radius: 15px;
|
|
padding: 25px;
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.4);
|
|
text-align: center;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
.feature-card:hover {
|
|
transform: translateY(-5px) scale(1.02);
|
|
box-shadow: 0 8px 20px rgba(0,0,0,0.6);
|
|
}
|
|
.feature-card h3 {
|
|
color: var(--accent-f);
|
|
font-size: 1.5rem;
|
|
margin-bottom: 10px;
|
|
}
|
|
.feature-card p {
|
|
font-size: 1.1rem;
|
|
color: var(--text-f);
|
|
}
|
|
|
|
.axolotl {
|
|
font-size: 10rem;
|
|
animation: bounce 2s infinite ease-in-out;
|
|
text-shadow: 0 0 30px var(--accent-f), 0 0 60px var(--secondary-f);
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-30px); }
|
|
}
|
|
|
|
.main-title {
|
|
text-shadow: 0 0 20px var(--accent-f), 0 0 40px var(--primary-f);
|
|
animation: pulseTitle 2s infinite alternate;
|
|
}
|
|
|
|
@keyframes pulseTitle {
|
|
from { transform: scale(1); opacity: 0.9; }
|
|
to { transform: scale(1.03); opacity: 1; }
|
|
}
|
|
|
|
.big-text {
|
|
font-size: 1.8rem;
|
|
color: var(--secondary-f);
|
|
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="progress-bar" id="progress"></div>
|
|
|
|
<div class="slides-container" id="container">
|
|
|
|
<section class="slide">
|
|
<h1 class="main-title">Analyse des Protocoles de Messagerie Sécurisée</h1>
|
|
<p class="big-text" style="font-size: 1.8rem; color: var(--secondary-f)">De l'Email à Signal : L'évolution vers la souveraineté numérique</p>
|
|
<div style="margin-top: 50px; text-align: center;">
|
|
<p style="font-size: 1.3rem; font-weight: 600;"><strong>Telecom Nancy</strong></p>
|
|
<p style="font-size: 1.1rem;">Tom & Collaborateur</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide">
|
|
<div class="content">
|
|
<h2>Les Protocoles de Messagerie : C'est quoi la Sécurité ?</h2>
|
|
<div class="grid">
|
|
<div class="feature-card">
|
|
<h3>Les Fondamentaux (C.I.D.A)</h3>
|
|
<ul>
|
|
<li><strong>Confidentialité :</strong> Seul le destinataire lit votre secret.</li>
|
|
<li><strong>Intégrité :</strong> Le message n'a pas été trafiqué.</li>
|
|
<li><strong>Authentification :</strong> Qui a vraiment envoyé ça ?</li>
|
|
<li><strong>Disponibilité :</strong> Le service doit toujours être là.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h3>L'Ère Moderne (Post-Snowden)</h3>
|
|
<ul>
|
|
<li><strong>E2EE :</strong> Le serveur est aveugle.</li>
|
|
<li><strong>PFS :</strong> Le passé reste privé, même si une clé est volée.</li>
|
|
<li><strong>Auto-guérison :</strong> On se 'répare' après une attaque.</li>
|
|
<li><strong>Déniabilité :</strong> On ne peut pas prouver que vous avez dit ça.</li>
|
|
<li><strong>Asynchronisme :</strong> Parler même si l'autre dort.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide">
|
|
<div class="content">
|
|
<h2>Historique 🚀 De l'Email au RCS</h2>
|
|
<div class="timeline">
|
|
<div class="timeline-item">
|
|
<span class="date">1982-1992</span>
|
|
<p><strong>SMTP (Email) & SMS :</strong> Messages en clair, stockés par les opérateurs.
|
|
<span class="badge">Zéro Sécurité</span></p>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<span class="date">Années 2000</span>
|
|
<p><strong>Sécurité de Transport (TLS) :</strong> Chiffrement entre vous et le serveur. Mais le serveur lit tout !
|
|
<span class="badge">Hop-by-Hop</span></p>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<span class="date">2008-2020</span>
|
|
<p><strong>RCS (GSMA/Google) :</strong> Le "SMS 2.0". Google impose l'E2EE pour le 1:1.
|
|
<span class="badge">Danger Fallback SMS</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide">
|
|
<div class="content">
|
|
<h2>Les Pionniers du Chiffrement E2EE</h2>
|
|
<div class="grid">
|
|
<div class="feature-card">
|
|
<h3>PGP (1991) <span class="badge">Asynchrone</span></h3>
|
|
<ul>
|
|
<li>La crypto pour les masses.</li>
|
|
<li>Garantit C.I.A.D.</li>
|
|
<li class="cross">MAIS : Clés statiques = pas de PFS !</li>
|
|
<li class="cross">Si la clé est compromise, tout le passé est lisible.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h3>OTR (2004) <span class="badge">PFS</span> <span class="badge">Déniabilité</span></h3>
|
|
<ul>
|
|
<li>Invente la Confidentialité Persistante !</li>
|
|
<li class="cross">Problème de "poignée de main" : Bob doit être en ligne.</li>
|
|
<li class="cross">Synchrone : Incompatible avec nos réseaux mobiles.</li>
|
|
<li class="cross">"Session broken" à la moindre coupure.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide">
|
|
<div class="content">
|
|
<h2>2013 : La Révolution Signal ✨</h2>
|
|
<div class="grid">
|
|
<div class="feature-card">
|
|
<h3>Le Génie Technique</h3>
|
|
<ul>
|
|
<li><strong>X3DH :</strong> L'asynchronisme de PGP avec la PFS d'OTR.</li>
|
|
<li><strong>Double Ratchet :</strong> La clé change à chaque message !</li>
|
|
<li><strong>Auto-guérison :</strong> Éjecte l'attaquant automatiquement.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="feature-card" style="background: rgba(0,255,255,0.1); border-color: var(--accent-f);">
|
|
<h3>Son Impact Global</h3>
|
|
<ul>
|
|
<li><span class="date">2016 :</span> Adopté par <strong>WhatsApp</strong> (2 milliards d'utilisateurs).</li>
|
|
<li>Implémenté dans <strong>Google Messages (RCS)</strong>, <strong>Messenger</strong>, <strong>Skype</strong>.</li>
|
|
<li><span class="date">2023 :</span> Lancement de <strong>PQXDH</strong> (Post-Quantique Ready !).</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide">
|
|
<div class="content">
|
|
<h2>Comparaison Générale des Protocoles</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Critère</th>
|
|
<th>SMS/Email</th>
|
|
<th>PGP</th>
|
|
<th>OTR</th>
|
|
<th>Signal</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>Confidentialité (E2EE)</td><td class="cross">❌</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é (Asynch.)</td><td class="check">✅</td><td class="check">✅</td><td class="cross">❌</td><td class="check">✅</td></tr>
|
|
<tr><td>PFS (Passé sécurisé)</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>
|
|
<tr><td>Déniabilité</td><td class="cross">❌</td><td class="cross">❌</td><td class="check">✅</td><td class="check">✅</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide">
|
|
<div style="text-align: center;">
|
|
<h1 style="font-size: 5rem;">Le Cœur Technique de Signal</h1>
|
|
<p class="big-text">Place à Tom & au tableau blanc !</p>
|
|
<div class="axolotl">🦦</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide">
|
|
<div class="content">
|
|
<h2>Signal : Au-delà de l'Appli</h2>
|
|
<div class="grid">
|
|
<div class="feature-card">
|
|
<h3>L'Application Signal</h3>
|
|
<ul>
|
|
<li>Développé par une ONG (Signal Foundation).</li>
|
|
<li>Zéro pub, zéro métadonnées.</li>
|
|
<li>La référence pour la vie privée.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h3>Le Protocole Signal partout !</h3>
|
|
<ul>
|
|
<li><span class="badge">WhatsApp</span> 2 milliards d'utilisateurs.</li>
|
|
<li><span class="badge">Google Messages (RCS)</span> Android.</li>
|
|
<li><span class="badge">Facebook Messenger</span> "Conversations secrètes".</li>
|
|
<li><span class="badge">Skype</span> "Conversations privées".</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide">
|
|
<div class="content">
|
|
<h2>Les Limites Actuelles ⚠️</h2>
|
|
<div class="grid">
|
|
<div class="feature-card" style="border-color: var(--danger-f);">
|
|
<h3>La Menace Quantique</h3>
|
|
<p>Les algorithmes actuels sont vulnérables aux futurs ordinateurs quantiques (risque "Harvest Now, Decrypt Later").</p>
|
|
<p class="big-text">➡️ Réponse : PQXDH !</p>
|
|
</div>
|
|
<div class="feature-card" style="border-color: var(--danger-f);">
|
|
<h3>Compromission des Téléphones</h3>
|
|
<p>Si un spyware (Pegasus) infecte l'OS, la crypto est contournée. La sécurité dépend de l'OS.</p>
|
|
</div>
|
|
<div class="feature-card" style="border-color: var(--danger-f);">
|
|
<h3>Attaques Man-in-the-Middle</h3>
|
|
<p>Un serveur compromis peut substituer des clés. Nécessite vérification manuelle des "Safety Numbers".</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide">
|
|
<div class="content">
|
|
<h2>Signal vs Discord vs Matrix : Philosophie !</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Critère</th>
|
|
<th>Signal</th>
|
|
<th>Discord</th>
|
|
<th>Matrix (Element)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>Modèle Réseau</td><td>Centralisé</td><td>Centralisé</td><td class="check">Décentralisé (Fédéré)</td></tr>
|
|
<tr><td>E2EE par défaut</td><td class="check">✅ Oui (Partout)</td><td class="cross">❌ (Sauf A/V - DAVE)</td><td class="check">✅ Oui</td></tr>
|
|
<tr><td>Métadonnées</td><td>Minimisées</td><td>Exploitées (Profilage)</td><td>Dépend du serveur</td></tr>
|
|
<tr><td>Gouvernance</td><td>Fondation (Non-profit)</td><td>Entreprise (Privée)</td><td class="check">Standard Ouvert</td></tr>
|
|
<tr><td>Souveraineté</td><td>Moyenne (USA)</td><td>Nulle</td><td class="check">Totale (Auto-hébergement)</td></tr>
|
|
</tbody>
|
|
</table>
|
|
<div style="margin-top: 25px;">
|
|
<p><strong>Discord :</strong> Priorité à l'UX communautaire et à la modération (texte en clair pour l'entreprise).</p>
|
|
<p><strong>Matrix :</strong> L'Internet de la messagerie. Pour la souveraineté (ex: Tchap pour l'État Français).</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide">
|
|
<h1 class="main-title">Conclusion</h1>
|
|
<div class="content" style="border-color: var(--secondary-f);">
|
|
<p class="big-text" style="text-align: center; color: var(--text-f);">
|
|
La sécurité en messagerie, ce n'est plus seulement le chiffrement.<br>
|
|
C'est une bataille pour la <strong>maîtrise des métadonnées</strong>,<br>
|
|
la <strong>résilience face à l'inconnu</strong>, et la <strong>souveraineté numérique</strong>.
|
|
</p>
|
|
<h2 style="text-align: center; margin-top: 40px; color: var(--accent-f);">Merci de votre attention !</h2>
|
|
<p style="text-align: center; font-size: 1.2rem; color: var(--primary-f);">Des questions ?</p>
|
|
</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() {
|
|
slides.forEach((slide, index) => {
|
|
if (index === currentSlide) {
|
|
slide.classList.add('active');
|
|
} else {
|
|
slide.classList.remove('active');
|
|
}
|
|
});
|
|
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 === ' ') {
|
|
e.preventDefault(); // Empêche le défilement de la page avec la barre d'espace
|
|
nextSlide();
|
|
}
|
|
if (e.key === 'ArrowLeft') {
|
|
e.preventDefault();
|
|
prevSlide();
|
|
}
|
|
});
|
|
|
|
// Initialize the first slide
|
|
updateSlide();
|
|
</script>
|
|
|
|
</body>
|
|
</html> |