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

1. GDG Cebu

2. Web Privacy & Security Recipes
Mark Robin
Senior Software Engineer
Inspire Team
GDG Cebu #webdevLIVE

3. GDG Cebu

4. https://
GDG Cebu

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. 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. 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. www.iliketoquote.com

10. Cookie recipes:
SameSite and beyond
GDG Cebu

11. Set-Cookie:
__Host-cookiename=cookievalue;
Secure;
Path=/;
HttpOnly;
SameSite=Lax
Set-Cookie:
__Host-cookiename=cookievalue;
Secure;
Path=/;
HttpOnly;
SameSite=Lax
GDG Cebu

12. Set-Cookie:
__Host-cookiename=cookievalue;
Secure;
Path=/;
HttpOnly;
SameSite=Lax
GDG Cebu

13. Set-Cookie:
__Host-cookiename=cookievalue;
Secure;
Path=/;
HttpOnly;
SameSite=Lax
GDG Cebu

14. Set-Cookie:
__Host-cookiename=cookievalue;
Secure;
Path=/;
HttpOnly;
SameSite=Lax
GDG Cebu

15. Set-Cookie:
__Host-cookiename=cookievalue;
Secure;
Path=/;
HttpOnly;
SameSite=Lax
GDG Cebu

16. Set-Cookie:
__Host-cookiename=cookievalue;
Secure;
Path=/;
HttpOnly;
SameSite=Lax
GDG Cebu

17. Set-Cookie:
__Host-cookiename=cookievalue;
Secure;
Path=/;
HttpOnly;
SameSite=Lax
GDG Cebu

18. Set-Cookie:
__Host-cookiename=cookievalue;
Secure;
Path=/;
HttpOnly;
SameSite=Lax
GDG Cebu

19. Set-Cookie:
__Host-cookiename=cookievalue;
Secure;
Path=/;
HttpOnly;
SameSite=Lax
GDG Cebu

20. Set-Cookie:
__Host-cookiename=cookievalue;
Secure;
Path=/;
HttpOnly;
SameSite=Lax
GDG Cebu

21. Set-Cookie:
__Secure-cookiename=cookievalue;
Secure;
Domain=news.site;
Path=/;
HttpOnly;
SameSite=Lax
GDG Cebu

22. Set-Cookie:
__Host-cookiename=cookievalue;
Secure;
Path=/;
HttpOnly;
SameSite=Lax;
Max-Age=900
GDG Cebu

23. Set-Cookie:
__Host-cookiename=cookievalue;
Secure;
Path=/;
HttpOnly;
SameSite=Strict
GDG Cebu

24. Set-Cookie:
__Host-cookiename=cookievalue;
Secure;
Path=/;
HttpOnly;
SameSite=None
GDG Cebu

25. Set-Cookie:
__Host-cookiename=cookievalue;
Secure;
Path=/;
HttpOnly;
SameSite=None
GDG Cebu

26. Set-Cookie:
first_party=cookievalue;
SameSite=Lax
Set-Cookie:
third_party=cookievalue;
SameSite=None; Secure
GDG Cebu

27. COOP:
COEP:
Cross-Origin-Opener-Policy
Cross-Origin-Embedder-Policy
GDG Cebu

28. Powerful Features
• SharedArrayBuffer across platforms
• performance.measureMemory()
• JS Self Profiling API
and more to come…
GDG Cebu

29. Composability
● Ads
● Fonts
● Images
● Videos
● Maps
● Payment solutions
a.example
b.example
GDG Cebu

30. Same-origin Policy
a.example
b.example
Browsing Context Group
GDG Cebu

31. 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

32. Spectre
evil.example
Browsing Context Group
a.example
b.example
GDG Cebu

33. COOP+COEP = cross-origin isolated
evil.example
a.example
b.example
GDG Cebu

34. 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

35. Cross-Origin-Opener-Policy: same-origin
COOP COEP CORP CORS
GDG Cebu

36. 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

37. Attention! Resource providers:
COOP COEP CORP CORS
Apply `Cross-Origin-Resource-Policy: cross-origin` header!
GDG Cebu

38. Cross-Origin-Embedder-Policy: require-corp
Resource without `CORP` or CORS will be blocked
COOP COEP CORP CORS
GDG Cebu

39. Cross-Origin-Embedder-Policy: require-corp
Cross-origin resource with `CORP: cross-origin` can be loaded
COOP COEP CORP CORS
GDG Cebu

40. ```js
if (self.crossOriginIsolated) {
// Your page is at "cross-origin isolated" state
}
```
GDG Cebu

41. Chrome DevTools
GDG Cebu

42. GDG Cebu

43. Issues Tab
GDG Cebu

44. GDG Cebu

45. GDG Cebu

46. GDG Cebu

47. This cover has been designed using
resources from Freepik.com
Security is always excessive
until it’s not enough.
Robbie Sinclair

48. linkedin.com/in/markdrobin
github.com/mdrobin95
GDG Cebu
giphy.com
SOURCE web.dev/secure