[passwords] mostly done

index.html

@@ -14,7 +14,7 @@
       <tr><td>✓</td><td><a href="revealjs/snowden/handout.pdf">Snowden (handout)</a></td></tr>
       <tr><td>✓</td><td><a href="revealjs/alternative_energy/">Alternative Energie</a></td></tr>
       <tr><td>✓</td><td><a href="revealjs/alternative_energy/handout.pdf">Alternative Energie (handout)</a></td></tr>
-      <tr><td>WIP</td><td><a href="revealjs/passwords/">Passwörter</a></td></tr>
+      <tr><td>OK</td><td><a href="revealjs/passwords/">Passwörter</a></td></tr>
     </table>
   </body>
 </html>

revealjs/passwords/1-angriffsmethoden.md

@@ -1,3 +1,4 @@
+background-image="img/angriff.jpg"
 
 # Angriffsmethoden
 
@@ -25,7 +26,7 @@ background-image="img/wörterbuchangriff.jpg"
 <notes>
  * Einzelne Wörter und Wortkombinationen aus einer Liste von Wörtern
  * unter Umständen deutlich höhere Chancen
- * Vorkenntnisse: Sprache/Fachbegriffe/…
+ * Vorkenntnisse: Sprache
 </notes>
 
 ---
@@ -34,7 +35,7 @@ background-image="img/keyboard.jpg"
 ## Keylogger
 
 <notes>
- * von den 3 selntenste Methode
+ * von den 3 seltenste Methode
  * liest Tastenanschläge mit und speichert/sendet
  * Hard- („USB-Stick“) oder Software (Schadsoftware)
 </notes>

revealjs/passwords/2-sicher.md

@@ -2,11 +2,12 @@
 # Sichere Passwörter
 
 <notes>
- * mehrere Methoden und deren Sicherheit
+ * 3 Methoden
  * Abwägung Sicherheit/Einfachheit zu merken
 </notes>
 
 ---
+background-image="img/matrix.jpg"
 
 ## Zufällige Zeichen
 
@@ -16,11 +17,12 @@
 
 <notes>
  * 1​. Groß- und Kleinbuchstaben und Zahlen (62)
- * 2./3. Zeichenraum; alle 93 druckbaren ASCII-Zeichen
+ * 2./3. alle 93 druckbaren ASCII-Zeichen
  * sehr schwer zu merken, jedoch sehr sicher
 </notes>
 
 ---
+background-image="img/word-beginnings.jpg"
 
 ## Wortanfänge
 
@@ -48,6 +50,7 @@ background-image="img/dices.jpg"
  * zufällig aus einer Liste ausgesucht (Dopplungen möglich)
  * z.B. Liste mit 7776 (6⁵) Wörtern, jedes hat 5-Stellige Nummer
  * 5 mal würfeln pro Wort → rausschreiben/merken
+ * hier: 2 zufällige (!) Passwörter
  * sicher (da zufällig) und einfach zu merken
  * (Fiese Fragen: 13 Bit Entropie; 2^52 Möglichkeiten)
 </notes>

revealjs/passwords/3-passwortmanager.md

@@ -1,3 +1,4 @@
+background-image="img/keycabinet.jpg"
 
 # Passwortmanager
 
@@ -11,7 +12,7 @@
 ## KeePass
 
 <notes>
- * Empfelung
+ * Empfelung, gibt auch viele andere
  * Open Source, nahezu alle Plattformen
  * einfache Benutzung
  * Passwortgenerator

revealjs/passwords/4-speicherung.md

@@ -1,34 +1,25 @@
+background-image="img/servers.jpg"
 
 # Speicherung
 
 <notes>
  * sehr komplexes Thema, nur kurzer Überblick
  * starke Vereinfachung
+ * Passwörter nicht im Klartext gespeichert
 </notes>
 
 ---
 
 ## Hash
 
-`sha512sum("hallo") = 70b77b7546d42e83 … 0e8dafeb0939abcf`
+```none
+sha512sum("hallo") = 70b77b7546d42e83139316ec07d048672f5c4aa41a1fec329de6c18e6ef53e3cf7ad124a
+                     f18aec0b55a25adeb1051f47e8899921cfd9af560e8dafeb0939abcf
+```
 
 <notes>
  * Funktion; gleiche Eingabe → gleiche Ausgabe
  * nicht (in polynomialzeit) rückwärts
