AlexBa16/htl-reverse-proxy-tls-lab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
3047413a412d5a2191684d812b9a51a126be2cca
htl-reverse-proxy-tls-lab/proxy/html/challenges.html
T

334 lines
12 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTL Workshop Challenges</title>
<style>
:root {
--bg: #081825;
--panel: #10273d;
--panel-soft: #163450;
--text: #e9f2fb;
--muted: #b7cbdf;
--accent: #4ecdc4;
--easy: #59d68a;
--medium: #ffd166;
--hard: #ff7b72;
--expert: #6fb6ff;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Fira Sans", "Segoe UI", sans-serif;
color: var(--text);
background:
radial-gradient(circle at 100% 0%, #1f4060 0%, transparent 45%),
radial-gradient(circle at 0% 100%, #14324a 0%, transparent 35%),
var(--bg);
min-height: 100vh;
padding: 1.2rem;
}
main {
width: min(1150px, 100%);
margin: 0 auto;
display: grid;
gap: 1rem;
}
.panel {
background: var(--panel);
border: 1px solid #315678;
border-radius: 14px;
padding: 1.1rem;
}
h1,
h2,
h3 {
margin-top: 0;
}
p,
li {
color: var(--muted);
line-height: 1.5;
}
a {
color: var(--accent);
}
code {
background: #0d1f31;
border: 1px solid #2d4f6e;
border-radius: 6px;
padding: 0.1rem 0.35rem;
}
pre {
background: #0b2133;
border: 1px solid #2b5578;
border-radius: 10px;
padding: 0.7rem;
overflow: auto;
}
.top-links {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.pill {
display: inline-block;
text-decoration: none;
background: #11314b;
border: 1px solid #2a5d84;
border-radius: 999px;
padding: 0.35rem 0.75rem;
}
.badge {
display: inline-block;
border-radius: 999px;
padding: 0.15rem 0.5rem;
font-size: 0.8rem;
font-weight: 700;
margin-bottom: 0.45rem;
}
.easy {
color: #08210f;
background: var(--easy);
}
.medium {
color: #312200;
background: var(--medium);
}
.hard {
color: #3b0905;
background: var(--hard);
}
.expert {
color: #031c37;
background: var(--expert);
}
details {
background: var(--panel-soft);
border: 1px solid #2d5577;
border-radius: 12px;
padding: 0.75rem 0.85rem;
margin-bottom: 0.7rem;
}
details:last-child {
margin-bottom: 0;
}
summary {
cursor: pointer;
font-weight: 700;
}
.kw {
color: #e9f2fb;
font-weight: 700;
}
</style>
</head>
<body>
<main>
<section class="panel">
<h1>Challenges - Reverse Proxy & TLS</h1>
<p>Fokus: manuelle Proxy-Konfiguration, saubere Security-Entscheidungen, TLS von Grund auf.</p>
<div class="top-links">
<a class="pill" href="/">Startseite</a>
<a class="pill" href="/hints.html">Hints</a>
<a class="pill" href="/solutions.html">Solutions</a>
<a class="pill" href="/service/a">Backend A</a>
<a class="pill" href="/service/b">Backend B</a>
</div>
</section>
<section class="panel">
<h2>Abgabe-Format (fuer jede Challenge)</h2>
<ul>
<li><span class="kw">1) Demo:</span> 1-3 Minuten, live zeigen.</li>
<li><span class="kw">2) Check:</span> Done-Check Command ausfuehren.</li>
<li><span class="kw">3) Erklaerung:</span> 2-3 Saetze: was, warum, Sicherheitswirkung.</li>
</ul>
</section>
<section class="panel">
<h2>Easy</h2>
<details open>
<summary><span class="badge easy">Easy</span> 1) Routing verstehen</summary>
<p><span class="kw">Ziel:</span> Verstehen, wie der Reverse Proxy Requests anhand des Pfads verteilt.</p>
<p><span class="kw">Muss:</span></p>
<ul>
<li><code>/service/a</code> und <code>/service/b</code> aufrufen.</li>
<li>Unterschied der Antworten erklaeren.</li>
<li>In 1 Satz erklaeren, welche <code>location</code> auf welchen <code>upstream</code> zeigt.</li>
</ul>
<p><span class="kw">Done-Check:</span></p>
<pre><code>curl http://localhost:8080/service/a
curl http://localhost:8080/service/b</code></pre>
</details>
<details>
<summary><span class="badge easy">Easy</span> 2) backend-c manuell hinzufuegen</summary>
<p><span class="kw">Ziel:</span> Proxy-Setup sinnvoll erweitern, ohne bestehenden Traffic zu brechen.</p>
<p><span class="kw">Dateien:</span> <code>docker-compose.yml</code>, <code>proxy/nginx.conf</code></p>
<p><span class="kw">Muss:</span></p>
<ul>
<li>Service <code>backend-c</code> in Compose anlegen.</li>
<li>In Nginx <code>upstream backend_c</code> und <code>location /service/c</code> konfigurieren.</li>
<li>Routing fuer A/B darf danach nicht kaputt sein.</li>
</ul>
<p><span class="kw">Done-Check:</span></p>
<pre><code>curl http://localhost:8080/service/c
curl http://localhost:8080/service/a
curl http://localhost:8080/service/b</code></pre>
</details>
<details>
<summary><span class="badge easy">Easy</span> 3) Eigene Route mit Rewrite</summary>
<p><span class="kw">Ziel:</span> URL-Design vom Backend entkoppeln.</p>
<p><span class="kw">Muss:</span></p>
<ul>
<li>Neue public Route (z. B. <code>/demo/a</code>) einbauen.</li>
<li>Intern auf bestehenden Backend-Pfad umbiegen (Rewrite oder eigene Route).</li>
<li>In der Demo erklaeren, warum solche Pfad-Abstraktion nuetzlich ist.</li>
</ul>
<p><span class="kw">Done-Check:</span></p>
<pre><code>curl http://localhost:8080/demo/a</code></pre>
</details>
</section>
<section class="panel">
<h2>Medium</h2>
<details>
<summary><span class="badge medium">Medium</span> 4) Security Headers setzen</summary>
<p><span class="kw">Ziel:</span> Browser-Schutzmechanismen bewusst aktivieren.</p>
<p><span class="kw">Muss:</span></p>
<ul>
<li><code>X-Content-Type-Options: nosniff</code></li>
<li><code>X-Frame-Options: DENY</code></li>
<li><code>Referrer-Policy: no-referrer</code></li>
</ul>
<p><span class="kw">Done-Check:</span></p>
<pre><code>curl -I http://localhost:8080/</code></pre>
<p><span class="kw">Abgabe:</span> kurz erklaeren, welchen Angriff jeder Header erschwert.</p>
</details>
<details>
<summary><span class="badge medium">Medium</span> 5) Interne Route absichern</summary>
<p><span class="kw">Ziel:</span> Zugangskontrolle direkt im Proxy umsetzen.</p>
<p><span class="kw">Muss:</span></p>
<ul>
<li>Route <code>/internal/status</code> einbauen.</li>
<li>Nur <code>127.0.0.1</code> erlauben, alle anderen verbieten.</li>
<li>Sinn der Route erklaeren (z. B. intern fuer Ops/Monitoring).</li>
</ul>
<p><span class="kw">Done-Check:</span></p>
<pre><code>curl -i http://localhost:8080/internal/status</code></pre>
</details>
<details>
<summary><span class="badge medium">Medium</span> 6) Logging verbessern</summary>
<p><span class="kw">Ziel:</span> Fehler schneller eingrenzen koennen.</p>
<p><span class="kw">Muss:</span></p>
<ul>
<li>Eigenes <code>log_format</code> mit Upstream-Daten erstellen.</li>
<li>Mindestens enthalten: <code>status</code>, <code>upstream_addr</code>, Timing.</li>
<li>Access Log auf das neue Format stellen.</li>
</ul>
<p><span class="kw">Done-Check:</span></p>
<pre><code>curl http://localhost:8080/service/a
./scripts/compose.sh logs reverse-proxy</code></pre>
</details>
</section>
<section class="panel">
<h2>Hard (TLS)</h2>
<details>
<summary><span class="badge hard">Hard</span> 7) HTTPS von 0 (Easy-RSA)</summary>
<p><span class="kw">Ziel:</span> Eigene PKI und TLS-Endpoint fuer den Proxy aufbauen.</p>
<p><span class="kw">Muss:</span></p>
<ul>
<li>Server-Zertifikat fuer <code>localhost</code> erstellen.</li>
<li>Proxy auf <code>443</code> erweitern (z. B. <code>8443:443</code>).</li>
<li>Root-CA importieren und ohne <code>-k</code> testen.</li>
</ul>
<p><span class="kw">Done-Check:</span></p>
<pre><code>curl https://localhost:8443/service/a</code></pre>
</details>
<details>
<summary><span class="badge hard">Hard</span> 8) HTTP -&gt; HTTPS Redirect</summary>
<p><span class="kw">Ziel:</span> Client sauber auf TLS umleiten.</p>
<p><span class="kw">Muss:</span></p>
<ul>
<li>Alle HTTP Requests nach HTTPS redirecten.</li>
<li><code>/healthz</code> darf optional auf HTTP bleiben.</li>
<li>Redirect-Statuscode + Location Header erklaeren.</li>
</ul>
<p><span class="kw">Done-Check:</span></p>
<pre><code>curl -I http://localhost:8080/service/a</code></pre>
</details>
<details>
<summary><span class="badge hard">Hard</span> 9) TLS Haertung + Chain Check + HSTS</summary>
<p><span class="kw">Ziel:</span> TLS nicht nur aktivieren, sondern sinnvoll haerten.</p>
<p><span class="kw">Muss:</span></p>
<ul>
<li>TLS auf 1.2/1.3 beschraenken.</li>
<li>HSTS Header setzen: <code>Strict-Transport-Security</code>.</li>
<li>Zertifikatskette pruefen und in der Demo erklaeren.</li>
</ul>
<p><span class="kw">Hinweis:</span> Im HTTP-Basissetup ist HSTS absichtlich noch nicht aktiv.</p>
<p><span class="kw">Done-Check:</span></p>
<pre><code>curl -I https://localhost:8443/service/a
openssl s_client -connect localhost:8443 -servername localhost</code></pre>
</details>
</section>
<section class="panel">
<h2>Bonus Expert</h2>
<details open>
<summary><span class="badge expert">Expert</span> 10) Wireshark: HTTP vs HTTPS sauber ausarbeiten</summary>
<p><span class="kw">Ziel:</span> Nachweisbar zeigen, was bei HTTP lesbar und bei HTTPS geschuetzt ist.</p>
<p><span class="kw">Muss:</span></p>
<ol>
<li>HTTP Capture auf Port <code>8080</code>, Request erzeugen, Klartext markieren.</li>
<li>HTTPS Capture auf Port <code>8443</code>, TLS Handshake markieren.</li>
<li>Pakete mit <code>ClientHello</code>, <code>ServerHello</code>, <code>Certificate</code> zeigen.</li>
<li>Kurze Analyse: Was sieht ein Angreifer im HTTP-Fall vs im HTTPS-Fall?</li>
</ol>
<p><span class="kw">Optional:</span> TLS Decrypt via <code>SSLKEYLOGFILE</code> und Unterschied vorher/nachher erklaeren.</p>
<p><span class="kw">Done-Check / Abgabe:</span></p>
<ul>
<li>Mindestens 3 Screenshots mit Markierungen.</li>
<li>3-5 Bulletpoints als technische Schlussfolgerung.</li>
<li>Ein Satz zu Grenzen der Methode (z. B. nur mit Keylog decryption).</li>
</ul>
</details>
</section>
</main>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink