Merge pull request #32 from SilasBerger/feature/securelink-and-improv…

…ements

secureLINK, Kryptologie and various improvements

config/scriptsConfigs/teach.scriptsConfigs.yaml

@@ -5,13 +5,15 @@ gymnasium/informatik:
   mappings:
     - section: "/index.md"
       material: "/ScriptLandingPages/teach.gym.mdx"
-    - section: Netzwerke
+    - section: 01-Netzwerke
       material: Netzwerke
-    - section: Microbit/img
+    - section: 02-Kryptologie
+      material: Kryptologie
+    - section: 03-Microbit/img
       material: Microbit/img
-    - section: Microbit/index.mdx
+    - section: 03-Microbit/index.mdx
       material: Microbit/Der-Microbit.gym.mdx
-    - section: Microbit/01-Projektideen
+    - section: 03-Microbit/01-Projektideen
       material: Microbit/Projektideen-Python
 sekundarstufe/medien-und-informatik:
   markers:

content/material/Kryptologie/01-secureLink.mdx

@@ -0,0 +1,16 @@
+import Iframe from "@site/src/app/components/Iframe";
+
+# secureLINK
+Special Agent Charles Marsh benötigt Ihre Hilfe! Nutzen Sie Ihr Wissen über Kryptologie, um ihn bei zahlreichen
+spannenden Missionen zu unterstützen.
+
+:::warning[Seite im Aufbau]
+**Achtung:** Ihr Spielstand wird beim Verlassen der Seite **nicht** gespeichert.
+:::
+
+:::info[Genau lesen]
+Sie finden in der Konversation mit Special Agent Marsh sämtliche Informationen und Hinweise, die Sie zur Bewältigung
+Ihrer Missionen benötigen. Lesen Sie seine Nachrichten also sehr genau!
+:::
+
+<Iframe src={'https://securelink-demo.gbsl.website/?v=1'} />

content/material/Kryptologie/02-Spendenaufruf-Geburtstagsfeier/01-Aufgabenstellung.mdx

