diff options
Diffstat (limited to 'presentation/index.html')
| -rw-r--r-- | presentation/index.html | 785 |
1 files changed, 785 insertions, 0 deletions
diff --git a/presentation/index.html b/presentation/index.html new file mode 100644 index 0000000..87b0afd --- /dev/null +++ b/presentation/index.html @@ -0,0 +1,785 @@ +<!doctype html> +<html lang="de"> +<head> + <meta charset="utf-8"> + <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> + + <title>reveal.js</title> + + <link href="css/reset.css" rel="stylesheet"> + <link href="css/reveal.css" rel="stylesheet"> + <link href="css/theme/black.css" rel="stylesheet"> + + <!-- Theme used for syntax highlighting of code --> + <link href="lib/css/monokai.css" rel="stylesheet"> + + <link href="css/style.css" rel="stylesheet"> + + <!-- Printing and PDF exports --> + <script> + var link = document.createElement('link'); + link.rel = 'stylesheet'; + link.type = 'text/css'; + link.href = window.location.search.match(/print-pdf/gi) ? 'css/print/pdf.css' : 'css/print/paper.css'; + document.getElementsByTagName('head')[0].appendChild(link); + </script> +</head> +<body> +<div class="reveal"> + <div class="slides"> + <section data-markdown> + ## Einführung in die Kryptografie + Von Marvin Borner, TGI 11.1 + </section> + + <section> + <h2>Gliederung</h2> + <ol> + <li class="fragment">Einführung</li> <!-- Wieso, weshalb, warum? --> + <li class="fragment">Geschichte</li> + <li class="fragment">Grundlagen</li> + <li class="fragment">Ablauf der AES-Verschlüsselung</li> + <li class="fragment">AES Visualizer</li> + <li class="fragment">Quellen</li> + </ol> + </section> + + <section> + <h2>Einführung</h2> + </section> + + <section> + <h2>Geschichte</h2> + <table class="history" id="history"> + <tr> + <th>Name</th> + <th>Jahr</th> + </tr> + <tr class="fragment" data-fragment-index="1"> + <td>Egypten</td> + <td>1900 v.Chr.</td> + </tr> + <tr class="fragment" data-fragment-index="2"> + <td>Caesar Cipher</td> + <td>100 v.Chr.</td> + </tr> + <tr class="fragment" data-fragment-index="4"> + <td>...</td> + <td>...</td> + </tr> + <tr class="fragment" data-fragment-index="5"> + <td>Enigma</td> + <td>1933-1945</td> + </tr> + <tr class="fragment" data-fragment-index="6"> + <td>Lucifer → DES</td> + <td>1970 → 1976</td> + </tr> + <tr class="fragment" data-fragment-index="7"> + <td>AES/Rijndael</td> + <td>1998</td> + </tr> + </table> + <div class="fragment fade-in-then-out" data-fragment-index="3"> + <p>HALLO</p> + <p>+3</p> + <p>KDOOR</p> + </div> + </section> + + <section> + <h2>Grundlagen</h2> + + <section> + <h3>XOR</h3> + <table> + <tr> + <th>A</th> + <th>B</th> + <th>Y</th> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>0</td> + </tr> + </table> + </section> + + <section> + <h3>XOR-Cipher (⊕)</h3> + <p>BAUM → 0x42 0x41 0x55 0x4D → 01000010 01000001 01010101 01001101</p> + <p>HUHU → 0x48 0x55 0x48 0x55 → 01001000 01010101 01001000 01010101</p> + <table> + <tr> + <td> </td> + <td>01000010</td> + <td>01000001</td> + <td>01010101</td> + <td>01001101</td> + <td>(BAUM)</td> + </tr> + <tr> + <td>⊕</td> + <td>01001000</td> + <td>01010101</td> + <td>01001000</td> + <td>01010101</td> + <td>(HUHU)</td> + </tr> + <tr style="color: red"> + <td>=</td> + <td>00001010</td> + <td>00010101</td> + <td>00011101</td> + <td>00011000</td> + <td> </td> + </tr> + </table> + </section> + </section> + + <section> + <section> + <h2>AES-Verschlüsselung</h2> + </section> + + <section> + <h3>Matrix-Schreibweise</h3> + <div class="left" id="AES_1"> + <small class="description">ATTACK AT DAWN!</small> + </div> + <h3 class="fragment fixedCenter">⊕</h3> + <div class="right" id="AES_2"> + <small class="description">SOME 128 BIT KEY</small> + </div> + </section> + + <section> + <h3>XOR Text und Key</h3> + <div id="AES_3"> + <small class="description">12 1B 19 04 63 7A 12 79 74 62 0D 15 77 05 64 58</small> + </div> + </section> + + <section> + <h3>Key expansion</h3> + <div class="left" id="AES_4"> + <small class="description hidden">E1 21 86 F2 C1 10 B4 CA E1 52 FD 9E C1 19 B8 C7</small> + <small class="description">#1</small> + </div> + <p class="fixedCenter">...</p> + <div class="right" id="AES_5"> + <small class="description hidden">3E A2 22 A7 98 7A 5F 4A 38 DC 25 4F EC 19 FC 49</small> + <small class="description">#10</small> + </div> + </section> + + <section data-transition="zoom-out"> + <h3>Key expansion</h3> + <div id="AES_6"> + <small class="description">SOME 128 BIT KEY</small> + </div> + </section> + + <section data-transition="zoom"> + <h3>Key expansion</h3> + <div class="left"> + <table> + <tr> + <td> </td> + </tr> + <tr> + <td>K</td> + </tr> + <tr> + <td>E</td> + </tr> + <tr> + <td>Y</td> + </tr> + </table> + </div> + <p class="fixedCenter">→</p> + <div class="right"> + <table> + <tr> + <td>K</td> + </tr> + <tr> + <td>E</td> + </tr> + <tr> + <td>Y</td> + </tr> + <tr> + <td> </td> + </tr> + </table> + </div> + </section> + + <section data-transition="zoom"> + <h3>Key expansion (sbox)</h3> + <div class="left"> + <table> + <tr> + <td>K</td> + </tr> + <tr> + <td>E</td> + </tr> + <tr> + <td>Y</td> + </tr> + <tr> + <td> </td> + </tr> + </table> + </div> + <p class="fixedCenter">→ ?</p> + <p class="fragment fixedCenter"><br>←</p> + <div class="right"> + <table> + <tr> + <td>B3</td> + </tr> + <tr> + <td>6E</td> + </tr> + <tr> + <td>CB</td> + </tr> + <tr> + <td>B7</td> + </tr> + </table> + </div> + </section> + + <section data-transition="zoom"> + <h3>Key expansion (rounding)</h3> + <div class="left"> + <table> + <tr> + <td>B3</td> + </tr> + <tr> + <td>6E</td> + </tr> + <tr> + <td>CB</td> + </tr> + <tr> + <td>B7</td> + </tr> + </table> + </div> + <h3 class="fixedFirstThird">⊕</h3> + <div class="fixedCenter"> + <table> + <tr> + <td>01</td> + </tr> + <tr> + <td>00</td> + </tr> + <tr> + <td>00</td> + </tr> + <tr> + <td>00</td> + </tr> + </table> + </div> + <h3 class="fixedThird">→</h3> + <div class="right"> + <table> + <tr> + <td>B2</td> + </tr> + <tr> + <td>6E</td> + </tr> + <tr> + <td>CB</td> + </tr> + <tr> + <td>B7</td> + </tr> + </table> + </div> + </section> + + <section data-transition="zoom"> + <h3>Key expansion (XOR 1. column)</h3> + <div class="left"> + <table> + <tr> + <td>S</td> + </tr> + <tr> + <td>O</td> + </tr> + <tr> + <td>M</td> + </tr> + <tr> + <td>E</td> + </tr> + </table> + </div> + <h3 class="fixedFirstThird">⊕</h3> + <div class="fixedCenter"> + <table> + <tr> + <td>B2</td> + </tr> + <tr> + <td>6E</td> + </tr> + <tr> + <td>CB</td> + </tr> + <tr> + <td>B7</td> + </tr> + </table> + </div> + <h3 class="fixedThird">→</h3> + <div class="right"> + <table> + <tr> + <td>E1</td> + </tr> + <tr> + <td>21</td> + </tr> + <tr> + <td>86</td> + </tr> + <tr> + <td>F2</td> + </tr> + </table> + </div> + </section> + + <section data-transition="zoom"> + <h3>Key expansion (XOR 2. column)</h3> + <div class="left"> + <table> + <tr> + <td> </td> + </tr> + <tr> + <td>1</td> + </tr> + <tr> + <td>2</td> + </tr> + <tr> + <td>8</td> + </tr> + </table> + </div> + <h3 class="fixedFirstThird">⊕</h3> + <div class="fixedCenter"> + <table> + <tr> + <td>E1</td> + </tr> + <tr> + <td>21</td> + </tr> + <tr> + <td>86</td> + </tr> + <tr> + <td>F2</td> + </tr> + </table> + </div> + <h3 class="fixedThird">→</h3> + <div class="right"> + <table> + <tr> + <td>E1</td> + </tr> + <tr> + <td>10</td> + </tr> + <tr> + <td>B4</td> + </tr> + <tr> + <td>CA</td> + </tr> + </table> + </div> + </section> + + <section data-transition="zoom"> + <h3>Key expansion (XOR 3. column)</h3> + <div class="left"> + <table> + <tr> + <td> </td> + </tr> + <tr> + <td>B</td> + </tr> + <tr> + <td>I</td> + </tr> + <tr> + <td>T</td> + </tr> + </table> + </div> + <h3 class="fixedFirstThird">⊕</h3> + <div class="fixedCenter"> + <table> + <tr> + <td>C1</td> + </tr> + <tr> + <td>10</td> + </tr> + <tr> + <td>B4</td> + </tr> + <tr> + <td>CA</td> + </tr> + </table> + </div> + <h3 class="fixedThird">→</h3> + <div class="right"> + <table> + <tr> + <td>E1</td> + </tr> + <tr> + <td>52</td> + </tr> + <tr> + <td>FD</td> + </tr> + <tr> + <td>9E</td> + </tr> + </table> + </div> + </section> + + <section data-transition="zoom-in slide-out"> + <h3>Key expansion (XOR 4. column)</h3> + <div class="left"> + <table> + <tr> + <td> </td> + </tr> + <tr> + <td>K</td> + </tr> + <tr> + <td>E</td> + </tr> + <tr> + <td>Y</td> + </tr> + </table> + </div> + <h3 class="fixedFirstThird">⊕</h3> + <div class="fixedCenter"> + <table> + <tr> + <td>E1</td> + </tr> + <tr> + <td>52</td> + </tr> + <tr> + <td>FD</td> + </tr> + <tr> + <td>9E</td> + </tr> + </table> + </div> + <h3 class="fixedThird">→</h3> + <div class="right"> + <table> + <tr> + <td>C1</td> + </tr> + <tr> + <td>19</td> + </tr> + <tr> + <td>B8</td> + </tr> + <tr> + <td>C7</td> + </tr> + </table> + </div> + </section> + + <section> + <h3>Key expansion</h3> + <div class="left" id="AES_7"> + <small class="description hidden">E1 21 86 F2 C1 10 B4 CA E1 52 FD 9E C1 19 B8 C7</small> + <small class="description">#1</small> + </div> + <div class="fragment"> + <p class="fixedCenter">...</p> + <div class="right" id="AES_8"> + <small class="description hidden">3E A2 22 A7 98 7A 5F 4A 38 DC 25 4F EC 19 FC 49</small> + <small class="description">#10</small> + </div> + </div> + </section> + + <section> + <h3>Verschlüsselung</h3> + <table class="fragment"> + <tr> + <th>Wiederholungen</th> + <th>Key size</th> + </tr> + <tr> + <td style="color: red">9</td> + <td>128</td> + </tr> + <tr> + <td>11</td> + <td>192</td> + </tr> + <tr> + <td>13</td> + <td>256</td> + </tr> + </table> + </section> + + <section> + <h3>Verschlüsselung</h3> + <p>XOR Text und Key</p> + <div id="AES_9"> + <small class="hidden description">12 1B 19 04 63 7A 12 79 74 62 0D 15 77 05 64 58</small> + </div> + </section> + + <section> + <h3>Verschlüsselung</h3> + <p>Confusion (sBox)</p> + <div class="left" id="AES_10"> + <small class="hidden description">12 1B 19 04 63 7A 12 79 74 62 0D 15 77 05 64 58</small> + </div> + <p class="fixedCenter">→ ?</p> + <div class="right fragment" id="AES_11"> + <small class="hidden description">C9 AF D4 F2 FB DA C9 B6 92 AA D7 59 F5 6B 43 6A</small> + </div> + </section> + + <section data-transition="slide-in zoom-out"> + <h3>Verschlüsselung</h3> + <p>Diffusion 1</p> + <table> + <tr> + <td> </td> + <td> </td> + <td> </td> + <td>C9</td> + <td>F8</td> + <td>92</td> + <td>F5</td> + </tr> + <tr> + <td> </td> + <td> </td> + <td style="color: red;">AF</td> + <td>DA</td> + <td>AA</td> + <td>6B</td> + <td>←</td> + </tr> + <tr> + <td> </td> + <td style="color: red;">D4</td> + <td style="color: red;">C9</td> + <td>D7</td> + <td>43</td> + <td>←</td> + <td> </td> + </tr> + <tr> + <td style="color: red;">F2</td> + <td style="color: red;">B6</td> + <td style="color: red;">59</td> + <td>6A</td> + <td>←</td> + <td> </td> + <td> </td> + </tr> + </table> + </section> + + <section data-transition="zoom-in"> + <h3>Verschlüsselung</h3> + <p>Diffusion 1</p> + <table> + <tr> + <td>C9</td> + <td>F8</td> + <td>92</td> + <td>F5</td> + </tr> + <tr> + <td>DA</td> + <td>AA</td> + <td>6B</td> + <td style="color: red;">AF</td> + </tr> + <tr> + <td>D7</td> + <td>43</td> + <td style="color: red;">D4</td> + <td style="color: red;">C9</td> + </tr> + <tr> + <td>6A</td> + <td style="color: red;">F2</td> + <td style="color: red;">B6</td> + <td style="color: red;">59</td> + </tr> + </table> + </section> + + <section> + <h3>Verschlüsselung</h3> + <p>Diffusion 2</p> + <div class="left" id="AES_12"> + <small class="description hidden">C9 DA D7 6A FB AA 43 F2 92 6B D4 B6 F5 AF C9 59</small> + </div> + <p class="fixedCenter">→<br>MIX</p> + <div class="fragment right" id="AES_13"> + <small class="description hidden">41 6E 18 99 B9 83 DA 00 E0 95 8B 65 8B A9 38 D0</small> + </div> + </section> + + <section data-transition="none-out slide-in"> + <h3>Verschlüsselung</h3> + <p>XOR Round Key</p> + <div class="left" id="AES_14"> + <small class="description hidden">41 6E 18 99 B9 83 DA 00 E0 95 8B 65 8B A9 38 D0</small> + </div> + <p class="fixedCenter">⊕</p> + <div class="right" id="AES_15"> + <small class="description hidden">E1 21 86 F2 C1 10 B4 CA E1 52 FD 9E C1 19 B8 C7</small> + </div> + </section> + + <section data-transition="none slide-out"> + <h3>Verschlüsselung</h3> + <p>End-Matrix der ersten Runde</p> + <div id="AES_16"> + <small class="description hidden">A0 4F 9E 6B 78 93 6E CA 01 C7 76 FB 4A B0 80 17</small> + </div> + </section> + + <section> + <h3>Verschlüsselung</h3> + <p>9-fache Wiederholung der Schritte...</p> + <div id="AES_17"> + <small class="description">7D 35 4E 8B 1D C4 29 A3 00 AB AC 87 C0 50 95 1A</small> + <br> + <small class="description">Endergebnis</small> + </div> + </section> + </section> + + <section> + <p>https://github.com/marvinborner/AESvisualizer/</p> + </section> + + <section> + <h2>Quellen</h2> + <small>http://www.moserware.com/2009/09/stick-figure-guide-to-advanced.html</small> + <small>https://kavaliro.com/wp-content/uploads/2014/03/AES.pdf</small> + <small>https://en.wikipedia.org/wiki/Rijndael_S-box</small> + <small>http://csrc.nist.gov/archive/aes/rijndael/Rijndael-ammended.pdf</small> + </section> + </div> +</div> + +<div style="display: none;"> + <table class="tableTemplate"> + <tr> + <td data-id="0"></td> + <td data-id="4"></td> + <td data-id="8"></td> + <td data-id="12"></td> + </tr> + <tr> + <td data-id="1"></td> + <td data-id="5"></td> + <td data-id="9"></td> + <td data-id="13"></td> + </tr> + <tr> + <td data-id="2"></td> + <td data-id="6"></td> + <td data-id="10"></td> + <td data-id="14"></td> + </tr> + <tr> + <td data-id="3"></td> + <td data-id="7"></td> + <td data-id="11"></td> + <td data-id="15"></td> + </tr> + </table> +</div> + +<script src="js/reveal.js"></script> +<script src="js/main.js"></script> + +<script> + // More info about config & dependencies: + // - https://github.com/hakimel/reveal.js#configuration + // - https://github.com/hakimel/reveal.js#dependencies + Reveal.initialize({ + controls: false, + dependencies: [ + {src: 'plugin/markdown/marked.js'}, + {src: 'plugin/markdown/markdown.js'}, + {src: 'plugin/notes/notes.js', async: true}, + {src: 'plugin/highlight/highlight.js', async: true} + ] + }); + Reveal.addEventListener('fragmentshown', event => { + if (event.fragment.parentNode.parentNode === document.getElementById("history")) { + Reveal.layout(); // Refresh layout + } + }); +</script> +</body> +</html> |