Merge branch 'main' of github.com:bedaka/kew-pihole

This commit is contained in:
Rascat 2021-10-12 13:13:09 +02:00
commit 7d0b644b45
18 changed files with 237 additions and 171 deletions

View File

@ -2,6 +2,9 @@
Sammlung der Inhalte und Präsentation für das Thema PiHole auf der KEW 2021
## Über die AG Link
Du findest uns hier: https://ag-link.xyz/
## Kompatible Modelle
- Raspberry Pi Zero W
@ -70,4 +73,6 @@ Ein ausführliche Installationsanleitung ist auch auf der [offiziellen Pi-hole W
* [IOC Update Report into adtech and Real Time Bidding](assets/rtb/adtech-real-time-bidding-report-201906.pdf)
* [IAB TCF Vendor List](https://iabeurope.eu/vendor-list-tcf-v2-0/)
* [Selling Off Privacy At Auction](assets/rtb/SellingOffPrivacyAtAuction.pdf)
* [Selling Off Privacy At Auction](assets/rtb/SellingOffPrivacyAtAuction.pdf)
(weitere Quellen finden sich in den Slides der Präsentation)

View File

@ -1,54 +0,0 @@
# WWW - Eine Einführung
## Über die AG Link
Ein paar Sätze zur AG Link. Vision und bisherige Projekte nennen.
## Wie funktioniert das Web (Basic)
Quellen:
- [What happens when you type in a
URL](https://wsvincent.com/what-happens-when-url/)
1. You enter a URL into a web browser
2. The browser looks up the IP address for the domain name via DNS
3. The browser sends a HTTP request to the server
4. The server sends back a HTTP response
5. The browser begins rendering the HTML
6. The browser sends requests for additional objects embedded in HTML and
repeats steps 3-5
- images,
- CSS
- JavaScript
7. Once the page is loaded, the browser sends further async requests as needed.
### HTTP
### DNS
### Was läd der Browser wenn ich die New York Times aufrufe?
*Hier könnten man einen Screenshot vom Network-Tab des Browsers einfügen,
nachdem man https://www.nytimes.com aufgerufen hat.*
## Wie funktionieren Ad Blocker?
Definition: Ad Blocker sind Browser Plugins/Extensions, die Ressource im HTML
gegen eine Liste bekannter Werbe- oder Trackdienste abgleichen und das Laden der
jeweiligen Inhalte notfalls blockieren.
Populäre Ad Blocker:
- UBlock Origin
- …
## PiHole
Die Vorteile auf einem Blick:
- Schütze das gesamte Netzwerk auf einmal
- Blockiere Tracker in Smart TVs und Mobile Apps
- Erhöhte Netzwerkperformance: Tracker werden geblockt bevor sie herunter
geladen werden
- Überblick auf die Gesamtmenge der blockierte Tracker durch PiHole
Webinterface

View File

@ -354,4 +354,9 @@ section.has-light-background, section.has-light-background h1, section.has-light
.backgrounds {
background-color: var(--r-background-color);
}
}
.citation {
font-size: 18px;
color:rgba(155, 132, 132, 0.2)
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 160 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 480 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 99 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 284 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 MiB

View File

@ -23,9 +23,10 @@
</a>
<h3>Werbefreies Heimnetzwerk mit dem RaspberryPi<h3>
</section>
<section>
Denied GIF
<section data-background="./images/denied.gif">
<h3>StuRa</h3>
</section>
<section>
<h2>$ tree</h2>
<pre>
@ -43,20 +44,26 @@
└── 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>
<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 ex und post 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 -->
@ -79,62 +86,63 @@
<div data-id="box1" style="width: 2000px; height: 1000px; margin: 100%px;"></div>
</div>
</section>
<section>
<h2>Tracking Pixel</h2>
<ul>
<li>1x1 Pixel großes Bild im Code der Webseite (E-Mail). </li>
<li>Registriert Nutzerverhalten</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">
1x1 pixel großes Bild das durch Code innerhalb des HTML der Webseite erzeugt wird.
Werden heutzutagen eigentlich überall eingesetzt
können sowohl auf Websites als auch in HTML Emails eingebunden werden
</aside>
</section>
<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>Außerdem</h2>
<ul>
<li>Messen von Verhalten und "conversions"</li>
<li>Beavioural retargeting ermöglichen</li>
<li>BetreiberInnen profitieren von Insights und Metriken</li>
<li>Anbieter profitieren von Daten</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.
</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>
<h2>Tracking Pixel</h2>
<ul>
<li>1x1 Pixel großes Bild im Code der Webseite (E-Mail). </li>
<li>Registriert Nutzerverhalten</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">
1x1 pixel großes Bild das durch Code innerhalb des HTML der Webseite erzeugt wird.
Werden heutzutagen eigentlich überall eingesetzt
können sowohl auf Websites als auch in HTML Emails eingebunden werden
</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>Außerdem</h2>
<ul>
<li>Messen von Verhalten und "conversions"</li>
<li>Beavioural retargeting ermöglichen</li>
<li>BetreiberInnen profitieren von Insights und Metriken</li>
<li>Anbieter profitieren von Daten</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.
</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 -->
@ -237,58 +245,149 @@
</ul>
</section>
</section>
<section data-markdown>
## Auswirkungen von micro targeting?
- ermöglicht manipulation (cambridge analytica)
</section>
<section data-markdown>
# Micro targeting
<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>
> In der Bundestagswahl 2021 nutzten alle etablierten parteien Microtargeting im Wahlkampf. (Netzpolitik 2017)
Die FDP schaltete bspw. Facebook-Werbungen, die sie abhängig von der Zielgruppe für oder gegen staatliche CO2-Limits positionierten. ("grüne Interessen", "Vielreisende").
<aside class="notes" data-markdown>
Neben offensichtl. Argument der Privatsphäre gibt es noch weitere Gründe, warum das nicht so cool ist.
</section>
<section data-markdown>
## Energieverbrauch
Der Stromverbrauch von Onlinewerbung wird je nach Quelle auf
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.
https://www.sciencedirect.com/science/article/pii/S0195925517303505
</section>
<!-- Adblocking mit PiHole -->
<section data-markdown>
## Ad AdBlocking
Wie können wir unsere privatspäre schützen / kontrolle über unsere Daten erlangen?
</section>
<section data-markdown>
## Browser plugins
* Einfach einzurichten
* Funktionieren nur im Browser
* nicht auf jedem Gerät verfügbar (Smart TV, Innerhalb von Apps)
</section>
um nur mal zwei aspekte zu nennen, euch fallen sicher noch weitere ein.
</aside>
</section>
<!-- Adblocking mit PiHole -->
<section>
<h2>DNS who?</h2>
<img src="images/dnsExplained.jpg">
<p>Domain Name System</p>
<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>PIHole Unbound</h2>
Hostet euren eigenen rekursiven DNS-Server
+ mehr Privatsphäre
+ erhöter Schutz vor DNS-Spoofing/Hijacking Angriffen
- Erstmalige Aufrufe neuer Adressen haben eine kurze Verzögerung
<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>
<h2>PiHole Setup</h2>
<img src="images/pihole_dns.png">
<p></p>
</section>
<section>
<section>
<h2>PiHole 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">
</section>
<section>
@ -299,6 +398,18 @@
<h3>Die PiHole Blockliste</h3><br>
<img src="./images/blocked-pixel.png"\>
</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 data-markdown>
## Quellen 1/2
* Netzpolitik 2017: https://netzpolitik.org/2017/wahlkampf-in-der-grauzone-die-parteien-das-microtargeting-und-die-transparenz/
@ -307,18 +418,17 @@
* https://www.sciencedirect.com/science/article/pii/S0195925517303505
* Schnabel, Patrick (??): Netzwerktechnikk-Fibel
</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>
</ul>
<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>
</ul>
</section>
</div>
</div>
</div>
</div>
<script src="dist/reveal.js"></script>
<script src="plugin/notes/notes.js"></script>