@@ -0,0 +1,83 @@
+import DefinitionList from "@site/src/app/components/DefinitionList";
+
+#  Aufgabenstellung
+<DefinitionList>
+  <dt>🎯 Ziel</dt>
+  <dd>Sie verstehen die Problematik hinter dem Fallbeispiel von Anja.</dd>
+  <dd>Sie entwickeln ein Lösungskonzept für dieses Problemschema.</dd>
+  <dt>⏱️ Zeit</dt>
+  <dd>ca. 20 Minuten</dd>
+  <dd>(oder gemäss Vorgabe der Lehrperson)</dd>
+  <dt>🛠️ Material</dt>
+  <dd>Laptop</dd>
+  <dd>bei Bedarf: Flipchart oder A3-Papier + Stifte (siehe [Vorbereitung](#vorbereitung))</dd>
+</DefinitionList>
+
+Die Problematik im Fallbeispiel von Anja lässt sich wie folgt beschreiben: Die Nachricht an sich ist nicht geheim; sie muss also nicht verschlüsselt werden. Die Empfänger möchten aber die **Authentizität** der Absenderin überprüfen können (_"Kommt die Nachricht wirklich von Anja?"_), weil Drittpersonen (Elvira) einen Anreiz haben, solche Nach-richten im Namen einer vertrauenswürdigen Person (Anja) zu fälschen.
+
+In den untenstehenden Aufgaben befassen Sie sich näher mit dieser Problematik und erarbeiten einen Lösungsvorschlag für Anja. Sollten Sie dabei mal nicht weiterkommen, dürfen Sie die **Tipp-Boxen** der Reihe nach als **Hilfe** heranziehen. Versuchen Sie aber auf jeden Fall, die Aufgabe **zuerst selbstständig und ohne diese Tipps** zu lösen!
+
+## Vorbereitung
+Falls Sie von Ihrer Lehrperson dazu keine Vorgaben erhalten haben, entscheiden Sie sich jetzt zuerst in der Gruppe für die Art des Dokuments, mit dem Sie Ihre Ergebnisse schriftlich festhalten wollen. Dazu hier ein paar Ideen:
+- Arbeiten Sie mit einem Word-Dokument, das sie an geeigneter Stelle abspeichern (zum Beispiel auf dem OneDrive Ihrer Schule).
+- Erstellen Sie ein Flipchart-Plakat.
+- Erstellen Sie ein Plakat auf einem A3- oder A4-Blatt.
+
+## Aufgabe 1: Eigenes Fallbeispiel
+Vergewissern Sie sich, dass Sie die [Beschreibung des Fallbeispiels](./) sorgfältig gelesen haben.
+
+Suchen Sie nun in der Gruppe nach einer **anderen Situation**, in der die **gleiche Problematik** auftreten könnte. Entwickeln Sie also ein eigenes Fallbeispiel, bei dem Sie das gleiche Problemschema beobachten können, wie bei Anja. Beschreiben Sie ihr Fallbeispiel in **2-3 Sätzen**. Halten Sie die Beschreibung in Ihrem [Dokument](#vorbereitung) unter der Überschrift _Eigenes Fallbeispiel_ fest.
+
+<details>
+  <summary>Tipp</summary>
+  <div>
+    ### Ein paar Ideen
+    - Party-Einladung(Adresse, Zeit, Kostüm?)
+    - Nachrichten von der Schule(z.B., dass eine Lektion ausfällt)
+    - Einverständniserklärung der Eltern
+    - Einladung auf den Minecraft-Server eines Freundes (Server-IP)
+  </div>
+</details>
+
+## Aufgabe 2: Lösungskonzept
+Entwickeln Sie nun ein **Lösungskonzept** für Anja. Wenn sie in Zukunft wieder einmal eine ähnliche Sammel-SMS verschickt, dann will sie einen solchen Identitätsbetrug auf jeden Fall verhindern. Mit Ihrem Konzept sollen die Empfängerinnen und Empfänger einer solchen SMS also **überprüfen** können, ob die **Nachricht tatsächlich von Anja** stammt. Treffen Sie dabei folgende Annahmen:
+
+:::info Annahmen
+1. Anja wird die Nachricht weiterhin als SMS versenden wollen. Durch Ihren Lösungsvorschlag sollte sich also nur am SMS-Text etwas ändern.
+2. Die Empfängerinnen und Empfänger der SMS-Nachricht müssen sie ihrerseits ebenfalls etwas tun, um die Authentizität des Absenders (sprich, Anja) zu überprüfen.
+3. In der Praxis würde man vermutlich ein Computerprogramm erstellen, um die Arbeitsschritte von Anja und den Empfängern zu automatisieren.
+4. Kryptographische Verfahren spielen eine zentrale Rolle bei der Erarbeitung dieses Lösungskonzepts.
+:::
+
+Halten Sie Ihr Lösungskonzept anschliessend in Ihrem [Dokument](#vorbereitung) unter der Überschrift _Lösungskonzept_ fest. Beschreiben Sie darin in wenigen Sätzen jeweils folgende Punkte:
+1. Was muss Anja tun?
+2. Was müssen die Empfängerinnen tun?
+3. Wie genau sorgt Ihr Lösungskonzept dafür, dass die Empfänger überprüfen können, ob eine Nachricht wirklich von Anja kommt?
+
+<details>
+  <summary>Tipps</summary>
+
+  <details>
+    <summary>Tipp 1</summary>
+    <span>Konzentrieren Sie sich auf asymmetrische Verschlüsselung.</span>
+  </details>
+
+  <details>
+    <summary>Tipp 2</summary>
+    <span>
+    Gehen Sie davon aus, dass die Empfänger Anjas Public Key kennen, respektive, diesen bei einer vertrauenswürdigen Quelle (z.B. dem Schul-Intranet) nachschauen können.
+  </span>
+  </details>
+
+  <details>
+    <summary>Tipp 3</summary>
+    <span>Wenden Sie das Konzept der asymmetrischen Verschlüsselung verkehrt herum an.</span>
+  </details>
+
+  <details>
+    <summary>Tipp 4</summary>
+    <span>
+    Was mit einem Public Key verschlüsselt wurde, kann nur mit dem dazugehörigen Private Key wieder entschlüsselt werden. Aber eben auch umgekehrt: Wenn etwas mit einem Private Key verschlüsselt wurde, kann es nur mit dem dazugehörigen Public Key wieder entschlüsselt werden.
+  </span>
+  </details>
+</details>

content/material/Kryptologie/02-Spendenaufruf-Geburtstagsfeier/_category_.json

@@ -0,0 +1,3 @@
+{
+  "label": "Spendenaufruf: Geburtstagsfeier"
+}

content/material/Kryptologie/02-Spendenaufruf-Geburtstagsfeier/index.mdx

@@ -0,0 +1,18 @@
+# Gute Absicht - Raffinierter Betrug
+::youtube[https://youtu.be/kheVp3zwSo8]
+
+Anjas Kollege Jan wird bald achtzehn. Zu diesem speziellen Anlass will sie unbedingt eine Überraschungsfeier für ihn organisieren - das wird natürlich nicht ganz billig. Anja entscheidet sich deshalb zu einem Spendenaufruf an der Schule und im Bekanntenkreis von Jan. Nachdem sie eine umfangreiche Kontaktliste erstellt hat, sendet sie an jede Handynummer per SMS folgende Nachricht:
+
+![Nachricht von Anja](img/nachricht-anja.png)
+
+Wer Anjas Projekt unterstützen möchte, kann nun also bei Twint einen Geldbeitrag eingeben, als Empfänger der Spende die Handynummer 079 123 45 67 angeben und so einen Beitrag an Jans Feier leisten. Doch es gibt ein Problem...
+
+Unter den Empfängern von Anjas Nachricht ist auch Elvira, die sogleich eine Chance auf schnelles Geld wittert: Was, wenn sie selbst solche Nachrichten in Anjas Namen verschickt, dort aber ihre eigene Handynummer angibt? Dann kommen alle Spenden zu ihr! Sie muss nur aufpassen, dass sie diese Nachricht nicht versehentlich an jemanden sendet, der ihre oder Anjas Handynummer kennt.
+
+![Gefälschte Nachricht von Elvira](img/nachricht-elvira.png)
+
+Tatsächlich erbeutet Elvira mit dieser Masche einen ordentlichen Betrag, bevor jemand merkt, dass etwas Merkwürdiges vor sich geht. Als Belinda sie darauf hinweist, dass wohl jemand in ihrem Namen Spenden ergaunert hat, macht Anja sich Gedanken. Hätte sie das verhindern können? Und wenn ja, wie?
+
+Ein klassischer Brief auf Papier wäre vielleicht besser gewesen, denkt sie sich. Den hätte sie nämlich unterschreiben können. Wirklich überzeugt ist sie von dieser Idee aber nicht: Erstens kennt wohl kaum jemand ihre Unterschrift. Zweitens liesse sich die ja auch ziemlich leicht fälschen – mindestens so gut, dass es niemandem auffällt, der nicht sehr genau hinschaut.
+
+Nein, denkt Anja, es muss eine bessere Lösung geben. Vielleicht findet sich in der Informatik ja das eine oder andere Prinzip, das sich hier anwenden lässt? Eine Art «digitale Unterschrift» im SMS... Das klingt doch nach einem Problem, das sich mit Kryptologie lösen lassen könnte.

content/material/Kryptologie/index.mdx

@@ -0,0 +1 @@
+# Kryptologie

content/material/Netzwerke/01-World-Wide-Web/01-Ablauf-Webseitenaufruf.mdx

@@ -1,93 +1,64 @@
 # Ablauf eines Webseitenaufrufs
-Wann immer in der Informatik zwei Parteien (in diesem Fall zwei Computer) miteinander kommunizieren wollen, müssen sich
-beide Seiten an gewisse Spielregeln halten, damit sie sich gegenseitig verstehen. Diese Spielregeln - wir bezeichnen sie
-in der Informatik als **Protokolle** - legen beispielsweise einen Handlungsablauf fest, oder sie definieren, wie ein
-bestimmtes Datenpaket aufgebaut sein muss.
+Immer wenn in der Informatik zwei Parteien (in diesem Fall zwei Computer) miteinander kommunizieren wollen, müssen sich beide Seiten an gewisse Spielregeln halten, damit sie sich gegenseitig verstehen. Diese Spielregeln bezeichnen wir in der Fachsprache als **Protokolle**. Sie legen beispielsweise einen Handlungsablauf fest, oder sie definieren, wie ein bestimmtes Datenpaket aufgebaut sein muss.
 
-In diesem Abschnitt verschaffen wir uns einen Überblick über den Ablauf eines Webseitenaufrufs, wie er durch das
-**Hypertext Transfer Protocol (HTTP)** festgelegt wird.
+:::definition[Protokoll]
+In der Informatik ist ein **Protokoll** (oder **Kommunikationsprotokoll**) eine Vereinbarung darüber, wie die Datenübertragung zwischen zwei oder mehreren Parteien ablaufen soll.
+:::
 
-Der erste Teilnehmer ist dabei der sogenannte **Browser** - also ein Programm auf dem Computer der Benutzerin, welches
-Webseiten aufrufen und anzeigen kann.
+In diesem Abschnitt verschaffen wir uns einen Überblick über den Ablauf eines Webseitenaufrufs, wie er durch das **Hypertext Transfer Protocol (HTTP)** festgelegt wird.
+
+## Die Teilnehmer
+Der erste Teilnehmer ist dabei der sogenannte **Browser** - also ein Programm auf dem Computer der Benutzerin, welches Webseiten aufrufen und anzeigen kann.
 
 :::definition[Browser]
-**Webbrowser** oder allgemein auch **Browser** (englisch: _to browse_, 'stöbern') sind Computerprogramme zur Darstellung
-von Webseiten im World Wide Web oder allgemein von Dokumenten und Daten.
+**Webbrowser** oder allgemein auch **Browser** (englisch: _to browse_, 'stöbern') sind Computerprogramme zur Darstellung von Webseiten im World Wide Web oder allgemein von Dokumenten und Daten.
 :::
 
-Der andere Teilnehmer ist ein zweiter (in der Praxis meist sehr leistungsstarker) Computer, welcher die von der
-Benutzerin gewünschte **Ressource**, nämlich die Webseite in form einer HTML-Datei, besitzt und öffentlich anbietet. Die
-beiden Seiten stehen sich also in einem sogenannten Client-Server-Verhältnis gegenüber. Der **Client** ist dabei
-konzeptuell die Partei, die um etwas bittet (in diesem Fall um eine HTML-Datei), der **Server** ist die Partei die etwas
-anbietet. Wir können dabei sowohl den Browser als auch den Computer der Benutzerin als Client bezeichnen - im Prinzip
-sogar die Benutzerin selbst.
+Der andere Teilnehmer ist ein zweiter (meistens sehr leistungsstarker) Computer, welcher gewisse **Ressourcen** besitzt und öffentlich anbietet. In unserem Beispiel handelt es sich bei dieser Ressource um die HTML-Datei, welche die Benutzerin gerne anzeigen möchte.
+
+Diese beiden Seiten stehen sich in einem sogenannten Client-Server-Verhältnis gegenüber. Dabei ist der **Server** diejenige Partei, die etwas anbietet. Der **Client** ist die Partei, die um etwas bittet: in diesem Fall um eine HTML-Datei. Wir können also sowohl den Browser als auch den Computer der Benutzerin als Client bezeichnen - im Prinzip sogar die Benutzerin selbst.
 
 :::definition[Client und Server]
-- Ein **Client** ist ein Programm oder ein Gerät, das Dienste von einem _Server_ abruft. Ein _Browser_ ist also ein
-Beispiel für einen Client.
-- Ein **Server** ist ein Programm oder Gerät, das auf die Kontaktaufnahme eines _Clients_ wartet, um eine bestimmte
-Dienstleistung für ihn zu erfüllen
+- Ein **Client** ist ein Programm oder ein Gerät, das Dienste von einem _Server_ abruft. Ein _Browser_ ist also ein Beispiel für einen Client.
+- Ein **Server** ist ein Programm oder Gerät, das auf die Kontaktaufnahme eines _Clients_ wartet, um eine bestimmte Dienstleistung für ihn zu erfüllen. Sehr oft handelt es sich bei den Dienstleistungen um das Anbieten von HTML-Dateien.
 :::
 
 ![Client, Server und URL](img/client-server.png)
 
-Im ersten Schritt sendet der Client nun eine **Anfrage (Request)** an den Server. Im Rahmen von HTTP, also bei einem
-Webseitenaufruf, tut er dies in Form einer URL. Die **URL** (Uniform Resource Locator) ist die Adresse der gewünschten
-Webseite im World Wide Web.
+## Der Ablauf
+Im ersten Schritt sendet der Client nun eine **Anfrage (Request)** an den Server. In seiner Anfrage muss er die Adresse des Servers, sowie den Ort der gesuchten Datei auf diesem Server angeben. Das macht er mit der sogenannten **URL** (_Uniform Resource Locator_) - dazu [später mehr](./02-Die-URL.mdx).
 
 ![HTTP-Webseitenaufruf, Schritt 1: Anfrage (Request)](img/http-request.png)
 
-Wenn der über diese Adresse erreichte Server (hier `info.cern.ch`) nun die gewünschte Ressource (hier das Dokument
-`/hypertext/WWW/TheProject.html`) besitzt und anbietet, so wird diese in der **Antwort (Response)** des Servers
-retourniert. Sie wird dazu in ein Paket gepackt, und darin als **Payload** (also als "eigentlicher Inhalt") des Pakets
-bezeichnet. Nebst der Payload enthält das Paket auch noch den sogenannten **Status Code**. Mehr Informationen dazu
-finden Sie im [nächsten Abschnitt](./02-Http-Status-Codes.mdx).
+Wenn der kontaktierte Server nun die gesuchte Datei am entsprechenden Ort findet, dann sendet er sie in seiner **Antwort (Response)** an den Client zurück[^1]. Die Datei wird dazu in ein Paket gepackt und darin als **Payload** (also als "eigentlicher Inhalt") des Pakets bezeichnet. Nebst der Payload enthält das Paket auch noch den sogenannten **Status Code**. Auch dazu [später mehr](./03-Http-Status-Codes.mdx).
 
 ![HTTP-Webseitenaufruf, Schritt 2: Antwort (Response)](img/http-response.png)
 
 :::definition[Payload]
-In der Datenübertragung ist die **Payload** derjenige Anteil eines Pakets, bei dem es sich um den eigentlichen Inhalt
-der Übertragung handelt. Bei einer _Response_ würde man zum Beispiel die angefragte HTML-Datei als Payload bezeichnen.
+In der Datenübertragung ist die **Payload** derjenige Anteil eines Pakets, bei dem es sich um den eigentlichen Inhalt der Übertragung handelt. Bei einer _Response_ würde man zum Beispiel die gesuchte HTML-Datei als Payload bezeichnen.
 
-Die Payload steht im Kontrast zu den sogenannten _Metadaten_ (auch _Steuerungsdaten_), also den übrigen
-Zusatzinformationen wie Adresse und Status Code, die zur erfolgreichen Übertragung nötig sind.
+Die Payload steht im Kontrast zu den sogenannten _Metadaten_ (auch _Steuerungsdaten_), also den übrigen Zusatzinformationen wie Adresse und Status Code, die zur erfolgreichen Übertragung nötig sind.
 :::
 
-Und damit ist die gesuchte Webseite auch bereits auf dem Computer der Benutzerin angelangt. Der Browser nimmt die
-erhaltene HTML-Datei nun entgegen und präsentiert deren Inhalt auf dem Bildschirm.
+Und damit ist die gesuchte Webseite auch bereits auf dem Computer der Benutzerin angelangt. Der Browser nimmt die erhaltene HTML-Datei nun entgegen und präsentiert deren Inhalt auf dem Bildschirm.
 
 ![HTTP-Webseitenaufruf, Schritt 3: Die Webseite ist angekommen](img/http-website-loaded.png)
 
-***
 :::key[Request-Response-Prinzip]
-Ein Webseitenaufruf erfolgt nach sogenannten **Request-Resopnse-Prinzip**: Der _Client_ sendet eine
-**Anfrage (Request)** an den _Server_. Diese Anfrage beinhaltet unter anderem Informationen darüber, welche Ressource
-(z.B. welche HTML-Datei) der Client in Anspruch nehmen möchte.
+Ein Webseitenaufruf erfolgt nach sogenannten **Request-Resopnse-Prinzip**: Der _Client_ sendet eine **Anfrage (Request)** an den _Server_. Diese Anfrage beinhaltet unter anderem Informationen darüber, welche Ressource (z.B. welche HTML-Datei) der Client in Anspruch nehmen möchte.
 
-Der Server sendet daraufhin eine **Antwort (Response)** an den Client zurück. In Regelfall enthält diese Antwort die
-angefragte Ressource, sowie einen [Status Code](./02-Http-Status-Codes.mdx).
+Der Server sendet daraufhin eine **Antwort (Response)** an den Client zurück. In Regelfall enthält diese Antwort die gewünschte Ressource, sowie einen [Status Code](./03-Http-Status-Codes.mdx).
 :::
-***
 
-Wie Sie sehen, regelt das Hypertext Transfer Protocol (HTTP) also einerseits den Ablauf eines Webseitenaufrufs in Form
-dieses Request-Response-Prinzips, bestimmt andererseits aber auch, wie diese Anfrage (Request) und die entsprechende
-Antwort (Response) auszusehen haben. Solange sich beide Parteien, also Client und Server, an diese Spielregeln halten,
-können wir sicherstellen, dass ein solcher Aufruf ordnungsgemäss funktioniert.
+Wie Sie sehen, regelt das Hypertext Transfer Protocol (HTTP) also einerseits den Ablauf eines Webseitenaufrufs in Form dieses Request-Response-Prinzips. Andererseits bestimmt es aber auch, wie diese Anfrage (Request) und die entsprechende Antwort (Response) aussehen müssen. Solange sich beide Parteien (Client und Server) an diese Spielregeln halten, können wir sicherstellen, dass ein solcher Aufruf ordnungsgemäss funktioniert.
 
-:::definition[Protokoll]
-In der Informatik und in der Telekommunikation ist ein **Protokoll** (oder **Kommunikationsprotokoll**) eine
-Vereinbarung, nach der die Datenübertragung zwischen zwei oder mehreren Parteien abläuft.
-:::
-
-Hier sehen Sie das Endergebnis nun noch einmal im Gesamtüberblick:
+Hier sehen Sie das Endergebnis nun noch einmal im Überblick:
 ![Der Webseitenaufruf im Überblick](img/http-overview.png)
 
-## Komplexere Webseiten
-Die meisten Webseiten bestehen heutzutage nicht mehr nur aus einer einzigen HTML-Datei. Dazu kommen meistens noch
-CSS-Dateien für das Styling, JavaScript-Dateien für gewisse Programmlogik, sowie Bilder und sonstige Medien.
+## Komplexe Webseiten
+Die meisten Webseiten bestehen heutzutage nicht mehr nur aus einer einzigen HTML-Datei. Dazu kommen meistens noch CSS-Dateien für die optische Gestaltung, JavaScript-Dateien für gewisse Programmlogik, sowie Bilder und sonstige Medien.
+
+Der Aufruf einer Webseite beginnt aber trotzdem immer mit dem Abruf eines HTML-Dokuments. Es ist anschliessend die Aufgabe des Browsers, die erhaltene HTML-Datei genau zu lesen und zu prüfen, welche weiteren Ressourcen darin verlinkt sind[^2]. Er wiederholt dann den oben beschrieben Request-Response-Prozess für all diese Ressourcen, bis er schlussendlich eine vollständig geladene Webseite darstellen kann.
 
-Der Abruf einer Webseite beginnt aber trotzdem immer mit dem Abruf eines HTML-Dokuments. Es ist anschliessend die
-Aufgabe des Browsers, die HTML-Datei genau anzuschauen und zu sehen, welche weiteren Ressourcen darin verlinkt sind
-(zum Beispiel mit `<link rel="stylesheet" href="style.css">`). Er wiederholt dann den oben beschrieben
-Request-Response-Prozess für all diese Ressourcen, bis er schlussendlich eine vollständig geladene Webseite darstellen
-kann.
+[^1]: Es ist auch möglich, dass ein Server die gesuchte Datei zwar findet, sie aber trotzdem nicht herausgibt. Das ist beispielsweise dann der Fall, wenn eine Ressource nur für spezifische, eingeloggte Benutzerinnen und Benutzer zugänglich sein soll.
+[^2]: Fall sie bereits mit HTML und CSS gearbeitet haben, dann haben Sie ihn Ihrer HTML-Datei vermutlich auch ein CSS-Stylesheet verlinkt: `<link rel="stylesheet" href="style.css">`.