- * Beispiel (zeigen): gekürzt, Original 128 Stellen lang
- * Problem: häufiges Passwort („hallo“): immer gleicher hash
- * Herausfinden anhand einer <em>rainbow table</em> (Liste Klartext → Hash)
-</notes>
-
----
-
-## Salt
-
-`sha512sum("hallo" + "Jah8aech") = ebc21891 … f4f1ae36`
-`sha512sum("hallo" + "hoo8ahPe") = bd617e7c … 01d821e8`
-
-<notes>
- * Lösung: Salt
- * Anhängen einer zufälligen Zeichenkette an das Passwort im Klartext
- * Salt wird im Klartext (neben dem Passwort) gespeichert
+ * Beispiel (zeigen)
+ * empfohlener Hash: „argon2“
 </notes>

revealjs/passwords/5-ende.md

@@ -3,16 +3,15 @@
 
 ## Bildquellen
 
- * [Markus Spiske/Unsplash](https://unsplash.com/photos/iar-afB0QQw)
- * [Nhu Nguyen/Unsplash](https://unsplash.com/photos/IL1qSqEMNBo)
- * [Jonathan Petersson/Unsplash](https://unsplash.com/photos/a6N685qLsHQ)
- * Breaking Bad/AMC
+ * [Unsplash/Markus Spiske](https://unsplash.com/photos/iar-afB0QQw)
+ * [Unsplash/Jonathan Petersson](https://unsplash.com/photos/a6N685qLsHQ)
+ * [Unsplash/freestocks.org](https://unsplash.com/photos/CH6-cfiY2Yo)
+ * [Unsplash/Tim Evans](https://unsplash.com/photos/Uf-c4u1usFQ)
+ * [Wikimedia Commons/Victorgrigas](https://commons.wikimedia.org/wiki/File:Wikimedia_Foundation_Servers-8055_16.jpg)
+ * AMC/Breaking Bad
+ * Eigene Bilder: Public Domain/[CC0](https://creativecommons.org/publicdomain/zero/1.0/legalcode)
 
 <notes>
-## Zufällige Passwörter (Unix/POSIX)
-
-`tr -dc '!-~' < /dev/urandom |head -c 16`
-
 ## Häufigste Anfangsbuchstaben im Deutschen
 
 `SABegbsvaKMEGVFPdRDWTwHfkLhlzImZNnruUitJpOCjüoÜäöÄÖQcqX8Y923`

revealjs/passwords/img/brute-force.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="../../_assets/fonts/Iosevka/index.css">
+<style>
+body {
+  background-color: #222;
+  color: #fff;
+  font-family: "Iosevka sbruder";
+  font-size: 10vh;
+}
+
+span {
+  margin: 5vh 5vw;
+  position: absolute;
+}
+
+span#tl { top: 0; left: 0; }
+span#tr { top: 0; right: 0; }
+span#bl { bottom: 0; left: 0; }
+span#br { bottom: 0; right: 0; }
+</style>
+  </head>
+  <body>
+    <span id="tl"></span>
+    <span id="tr"></span>
+    <span id="bl"></span>
+    <span id="br"></span>
+<script>
+const desiredPasswords = ['hallo', 'passwort', '12345678', 'sicher']
+const initialPasswords = ['QZtn.', 'oaifraFG', 'D@A?CN;F', 'IHKYaR']
+const sleep = 15
+let intervals = []
+
+function next(c, d) {
+  if (c.length !== d.length) {
+    return '​'
+  }
+  for (i=0; i<c.length; i++) {
+    if (c[i] < d[i]) {
+      return c.substr(0, i) + String.fromCharCode(c.charCodeAt(i) + 1) + c.substr(i + 1)
+    }
+    else if (c[i] > d[i]) {
+      return c.substr(0, i) + String.fromCharCode(c.charCodeAt(i) - 1) + c.substr(i + 1)
+    }
+  }
+}
+
+window.addEventListener("message", (e) => {
+  console.log(e)
+  if (e.data === 'slide:start') {
+    document.querySelectorAll('span').forEach((el, idx) => intervals.push(setInterval(() => {
+      if (el.textContent === '') {
+        el.textContent = initialPasswords[idx]
+      }
+      if (el.textContent !== desiredPasswords[idx]) {
+        el.textContent = next(el.textContent, desiredPasswords[idx])
+      }
+      else {
+        setTimeout(() => el.textContent = '​', 1000)
+      }
+    }, sleep)))
+  }
+  else if (e.data === 'slide:stop') {
+    document.querySelectorAll('span').forEach(el => el.textContent = '')
+    intervals = intervals.filter(item => clearInterval(item))
+  }
+});
+</script>
+  </body>
+</html>
+