Allgemeines

Diese Website ist im Rahmen der Maturaarbeit von Melvin Trösch im Fachbereich Informatik erstellt worden. Es handelt sich um ein Open-Source-Projekt. Der gesamte Code ist auf GitHub unter dem folgenden Link öffentlich zugänglich: https://github.com/FCBFAN05/Maturaarbeit_22.git Die Website soll eine Plattform bieten für die Veranschaulichung einer selbst entwickelten Verschlüsselungstechnik (Trösch's Verschlüsselungstechnik). Parallel dazu wird der Chiffrierungsprozess von Simple-DES veranschaulicht. Denn Simple-DES lieferte die Grundlage für Trösch's Verschlüsselungstechnik.

Server-Side-Rendering-Grafik
Bildquelle: © IONOS SE │ ionos.de

Es handelt sich hier um eine clientseitige Programmierung. Das bedeutet im Groben, dass der Programmiercode (z.B. JavaScript-Funktionen) vom Webbrowser des Benutzers ausgeführt wird und nicht von einem externen Server. Falls z.B. auf einer Webseite die Uhrzeit abgefragt wird, wird die Uhrzeit des Gerätes des Nutzers eingelesen und die Anfrage wird nicht noch an eine externe Stelle weitergeleitet.

Gender-Hinweis

Die Erläuterungen werden durch den vielschichtigen und anspruchsvollen Inhalt schnell komplex. Daher wird für einen möglichst guten Lesefluss und ein möglichst gutes Verständnis auf eine gendergerechte Sprache verzichtet. Mit Begriffen wie „Benutzer“ sind jeweils alle Geschlechter gemeint.

Erklärung des Aufbaus und des Codes dieser Website

Homepage

Homepage


Falls man die Website unter melvintroesch.ch aufruft gelangt man auf die Homepage. Dort werden der Sinn und Zweck der Website erklärt und die verschiedenen Möglichkeiten erläutert. Die Menüleiste zeigt an, dass es noch weitere Unterseiten gibt. Auf diese Unterseiten wird nun im nächsten Kapitel genauer eingegangen.

Unterseiten

Auf der Webpage Grundlagen und Begriffe können die allgemeinen Grundlagen zum Verständnis der Website und der Verschlüsselung erlernt werden.

Auf der Webpage Infos zur Website finden sich allgemeine Informationen über die Website sowie Erklärungen zum Code und zum Aufbau der Website.

Auf der Webpage Über Mich finden sich allgemeine Informationen zur Person Melvin Trösch und wie es zu dieser Website kam.

Die Webpage Verschlüsselung bildet den Kern dieser Website. Denn dort kann ein Buchstabe oder ein Text mithilfe von Simple-DES und Trösch’s Verschlüsselungstechnik verschlüsselt und wieder entschlüsselt werden. Daher wird Aufbau dieser Webpage mit HTML und die dazugehörenden JavaScript-Funktionen separat erklärt.

Websitebestandteile

Kopfzeile

Kopfzeile

Die Kopfzeile, in HTML angezeigt durch den header-Tag, ist bei allen Unterseiten analog aufgebaut. Er beinhaltet einen Titellink (href), der immer zur Startseite (index.html) zurückführt und die Navigationsleiste, womit die verschiedenen Webseiten miteinander verbunden sind. Die Menüleiste, angezeigt durch den nav-Tag, besteht aus einer ungeordneten Liste (ul) bestehend aus Links (href). Der folgende Codeabschnitt stammt aus der Datei index.html, also der Homepage. Dies sieht man am Zusatz class=“active“. Bei den anderen verlinkten Webseiten verhält es sich analog.

<header>
    <nav id="navbar">
        <div class="container">
            <ul>
                <li><a href="index.html" class="active">Start</a></li>
                <li><a href="grundlagen.html">Grundlagen und Begriffe</a></li>
                <li><a href="verschluesselung.html">Verschlüsselung</a></li>
                <li><a href="infos.html">Infos zur Website</a></li>
                <li><a href="about.html">Über mich</a></li>
            </ul>
        </div>
    </nav>
