Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web.dev - Web Privacy and Security Recipe

99 views

Published on

Sharing my slides I used during my talk in Web.dev LIVE Cebu. Aug 08, 2020

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Web.dev - Web Privacy and Security Recipe

  1. 1. GDG Cebu
  2. 2. Web Privacy & Security Recipes Mark Robin Senior Software Engineer Inspire Team GDG Cebu #webdevLIVE
  3. 3. GDG Cebu
  4. 4. https:// GDG Cebu
  5. 5. Protects the integrity of your website HTTPS HTTPS helps prevent intruders from tampering with the communications between your websites and your users' browsers. Protects the privacy & security of your users HTTPS prevents intruders from being able to passively listen to communications between your websites and your users. The future of the web HTTPS is a key component to the permission workflows for new features and updated APIs. GDG Cebu
  6. 6. Protects the privacy & security of your users HTTPS prevents intruders from being able to passively listen to communications between your websites and your users. Protects the integrity of your website HTTPS HTTPS helps prevent intruders from tampering with the communications between your websites and your users' browsers. Protects the privacy & security of your users HTTPS prevents intruders from being able to passively listen to communications between your websites and your users. The future of the web HTTPS is a key component to the permission workflows for new features and updated APIs. GDG Cebu Protects the integrity of your website HTTPS helps prevent intruders from tampering with the communications between your websites and your users' browsers.
  7. 7. Protects the integrity of your website HTTPS HTTPS helps prevent intruders from tampering with the communications between your websites and your users' browsers. Protects the privacy & security of your users HTTPS prevents intruders from being able to passively listen to communications between your websites and your users. The future of the web HTTPS is a key component to the permission workflows for new features and updated APIs. GDG Cebu Protects the privacy & security of your users HTTPS prevents intruders from being able to passively listen to communications between your websites and your users. The future of the web HTTPS is a key component to the permission workflows for new features and updated APIs.
  8. 8. www.iliketoquote.com
  9. 9. Cookie recipes: SameSite and beyond GDG Cebu
  10. 10. Set-Cookie: __Host-cookiename=cookievalue; Secure; Path=/; HttpOnly; SameSite=Lax Set-Cookie: __Host-cookiename=cookievalue; Secure; Path=/; HttpOnly; SameSite=Lax GDG Cebu
  11. 11. Set-Cookie: __Host-cookiename=cookievalue; Secure; Path=/; HttpOnly; SameSite=Lax GDG Cebu
  12. 12. Set-Cookie: __Host-cookiename=cookievalue; Secure; Path=/; HttpOnly; SameSite=Lax GDG Cebu
  13. 13. Set-Cookie: __Host-cookiename=cookievalue; Secure; Path=/; HttpOnly; SameSite=Lax GDG Cebu
  14. 14. Set-Cookie: __Host-cookiename=cookievalue; Secure; Path=/; HttpOnly; SameSite=Lax GDG Cebu
  15. 15. Set-Cookie: __Host-cookiename=cookievalue; Secure; Path=/; HttpOnly; SameSite=Lax GDG Cebu
  16. 16. Set-Cookie: __Host-cookiename=cookievalue; Secure; Path=/; HttpOnly; SameSite=Lax GDG Cebu
  17. 17. Set-Cookie: __Host-cookiename=cookievalue; Secure; Path=/; HttpOnly; SameSite=Lax GDG Cebu
  18. 18. Set-Cookie: __Host-cookiename=cookievalue; Secure; Path=/; HttpOnly; SameSite=Lax GDG Cebu
  19. 19. Set-Cookie: __Host-cookiename=cookievalue; Secure; Path=/; HttpOnly; SameSite=Lax GDG Cebu
  20. 20. Set-Cookie: __Secure-cookiename=cookievalue; Secure; Domain=news.site; Path=/; HttpOnly; SameSite=Lax GDG Cebu
  21. 21. Set-Cookie: __Host-cookiename=cookievalue; Secure; Path=/; HttpOnly; SameSite=Lax; Max-Age=900 GDG Cebu
  22. 22. Set-Cookie: __Host-cookiename=cookievalue; Secure; Path=/; HttpOnly; SameSite=Strict GDG Cebu
  23. 23. Set-Cookie: __Host-cookiename=cookievalue; Secure; Path=/; HttpOnly; SameSite=None GDG Cebu
  24. 24. Set-Cookie: __Host-cookiename=cookievalue; Secure; Path=/; HttpOnly; SameSite=None GDG Cebu
  25. 25. Set-Cookie: first_party=cookievalue; SameSite=Lax Set-Cookie: third_party=cookievalue; SameSite=None; Secure GDG Cebu
  26. 26. COOP: COEP: Cross-Origin-Opener-Policy Cross-Origin-Embedder-Policy GDG Cebu
  27. 27. Powerful Features • SharedArrayBuffer across platforms • performance.measureMemory() • JS Self Profiling API and more to come… GDG Cebu
  28. 28. Composability ● Ads ● Fonts ● Images ● Videos ● Maps ● Payment solutions a.example b.example GDG Cebu
  29. 29. Same-origin Policy a.example b.example Browsing Context Group GDG Cebu
  30. 30. Same-origin Policy Origin A Origin B Explanation of whether Origin A and B are "same-origin" or "cross-origin" https://www.example.com:443 https://www.evil.com:443 cross-origin: different domains https://example.com:443 cross-origin: different subdomains https://login.example.com:443 cross-origin: different subdomains http://www.example.com:443 cross-origin: different schemes https://www.example.com:80 cross-origin: different ports https://www.example.com:443 same-origin: exact match https://www.example.com same-origin: implicit port number (443) matches GDG Cebu
  31. 31. Spectre evil.example Browsing Context Group a.example b.example GDG Cebu
  32. 32. COOP+COEP = cross-origin isolated evil.example a.example b.example GDG Cebu
  33. 33. Enabling cross-origin isolation 1. Set `Cross-Origin-Opener-Policy: same-origin` for the main document. 2. Make sure cross-origin resources use `CORP: cross-origin` or CORS. 3. Set `Cross-Origin-Embedder-Policy: require-corp` for the main document. GDG Cebu
  34. 34. Cross-Origin-Opener-Policy: same-origin COOP COEP CORP CORS GDG Cebu
  35. 35. Confirm cross-origin resources support: COOP COEP CORP CORS • `Cross-Origin-Resource-Policy: cross-origin` header • Cross Origin Resource Sharing `<img src=“image.png” crossorigin>` GDG Cebu
  36. 36. Attention! Resource providers: COOP COEP CORP CORS Apply `Cross-Origin-Resource-Policy: cross-origin` header! GDG Cebu
  37. 37. Cross-Origin-Embedder-Policy: require-corp Resource without `CORP` or CORS will be blocked COOP COEP CORP CORS GDG Cebu
  38. 38. Cross-Origin-Embedder-Policy: require-corp Cross-origin resource with `CORP: cross-origin` can be loaded COOP COEP CORP CORS GDG Cebu
  39. 39. ```js if (self.crossOriginIsolated) { // Your page is at "cross-origin isolated" state } ``` GDG Cebu
  40. 40. Chrome DevTools GDG Cebu
  41. 41. GDG Cebu
  42. 42. Issues Tab GDG Cebu
  43. 43. GDG Cebu
  44. 44. GDG Cebu
  45. 45. GDG Cebu
  46. 46. This cover has been designed using resources from Freepik.com Security is always excessive until it’s not enough. Robbie Sinclair
  47. 47. linkedin.com/in/markdrobin github.com/mdrobin95 GDG Cebu giphy.com SOURCE web.dev/secure

×