Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Fast jede Webseite und Web-Anwendung verlässt sich auf externe Ressourcen oder 3rd Party Libraries. Dies ist einfach, aber grundsätzlich keine gute Idee.
Externe Ressourcen können mit relative wenig Aufwand auch lokal bereitgestellt und ausgeliefert werden, wodurch viele Probleme einfacher zu bewältigen sind. Externe Ressourcen sollten immer mit Vorsicht behandelt werden. Insbesondere im Kontext sensibler Anwendungen.

6574ee7c61e5e961ba64928fad6615e5?s=128

Jan Thiel

June 26, 2019
Tweet

More Decks by Jan Thiel

Other Decks in Technology

Transcript

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

  2. 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
  3. Das Dilemma mit 3rd Party Code ⚠

  4. 4 | 3rd Party Governance Beispiele aus dem echten Leben

    #NoPunIntended
  5. 5 | 3rd Party Governance #1

  6. 6 | 3rd Party Governance Marketing Theorie aus dem Netz

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

    „“ Quelle: Webseite eines Berliner Start-Ups – „Sicherheit“
  8. 8 | 3rd Party Governance Technische Realität

  9. 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. 10 | Technische Realität 3rd Party Governance

  11. 11 | 3rd Party Governance

  12. 12 | 3rd Party Governance #2

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

  14. 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. 15 | Source: https://www.pinterest.de/pin/482307441313358958/ Was kann schon schief gehen?

  16. 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!
  17. 17 | Murphys Law - Was schiefgehen kann… 3rd Party

    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
  18. 18 | Murphys Law - Was schiefgehen kann… 3rd Party

    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. 19 | 3rd Party Governance Veränderte rechtliche Rahmenbedingungen Opt-In Pflicht

    für Cookies
  20. Was tun? +

  21. 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. 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. 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. 24 | 3rd Party Governance Datenschutz Security Performance ✔ ✔

    ✔ (Cookie) Opt-In X
  25. 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. 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. 27 | 3rd Party Governance Datenschutz Security Performance ✔ ✔

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

    ✔ ✔ (Cookie) Opt-In ✔
  29. Voraussetzungen für eine bessere 3rd Party Integration ?

  30. 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. 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. 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. 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. 34 | 3rd Party Governance Schöne Theorie, aber gibt’s das

    auch in echt ? #WhereToFork
  35. 35 | 3rd Party Governance OpenSource Rocks https://github.com/DieTechniker/3rdparty-privacy-proxy

  36. 36 | 3rd Party Governance OpenSource rockt auch für NPM

    :-) Private Package Repositories / Proxys für NPM Pakete bit.dev
  37. Danke :-) Don‘t be evil! Image Source: https://twitter.com/mecookiemonster Jan Thiel

    @JanThiel42