kew-pihole/praesi_revealJs/index.html

504 lines
20 KiB
HTML
Executable File

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>AdBlocking mit Pi-hole</title>
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/black.css">
<!-- Theme used for syntax highlighted code -->
<link rel="stylesheet" href="plugin/highlight/monokai.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h3>AdBlocking mit</h3>
<a href="https://pi-hole.net/">
<img src="https://wp-cdn.pi-hole.net/wp-content/uploads/2018/12/pihole-text-logo-white.png.webp" alt="pihole logo" style="height: 120px; margin: 0 auto 4rem auto; background: transparent;" class="pihole-logo">
</a>
<h3>Werbefreies Heimnetzwerk mit dem RaspberryPi<h3>
</section>
<section data-background="./images/denied.gif">
<h3>StuRa</h3>
</section>
<section>
<h2>$ tree</h2>
<pre>
<code>
contents
├── 1_uber_uns.txt
├── adtracking
│   ├── 2_tracking_pixel.txt
│   └── 3_real_time_bidding.txt
├── pi_hole
│   ├── 4_allgemein.txt
│   ├── 5_about_dns.txt
│   └── 5_tech_demo.txt
├── 6_fazit.txt
└── 7_quellen.txt
</code>
</pre>
</section>
<section style="background-image: url('images/ag-link_logo.png'); background-repeat: no-repeat; background-position: right; background-size: contain">
<div class="r-stack">
<h2 class="fragment fade-in-then-out">Wer sind wir?</h2>
<h2 class="fragment fade-in-then-out">AG Link</h2>
</div>
<p>AG für kritische Informatik an der Uni Leipzig</p>
<ul>
<li>[Plenum] Mittwochs 19:00 Uhr</li>
<li>[Web] https://ag-link.xyz</li>
<li>[Mail] ag-link@riseup.net</li>
<li>[Matrix] #ag-link:ag-link.xyz</li>
</ul>
<aside class="notes">
Die AG gibt es seit 2018
Wir sind Studierende und Menschen die Intesse an den Auswirkungen von Informatik und Digitalisierung auf gesellschaftlihce & pol. Fragen haben.
Info zu studieren oder programmieren zu können explizit KEINE voraussetzung
Interesse oder Ideen für themen? kommt vorbei!
</aside>
</section>
<!-- Kapitel 1: Werbetracking -->
<section>
<h1>Motivation</h1>
<h3>Werbung und Tracking</h3>
</section>
<section>
<h2>🍪 Cookies</h2>
<img class="fragment fade-up" src="https://user-images.githubusercontent.com/38752255/93235175-7ab6e280-f77d-11ea-9b8a-5a8c144344d7.gif" />
<aside class="notes" data-markdown="">
* muss man wenig sagen. Wir alle kennen die Banner
* Speichern lokal Details zu eurem Besuch bei einer Webseite (SessionID)
* Beschränkt auf die eingene Webseite -> Thrid party Cookies
Und hier wird es spannend. So gibt es zum beispiel sogenannt. TrackingPixel
</aside>
</section>
<!--Tracking Pixel-->
<section data-auto-animate data-background="whitesmoke">
<h2>Tracking Pixel</h2>
<div class="r-hstack justify-center">
<div data-id="box1" style="background: #191919; width: 40px; height: 40px; margin: 10px;"></div>
</div>
<aside class="notes" data-markdown>
Wirklich interessant werden die gesammelten informationen erst im kontext.
Betreiber verknüpfen mit
- Verhalten
- Informationen anderer Webseiten (wo kommst du her, wo gehst du hin?)
schauen wir uns das genauer an:
</aside>
</section>
<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
<h2 style="color: #191919;">Tracking Pixel</h2>
<div class="r-hstack justify-center">
<div data-id="box1" style="width: 2000px; height: 1000px; margin: 100%px;"></div>
</div>
</section>
<section>
<section>
<h2>Tracking Pixel</h2>
<ul>
<li>1x1 Pixel großes Bild im Code der Webseite (E-Mail). </li>
<li>Registriert Nutzerverhalten</li>
<li>Gebunden an eine Aktion</li>
</ul>
<br>
<p>Klassisch ist dies ein einfaches HTML Tag:</p>
<pre><code>
<img style="display: none;" src="/tracking">
</code></pre>
<aside class="notes" data-markdown>
* Werden heutzutagen eigentlich überall eingesetzt
* können sowohl auf Websites als auch in HTML Emails eingebunden werden
* Wenn jemand 1 Artikel in Warenkorb legt -> Pixel lößt aus
* Ermöglichen messen von ROI
</aside>
</section>
<section id="fragments" >
<h2>Gesammelt werden:</h2>
<ul>
<li class="fragment fade-up">IP Adresse (Liefert Informationen zu eurem ISP)</li>
<li class="fragment fade-up">Browser (Chrome, Firefox, etc.)</li>
<li class="fragment fade-up">Geräte Typ (Mobile, Desktop, Tablet)</li>
<li class="fragment fade-up">Betriebssystem (iOS, Android, Windows, etc.)</li>
<li class="fragment fade-up">Bildschirmgröße</li>
<li class="fragment fade-up">Referrer (Von wo aus ihr auf die Seite gelangt seit)</li>
</ul>
</section>
<section>
<h2>Das Ergebnis:</h2>
<ul>
<li class="fragment fade-up">Nachvollziehbares Verhalten sog. "conversions"</li>
<li class="fragment fade-up">Beavioural retargeting</li>
<li class="fragment fade-up">Cross-site tracking</li>
<li class="fragment fade-up">Insights und Metriken für BetreiberInnen</li>
<li class="fragment fade-up">Mehr Daten für Werbeplattformen</li>
</ul>
<aside class="notes">
-> Für Website BetreiberInnen lohnt sich der Einsatz, da so Metriken über Demografie und Verhalten der NutzerInnen verfügbar werden.
-> erlauben behavioural retargeting
-> FB profitiert in Form zusätzlicher Daten.
während das ganze also eine recht simple aber dafür sehr effektive Methode für Werbetreibende ist, ermöglichen diese Pixel es, schon ein sehr viel weiter reichendes Bild von NutzerInnen zu zeichnen als das bloß mit cookies der Fall wäre. Mögliche Rückschlüsse des Nutzerverhaltens umfassen:
* Wer hat wann welche Anzeige gesehen
* Hat das Anklicken einer Anzeige zum Abschluss eines Kaufs geführt?
* welche demografischen Merkmale haben Nutzer mit einer hohen Absprungrate
-> Datenschutzerklärung ist notwendig
</aside>
</section>
<section>
<img src="./images/Facebook-Pixel.png" alt="facebook pixel website" style="width: 600px; margin: 0 auto 4rem auto; background: transparent;" class="pihole-logo">
</section>
<section id="fragments">
<h2>Und was springt für uns dabei raus?</h2>
<ul>
<li style="display: inline-block;" class="fragment fade-left">* Personalisierte Werbeerfahrung.</li>
<li style="display: inline-block;" class="fragment fade-left">* Gezieltere Anzeigen führen häufiger zu Käufen.</li>
<li style="display: inline-block;" class="fragment fade-left">* Bessere generelle Nutzererfahrung durch Optimierung der Webseiten</li>
</ul>
<img class="fragment fade-down" style="height: 200px" src="images/shutuptakemymoney.gif">
</section>
</section>
<!-- RTB -->
<section>
<section>
<h2>Real Time Bidding (RTB)</h2>
</section>
<section>
<h2>Vokabular</h2>
<ul>
<li>DSP: Demand Side Platform</li>
<li>SSP: Supply Side Platform</li>
</ul>
</section>
<section data-background="images/Adservingfull.svg" data-background-size="contain" data-background-color="#fdf6e3">
</section>
<section>
<img src="./images/rtb.png">
</section>
<section>
<h2>Wichtige Organisationen</h2>
<ul>
<li>Interactive Advertising Bureau (IAB)</li>
<ul>
<li>OpenRTB</li>
</ul>
<li>Google</li>
<ul>
<li>Authorized Buyers Framework</li>
</ul>
</ul>
</section>
<section>
<h2>Bid Request</h2>
<ul>
<li>Request ID</li>
<li>IP Adresse (im Falle von ABF nur die ersten 3 Bytes)</li>
<li>Cookie IDs</li>
<li>User-Agent (Identifiziert den Browser und das Gerät)</li>
<li>Ort</li>
<li>Zeitzone</li>
<li>Systemsprache</li>
<li>Informationen zur Konsumentengruppe</li>
</ul>
</section>
<section>
<h2>IAB Inhalts-taxonomie </h2>
<ul>
<li>Herzkrankheiten</li>
<li>Psychische Gesundheit</li>
<li>Sexuelle Gesundheit</li>
<li>Ansteckende Krankheiten</li>
<li>uvm.</li>
</ul>
</section>
<section>
<h2>Google 'publisher verticals'</h2>
<ul>
<li>Reproductive Health</li>
<li>Substance Abuse</li>
<li>Health Condition</li>
<li>Politics</li>
<li>Ethnis & Identity Groups</li>
<li>uvm.</li>
</ul>
</section>
</section>
<section data-auto-animate>
<section>
<ul>
<li><em style="color: red">[0.00s]</em> J. öffnet eine URL und der Browser beginnt den Inhalt der Webseite zu laden</li>
<li><em style="color: red">[0.04s]</em> Die Webseite fragt die Werbebörse an</li>
<li><em style="color: red">[0.08s]</em> Die Werbebörse stellt einen Ad Request an mehrere DSPs</li>
<li><em style="color: red">[0.10s]</em> Die Werbebörse sendet jeder DSP J. Profil und die Webseitenkategorie</li>
</ul>
</section>
<section>
<ul>
<li><em style="color: red">[0.12s]</em> Jede DSP reichert (wenn möglich) J. Profil weiter an</li>
<li><em style="color: red">[0.125s]</em> Jede DSP berechnet den optimalen Einsatz für den Werbetreibenden</li>
<li><em style="color: red">[0.13s]</em> Jede DSP meldet den gesetzten Preis an die Werbebörse zurück</li>
<li><em style="color: red">[0.14s]</em> Die Börse bestimmt den Gewinner aus den DSP Antworten</li>
</ul>
</section>
<section>
<ul>
<li><em style="color: red">[0.18s]</em> Die Werbebörse sendet den Preis und die Anzeige an den Ad-Server der Webseite</li>
<li><em style="color: red">[0.19s]</em> Der Ad-Server gibt dem Browser vor, welche Werbung er darstellen soll</li>
<li><em style="color: red">[0.23s]</em> Der Ad-Server sendet die Werbung an den Browser</li>
<li><em style="color: red">[0.31s]</em> Browser stellt Werbung des Auktionsgewinners dar und signalisiert der siegreichen DSP das die Werbung gesehen worden ist</li>
</ul>
</section>
</section>
<section>
<h2>Why bother?</h2>
<ul>
<li class="fragment fade-left">Vereinfachen von Manipulation</li>
<li class="fragment fade-left">Energieverbrauch v. Werbenetzwerken</li>
<li class="fragment fade-left"> ... </li>
</ul>
<br>
<p class="fragment fade-left">https://www.sciencedirect.com/science/article/pii/S0195925517303505</p>
<aside class="notes" data-markdown>
Neben offensichtl. Argument der Privatsphäre gibt es noch weitere Gründe, warum das nicht so cool ist.
1. Ermöglicht manipulation (cambridge analytica) Je genauer das Bild desto effektiver
(Wahlkampf 2021 - alle etablierten Parteien nutzten Microtargeting. (Netzpolitik 2017)
FDP ("grüne Interessen", "Vielreisende").
2. Energieverbrauch: Der Stromverbrauch des Webenetzwerkes wird je nach Quelle auf
um die 110TWH / Jahr geschätzt.
um nur mal zwei aspekte zu nennen, euch fallen sicher noch weitere ein.
</aside>
</section>
<!-- Adblocking mit PiHole -->
<section>
<h2>Ad Blocking</h2>
<img src="./images/adblocked.png" style="width: 70vh;">
<p class="citation">Quelle: http://marketingland.com/wp-content/ml-loads/2015/09/ad-blocked3-ss-1920.png</p>
<aside class="notes" data-markdown>
eigentlicher Anlass unseres Vortrags:
* was können wir selbst tun, wenn wir unsere Daten und unser surfverhalten lieber für uns behalten wollen?
</aside>
</section>
<section>
<h2>Browser plugins</h2>
<ul>
<li class="fragment fade-right">Einfach einzurichten</li>
<li class="fragment fade-right">Beschränkt auf jeweil. Browser</li>
<li class="fragment fade-right">Nicht überall verfügbar (Smart TV, Innerhalb von Apps)</li>
<li class="fragment fade-right">Langweilig</li>
</ul>
<aside class="notes" data-markdown>
Das offensichtlichste Tool, sicher auch die meisten nutzen
</aside>
</section>
<section>
<section data-background="./images/blackhole.gif">
<h2 class="fragment fade-down">PiHole</h2>
<br><br><br><br><br><br><br><br>
<p class="citation">Quelle: https://media.giphy.com/media/SVCSsoKU5v6ZJLk07n/giphy.gif</p>
<aside class="notes" data-markdown>
Viel cooler wäre es doch, wenn wir uns auf unseren geräten überhaupt nicht mehr mit irgendwelchen plugins rumärgern müssten.
Quasi ein schwarzes loch für werbung
</aside>
</section>
<section>
<h2>Was ist ein PiHole?</h2>
<h3 class="fragment fade-up">= DNS-Sinkhole</h3>
<div style="overflow: hidden;" >
<div style="display: inline-block; padding-right: 50px;"><img src="images/raspberry.jpeg" style="width: 250px; " /></div>
<div style="display: inline-block; padding: 50px; vertical-align: top;"><h3>+</h3></div>
<div style="display: inline-block; vertical-align: top; padding: 30px;"><img class="box" src="https://wp-cdn.pi-hole.net/wp-content/uploads/2018/12/pihole-text-logo-white.png.webp" style="width: 250px;"/></div>
</div>
<br>
<p class="citation">Quelle: https://hackaday.com/wp-content/uploads/2015/02/pibig.jpg</p>
<aside class="notes" data-markdown>
* Ein pi hole ist ein Werbefilter für eurer WLAN.
* "pi hole" = eine OpenSource software
* Der Name "Pi" kommt von raspberryPi - einem microcomputer (der sich in eurem WLAN befindet)
* Euer router wird so konfiguriert, dass er jede anfrage erstmal an den pi sendet, der dann entscheidet ob sie durch darf oder nicht.
-> Man spricht auch von einem DNSSinkhole
Um zu verstehen wie genau das funktioniert müssen wir erst verstehen was DNS ist.
</aside>
</section>
</section>
<section>
<section>
<h2>Was ist DNS?</h2>
<div class="r-stack">
<em class="fragment fade-down">= Domain Name System</em>
<img src="./images/telefonbuch.jpeg" width="450" height="300" class="fragment">
</div>
<p class="citation">Bild: https://www.sueddeutsche.de/image/sz.1.2720968/1200x675?v=1519611738</p>
<aside class="notes" data-markdown>
Wie Telefonbuch: Zuständig für Umwandlung von Namen, die sich Menschen merken können zu eindeutigen Adressen.
jedesmall wenn eine Webseite im Browser eingeben "www.google.de" wird zuerst dieser "DNS-Name" in eine IP-Adresse umgewandelt
</aside>
</section>
<section>
<h2>DNS im OSI-Modell</h2>
<br>
<div style="background-color: whitesmoke; align-content: center; margin-left: 15%; width: 700px">
<img src="images/osi.png"/>
</div>
<p class="citation">Bild: https://de.wikipedia.org/wiki/OSI-Modell#/media/Datei:ISO-OSI-7-Schichten-Modell(in_Deutsch).svg</p>
</section>
<section>
<p>Wo finde ich <em>www.ag-link.xyz</em> ?</p>
<img src="images/dnsExplained.jpg" class="fragment fade-up"/>
<p class="fragment fade-up">Wo finde ich <em>.xyz.ag-link.www</em> ?</p>
<aside class="notes" data-markdown>
* DNS kennt keine zentrale Datenbank /basiert auf großen Zahl von Nameservern.
Zuerst fragen wir unseren PrimaryDNS (zb. Google 8.8.8.8)
Rekursive auflösung
1. Root-Nameserver (Rootserver):
lösen top-level domain auf (.de, .com)
13 Stück (10 in USA, London, Tokio, Stockholm);
2. Der Namespace löst dann die SecondLvl Domain auf (und ggf. weitere Subdomains)
3. host (.www, .mp3, .blog)
</aside>
</section>
</section>
<section>
<section>
<h2>PiHole Setup</h2>
<img src="images/pihole_dns.png">
<aside class="notes" data-markdown>
* forwarding DNS-Server (gibt sich aus)
* filtert allerdings nur black & whitelist
* gibt Anfrage dann weiter an DNS Resolver
</aside>
</section>
<section>
<h2>Features</h2>
<ul>
<li>Schützt jedes Gerät im Netzwerk</li>
<li>Blockt auch innerhalb von Apps</li>
<li>Verbessert Performance</li>
<li>Blockt auch Malware</li>
<li>Listen sind beliebig erweiterbar</li>
<li>Monitoring</li>
</ul>
<aside class="notes">
auch domains des Staatstrojaner "Pegasus" können geblockt werden.
</aside>
</section>
<section>
<h2>Probleme mit DNS</h2>
<ul>
<li>DNS-Spoofing</li>
<li>DNS-Hijacking</li>
<li>Unser DNS kennt unsere Surfhistorie</li>
</ul>
<aside class="notes">
- attraktives Ziel für Angriffe
- Spoofing: Cache wird verändert oder mit Kommunikation interferiert. (Man in the middle)
- Hijacking: DNS ist kompromittiert / bösartig
</aside>
</section>
</section>
<section>
<section>
<h2>PiHole mit Unbound</h2>
<p>Unbound = rekursiver DNS-Server zum selberhosten.</p><br>
<ul>
<li>mehr Privatsphäre</li>
<li>erhöter Schutz vor DNS-Spoofing/Hijacking Angriffen</li>
<li>Erstmalige Aufrufe neuer Adressen haben eine kurze Verzögerung</li>
</ul>
</section>
<section>
<h2>PiHole mit Unbound</h2>
<img src="images/unbound2.png">
<p></p>
</section>
</section>
<section data-background="./images/uptempo.gif">
<img src="https://wp-cdn.pi-hole.net/wp-content/uploads/2018/12/pihole-text-logo-white.png.webp" alt="pihole logo" style="height: 120px; margin: 0 auto 4rem auto; background: transparent;" class="pihole-logo">
<p class="citation">Logo: https://wp-cdn.pi-hole.net/wp-content/uploads/2018/12/pihole-text-logo-white.png.webp</p>
</section>
<section data-background="./images/fazit.gif">
<aside class="notes">
pihole gut um sich mal bewusst zu machen was da alles
</aside>
</section>
<section>
<h2>Nachlesen und selber basteln:</h2>
<br>
<a>
<img src="./images/githubw.png" alt="github" style="height: 120px; margin: 0 auto 4rem auto; background: transparent;">
</a><p>[GitHub] ~ https://github.com/bedaka/kew-pihole</p>
</section>
<section>
<h2>Quellen 1/2</h2>
<ul>
<li>Netzpolitik 2017: https://netzpolitik.org/2017/wahlkampf-in-der-grauzone-die-parteien-das-microtargeting-und-die-transparenz/</li>
<li>https://www.facebook.com/business/learn/facebook-ads-pixel</li>
<li>https://targetleaks.de/index</li>
<li>https://www.sciencedirect.com/science/article/pii/S0195925517303505</li>
<li>Schnabel, Patrick: Netzwerktechnikk-Fibel</li>
</ul>
</section>
<section>
<h2>Quellen 2/2</h2>
<ul>
<li><em>Update report into adtech real time bidding</em>; ICO</li>
<li><em>Selling Off Privacy at Auction</em>; Lukasz Olejnik, Minh-Dung Tran, Claude Castelluccia</li>
<li><em>To bid or not to bid? - Measuring the value of privacy in RTB</em>; Lukasz Olejnik, Claude Castelluccia</li>
<li>Blocklisten für "Pegasus": https://www.youtube.com/watch?v=uk1Z7kshxPA</li>
</ul>
</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script>
// More info about initialization & config:
// - https://revealjs.com/initialization/
// - https://revealjs.com/config/
Reveal.initialize({
hash: true,
// Learn about plugins: https://revealjs.com/plugins/
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
});
</script>
</body>
</html>