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 Einbindung von 3rd Party Code

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

More Decks by Jan Thiel

Other Decks in Technology

Featured

Transcript