</header>

Inhaltsbereich

Inhalt
Screenshot mit Ausschnitt aus dem Inhaltsbereich der Homepage

Der Inhaltsbereich, indem Sie sich gerade befinden, wird in HTML durch den main-Tag angezeigt. Dieser Bereich ist auf jeder Unterseite individuell gestaltet, der Grundaufbau ist jedoch überall gleich. Jeder Abschnitt wird in verschiedene inhaltsbezogene Divisionen (div) aufgeteilt, die einerseits Titel (h2, h2, h3) enthalten, andererseits Text eingeschränkt durch p-Tags sowie Bilder (img) enthalten.
Hier ein Beispielcode:

<main>
    <div>
        <h2>Lorem Ipsum</h2>
        <p>Lorem Ipsum</p>
        <h2>Lorem Ipsum</h2>
        <img src="data/image.png" alt="Lorem Ipsum">
    </div>
    <div>
        <h3>Lorem Ipsum</h3>
        <p>Lorem Ipsum</p>
    </div>
</main>

Fusszeile

footer

Die Fusszeile, angezeigt durch den footer-Tag, sieht bei allen Webpages genau gleich aus innerhalb des footer-Bereichs gibt es zwei p-Tags. Der erste p-Tag ent-hält einen Link, der zum Anfang der Webseite führt. Dieser wird über eine Klasse (class) mit CSS rechts angeordnet. Der zweite p-Tag enthält das Copyright bzw. Urheberrecht, den Zweck der Arbeit und einen mailto-Link. Beim Klicken auf der Webseite auf diesen Link öffnet sich ein neues E-Mail-Fenster.

<footer class="container" id="footer">
    <p class="float-end"><a href="#">Back to top</a></p>
    <p class="float-md-end"></p>
    <p>© 2022 Melvin Trösch · Maturaarbeit Fach Informatik · <a href="mailto:info@melvintroesch.ch">info@melvintroesch.ch</a>
    </p>
</footer>

Webpage Verschlüsselung

Die Webseite Verschlüsselung ist die Wichtigste aller Webseiten dieser Website. Denn hier sieht man die Veranschaulichung des Verschlüsselungsprozesses. Aus diesem Grund wird der Webpage Verschlüsselung an dieser Stelle auch ein eigenes Kapitel gewidmet.

Eingabefelder und Buttons

Beim Betrachten dieser Webseite erkennt man beispielsweise Texteingabefelder (textarea) und Buttons (input type=“button“) zum Draufklicken. Diese sind jeweils mit einer JavaScript-Funktion (onclick=“JS-Funktion“) verbunden, die beim Drauf-klicken ausgeführt wird und etwas ausgibt in ein Textfeld (textarea). Der zum Textfeld gehörende label-Tag kann zwischen dem öffnenden und dem schliessenden Tag Text beinhalten, der den Inhalt des Textfeldes beschreibt. Zwischen den Buttons und den Textfeldern kommt häufig der br-Tag vor. Dieser steht für einen Zeilenumbruch.
Hierzu ein Beispielcode:

<input type="button" value="Umwandeln" onclick="JS-Funktion">
<br>
<label for="bits_S-DES_textarea">Ausgabe der Bits</label>
<textarea id="bits_S-DES_textarea"></textarea>

JavaScript-Funktionen verbunden mit HTML

Beim Draufklicken auf einen Button wird, wie oben bereits erwähnt, eine JavaScript-Funktion aufgerufen. In JavaScript sind die Funktionen für die verschiedenen Buttons innerhalb einer Funktion in einer Switch-Case-Verzweigung zusammengefasst. Dies hat den Vorteil, dass Prozesse nicht wiederholt werden müssen, sondern in Variablen abgespeichert und wieder aufgerufen werden können. Die Bits werden meist in Arrays abgespeichert, sodass sie einfacher bitweise verändert werden können.
Hierzu ein vereinfachter Beispielcode:

function button(Funktion) {
    let arrayUmBitsAbzuspeichern = []
        ...

    switch (Funktion) {
        case 1: // 1. Funktion
            break
        case 2: // 2. Funktion
            break
        ...
    }
}
Erklärung einer Funktion:

Eine Funktion innerhalb eines case-Tags kann wie folgt aussehen:

let eingabeText = document.getElementById("Id des Textfelds").value
// Text wird in Binärcode umgewandelt
switch (Funktion) {
    case 1:
        document.getElementById("Id des Textfelds").value = ""
        for (let i = 0; i < eingabeText.length; i++) {
            document.getElementById("Id des Textfelds").value += (bitcode-EingabeText[i] + " ")
        }
break

In dieser Funktion wird zuerst das Textfeld geleert, indem mit dem Befehl document.getElementById("Id des Textfelds").value der Inhalt des Textfelds aufgerufen wird. Danach wird der in Bitcode umgewandelte Eingabetext durch eine for-Schleife ausgegeben. Die Anzahl Wiederholungen des Prozesses hängen von der Anzahl Buchstaben ab, die verschlüsselt werden sollen. Um zwischen den Buchstaben in Binärzahlen einen Abstand zu erhalten, wird immer ein Leerzeichen dazu addiert.

Funktionelle Java-Script-Funktionen

Um die verschiedenen Chiffrierungsprozesse von Simple-DES und Trösch’s Verschlüsselungstechnik durchzuführen braucht es noch gewisse JavaScript-Funktionen, die nur innerhalb des JavasScript-Codes wieder aufgerufen werden und keine Verwendung haben innerhalb des HTML-Codes.

XOR-Funktion

Eine dieser im obigen Text erwähnten Funktionen ist die XOR-Funktion, die auf theoretischer Ebene im Kapitel 1.2.5 in der Einleitung erklärt wird.
Der Code dieser Funktion sieht wie folgt aus:

function XOR(Input1, Input2) {
    let bitsInput1 = []
    let bitsInput2 = []
    for (let i = 0; i < Input1.length; i++) {
        XORBits[i] = []
        for (let j = 0; j < Input1[0].length; j++) {
            bitsInput1[i] = Input1[i].substring(j, j + 1)
            bitsInput2[i] = Input2[i].substring(j, j + 1)
            if (bitsInput1[j] === bitsInput2[j]) {
                XORBits[i][j] = 0
            } else {
                XORBits[i][j] = 1
            }
        }
    }
    return XORBits
}

Input1 und Input2 werden in die XOR-Funktion, eingegeben und durch die substring-Funktion in einzelne Bits aufgeteilt und in einem eindimensionalen Array (bitsInput1 und bitsInput2) gespeichert. Die Bits der beiden Eingaben werden nun verglichen. Falls sie gleich sind (if) wird in einem zweidimensionalen Array (XOR-Bits) eine 0 gespeichert, falls nicht (else) wird in XOR-Bits eine 1 gespeichert. Dieser Vorgang wird durch zwei for-Schleifen so lange wiederholt, bis alle Bits von allen Bytes XOR-verrechnet wurden. Da mehrere Bytes verrechnet werden und alle Bits separat ausgegeben werden sollen durch die return-Funktion, ist XOR-Bits ein zweidimensionales Array.

Funktion S-Box Simple-DES

Eine weitere funktionelle JavaScript-Funktion ist die Funktion zum Abgleich mit den S-Boxen. Das Prinzip ist bei Simple-DES und bei Trösch’s Verschlüsselungstechnik gleich. Hier wird der Prozess anhand der S-Box des Simple-DES erklärt.

Die beiden S-Boxen des Simple-DES sind in einem zweidimensionalen Array gespeichert (sBox0 und sBox1). Das Prinzip der S-Boxen auf theoretischer Ebene kann unter Grundlagen und Begriffe nachgelesen werden.

let sBox0 = [["01","11","00","11"],["00","10","10","01"],["11","01","01","11"],
["10","00","11","10"]]
let sBox1 = [["00","10","11","10"],["01","00","00","01"],["10","01","01","00"],
["11","11","00","11"]]

Daneben gibt es zwei eindimensionale Arrays. In bitsAfterSBox werden die einzelnen errechneten Bits pro Durchgang temporär gespeichert. Dann werden sie mit concat zusammengefügt, im zweiten Array, bitcodeAfterSBox, gespeichert und schlussendlich mit der return-Funktion wiedergegeben.

let bitsAfterSBox = []
let bitcodeAfterSBox = []
bitcodeAfterSBox[i] = bitsAfterSBox[0].concat(bitsAfterSBox[1])
return bitcodeAfterSBox

Die einzelnen Bits aus einem zweidimensionalen Input-Array (Array, das beim Aufrufen der Funktion eingeben wird) werden innerhalb einer for-Schleife mit einer if/else if-Struktur systematisch mit den S-Boxen abgeglichen und so werden die «neuen» vier Bits errechnet.

function sBoxSDES(Input) {
…
for (let i = 0; i < Input.length; i++) {
    if (Input[i][0].toString().concat(Input[i][3].toString()) === "00" &&         Input[i][1].toString().concat(Input[i][2].toString()) === "00") {
        bitsAfterSBox[0] = sBox0[0][0]
    } else if (Input[i][0].toString().concat(Input[i][3].toString()) === "01" && Input[i][1].toString().concat(Input[i][2].toString()) === "00") {
        bitsAfterSBox[0] = sBox0[0][1]
    } …

    if (Input[i][4].toString().concat(Input[i][7].toString()) === "00" && Input[i][5].toString().concat(Input[i][6].toString()) === "00") {
    bitsAfterSBox[1] = sBox1[0][0]
    } else if (Input[i][4].toString().concat(Input[i][7].toString()) === "01" && Input[i][5].toString().concat(Input[i][6].toString()) === "00") {
    bitsAfterSBox[1] = sBox1[0][1]
    } …
    }
    …

CSS

Die Website würde ganz anders aussehen ohne CSS. Denn HTML liefert das Grundgerüst und JavaScript die Funktionalität. Erst durch CSS wird das Erscheinungsbild der Website ansehnlich gestaltet. In diesem Kapitel geht es darum einen Einblick in die Gestaltung mit CSS zu geben und aufzuzeigen, was der Code auslöst. Zur Professionalisierung der Gestaltung ohne unverhältnismässigen Zeit-aufwand wurde die Bibliothek von Bootstrap hinzugezogen.

Syntax

h1 {
    font-family: "Broadway", sans-serif;
    font-size: xxx-large;
    color: darkblue;
}

HTML-Elemente (z.B. h1, das für den grössten Titel steht) können in CSS allge-mein aufgerufen werden, um ihnen Attribute, wie die Farbe (color) oder die Schriftgrösse (font-size) und die Schriftart (font-family) zuzuweisen. Diese Attribu-te werden dann im gesamten Dokument für alle h1-Elemente übernommen.

Eine spezifische Gruppe von Elementen, dies können auch verschiedene HTML-Elemente (z.B. p und br) sein, kann durch eine Klasse (class) ausgewählt werden. In HTML sieht das wie folgt aus:

<br class="example">
<p class="example">Hello World!</p>

In CSS werden die Klassen aufgerufen, indem ein Punkt vor den Namen gesetzt wird:

.example {
    display: none;
}

Das Attribut display: none; führt dazu, dass der Absatz (br) und «Hello World!» ausgeblendet werden.

Vorher-Nachher

Die folgenden Ausschnitte aus der Website sollen illustrieren, wie gross die Auswirkungen auf das Aussehen der Website sind bei einer Anwendung von CSS.

navwithout
Navigationsleiste ohne CSS
navwith
Navigationsleiste mit CSS
footerwithout
Fusszeile ohne CSS
footerwith
Fusszeile mit CSS
navwithout
Ausschnitt aus dem Inhaltsbereich der Homepage ohne CSS
navwithout
Ausschnitt aus dem Inhaltsbereich der Homepage mit CSS
navwithout
Karussell der Homepage ohne CSS
navwithout
Karussell der Homepage mit CSS

Quellen/ Literatur

Infos zur Website

Bilder Startseite

Bilder Über Mich