Performance, Security und Datenschutz bei der Einbindung von 3rd Party Code

Performance, Sicherheit und Datenschutz beim Einsatz von 3rd Party Code

2 | ▪ Wirtschafts-Informatiker ▪ Developer & Architekt im Enterprise
Umfeld ▪ Fullstack mit Fokus auf Frontend, Datenschutz, Performance und Security ▪ Zu Hause in Hamburg 3rd Party Governance Jan Thiel / @JanThiel42

Das Dilemma mit 3rd Party Code ⚠

4 | 3rd Party Governance Beispiele aus dem echten Leben
#NoPunIntended

5 | 3rd Party Governance #1

6 | 3rd Party Governance Marketing Theorie aus dem Netz
Quelle: Webseite eines Berliner Start-Ups – „Sicherheit“

7 | 3rd Party Governance Marketing Theorie aus dem Netz
„“ Quelle: Webseite eines Berliner Start-Ups – „Sicherheit“

8 | 3rd Party Governance Technische Realität

9 | ▪ Facebook ▪ Google ▪ Google Ads ▪
Google Analytics ▪ Google Tag Manager ▪ Google Cloud ▪ Bing Ads ▪ Heap Analytics ▪ Intercom ▪ WordPress.com (Jetpack) ▪ Amazon AWS ▪ Crazyegg ▪ Taboola ▪ Bing ▪ Auth0 ▪ Segment ▪ Sentry 3rd Party Governance Technische Realität 3rd Party Anbieter mit Zugriff auf die Webseite

10 | Technische Realität 3rd Party Governance

11 | 3rd Party Governance

12 | 3rd Party Governance #2

13 | 3rd Party Governance @simona_cotin auf der #ejs19

14 | 3rd Party Governance 3rd Party Code Integration auf
Webseiten 3rd Party <script>.js 3rd Party <script2>.js 3rd Party WebFont.woff 3rd Party Server 3rd Party Server Webseite

15 | Source: https://www.pinterest.de/pin/482307441313358958/ Was kann schon schief gehen?

16 | Murphys Law - Was schiefgehen kann… 3rd Party
Governance Webseite Some Icon Source: Icon made by Freepik from www.flaticon.com 3rd Party <script>.js 3rd Party <script2>.js 3rd Party <script3>.js 3rd Party Server ADV ☓ WTF? DSGVO!

Governance 3rd Party <script>.js HACKED 3rd Party <script2>.js 3rd Party <script3>.js Webseite Evil-Corp Server ⚒ Some Icon Source: Icon made by Freepik from www.flaticon.com Fremde Webseite

Governance Some Icon Source: Icon made by Freepik from www.flaticon.com 3rd Party <script>.js Google Fonts WebFont 3rd Party <script3>.js <html> <head> … <script src=„https://external.com/script.js“ /> <link href="https://fonts.googleapis.com/css?f amily=Roboto" rel="stylesheet"> … </head> <body> … </body> </html> Webseite

19 | 3rd Party Governance Veränderte rechtliche Rahmenbedingungen Opt-In Pflicht
für Cookies

Was tun? +

21 | 3rd Party Management Privacy Proxy <script>.js <script2>.js WebFont.woff
3rd Party Server 3rd Party Server Webseite Privacy Proxy 3rd Party Governance

22 | Privacy Proxy Code Delivery <script>.js <script2>.js WebFont.woff Privacy
Proxy 3rd Party Governance ▪ Lädt Dateien von externen Servern herunter ▪ Code Delivery erfolgt über Privacy Proxy unter Domain der Webseite ▪ Ermöglicht: ▪ Versionierung ▪ Archivierung ▪ Security Scans ▪ Unabhängigkeit von externen Servern Webseite

23 | Privacy Proxy 3rd Party Kommunikation 3rd Party Server
3rd Party Server Webseite Privacy Proxy 3rd Party Governance ▪ Kommunikation von 3rd Party Code läuft nur noch über Proxy ▪ Dies ermöglicht: ▪ Protokollierung der übermittelten Daten ▪ White- / Blacklisting von Daten ▪ Garantierte Anonymisierung von Daten ▪ 100% 1st Party Cookies ▪ Deutliche Reduzierung der Block-Quote durch Blocker Add-Ons

24 | 3rd Party Governance Datenschutz Security Performance ✔ ✔
✔ (Cookie) Opt-In X

25 | TagMngmt.js Exactag AdForm WebTrekk ▪ Web basiertes Tool
zur Verwaltung von 3rd Party JS-Code ▪ Verwaltung von 3rd Party JS-Code ohne IT Aufwand ▪ Ausspielung des JS-Code auf Basis von Regeln ▪ Zuweisung von Daten an die Scripts ebenfalls über die fachliche Weboberfläche ▪ Voraussetzung: „Consent Management“ Tag Management Deployment| Es muss nur noch das Tag Management Paket eingebunden werden. Dieses enthält komplettes 3rd Party JS 3rd Party Governance

26 | Privacy Proxy + Tag Management <script>.js <script2>.js <script3>.js
3rd Party Server 3rd Party Server Webseite Tag Management (async) Privacy Proxy 3rd Party Governance <dynamic_script>.js WebFont.woff Content Security Policies

27 | 3rd Party Governance Datenschutz Security Performance ✔ ✔
✔ (Cookie) Opt-In ✔

28 | 3rd Party Governance NPM Datenschutz Security Performance ✔
✔ ✔ (Cookie) Opt-In ✔

Voraussetzungen für eine bessere 3rd Party Integration ?

30 | Anforderungen an 3rd Party Provider <script>.js <script2>.js <script3>.js
X Integration| Die Einbindung von JS erfolgt ausschließlich über das Tag Management. Es werden keinerlei 3rd Party Scripte direkt in Webseiten integriert. <script>.js <script2>.js <script3>.js Tag Management ✔ 3rd Party Governance

31 | 3rd Party Governance Anforderungen an 3rd Party Provider
<dynamic_script>.js X Integration| Dynamische Scripte werden vom Privacy Proxy regelmäßig vom Anbieter abgerufen und über den Privacy Proxy bereitgestellt ✔ <dynamic_script>.js Privacy Proxy

32 | 3rd Party Governance Anforderungen an 3rd Party Provider
<script>.js X Piggy Backing| 3rd Party Code lädt keinerlei Dateien von anderen Quellen nach. Code wird ausschließlich über das Tag Management integriert <script2>.js <script>.js <script2>.js Tag Management ✔

33 | Anforderungen an 3rd Party Provider X Kommunikation| Jegliche
Kommunikation zwischen 3rd Party JS und 3rd Party Server erfolgt ausschließlich über den Privacy Proxy <script>.js Privacy Proxy 3rd Party Server <script>.js ✔ Privacy Proxy 3rd Party Server 3rd Party Governance

34 | 3rd Party Governance Schöne Theorie, aber gibt’s das
auch in echt ? #WhereToFork

35 | 3rd Party Governance OpenSource Rocks https://github.com/DieTechniker/3rdparty-privacy-proxy

36 | 3rd Party Governance OpenSource rockt auch für NPM
:-) Private Package Repositories / Proxys für NPM Pakete bit.dev

Danke :-) Don‘t be evil! Image Source: https://twitter.com/mecookiemonster Jan Thiel
@JanThiel42

Performance, Security und Datenschutz bei der E...

Performance, Security und Datenschutz bei der Einbindung von 3rd Party Code

More Decks by Jan Thiel

Other Decks in Technology

Featured

Transcript