HTTP headers for the responsible developer

Transcript

1. @stefanjudis HTTP headers for the responsible developer
2. My journey on the web
3. uboot.com
5. The web connects people
7. The web connects people
8. We connect people! We enable people! We help people!
9. [he/him] @stefanjudis www.stefanjudis.com Heyo, I'm Stefan!
10. ... and I want to be a responsible developer
16. 2019 We should be building for everybody
17. "We don't have users in/that ..."
18. "We don't have users in/that ..."
19. The challenge of building a "good" website
20. Design Performance Content Accessibility Devices Network Frameworks
21. Design Performance Content Accessibility Network Frameworks Devices
22. Let's talk HTTP
23. https://the-responsible.dev/ Accept: text/html,application/xhtml+xml,application/xml
 Accept-Encoding: gzip, deflate, br
 Accept-Language: en-GB,en-US;q=0.9,en;q=0.8,de;q=0.7 ... Connection: keep-alive Content-Type: text/html; charset=utf-8 Date: Mon, 11 Mar 2019 12:59:38 GMT ... Response Body
24. Accept: text/html,application/xhtml+xml,application/xml
 Accept-Encoding: gzip, deflate, br
 Accept-Language: en-GB,en-US;q=0.9,en;q=0.8,de;q=0.7 ... https://the-responsible.dev/ Connection: keep-alive Content-Type: text/html; charset=utf-8 Date: Mon, 11 Mar 2019 12:59:38 GMT ... Response Body
25. the-responsible.dev
26. How can we use headers to make this site better?
27. The web is a scary place
28. thenextweb.com/contributors/2018/03/10/protect-website-cryptojacking-attacks/
29. shoptalkshow.com/episodes/special-one-one-hacker/
30. blog.npmjs.org/post/180565383195/details-about-the-event-stream-incident
31. www.twilio.com/blog/learned-about-security-from-calling-35-contact-centers
32. www.twilio.com/blog/learned-about-security-from-calling-35-contact-centers We always rely on others
33. The web has to be safe!
34. HTTPS
35. HTTP/2 ServiceWorker getUserMedia() ...
36. whynohttps.com
37. whynohttps.com
38. Ensure encryption
39. Strict-Transport-Security: max-age=1000; includeSubDomains; preload Response Header
40. hstspreload.org
41. chromium.googlesource.com/chromium/src/net/+/master/http/ transport_security_state_static.json
43. caniuse.com/#feat=stricttransportsecurity
44. Upgrade HTTP requests
45. Content-Security-Policy: upgrade-insecure-requests Response Header
46. www.chromestatus.com/feature/5557268741357568
47. Limit what's allowed
48. requestmap.webperf.tools
49. base-uri block-all-mixed-content connect-src default-src font-src form-action frame-ancestors frame-src img-src manifest-src media-src navigate-to object-src plugin-types report-sample report-to require-sri-for sandbox script-src strict-dynamic style-src upgrade-insecure-requests worker-src developer.mozilla.org/en-US/docs/Web/HTTP/CSP prefetch-src
50. <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*;">
51. Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe- inline' 'unsafe-eval' just-comments.com www.google-analytics.com production-assets.codepen.io storage.googleapis.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: images.contentful.com images.ctfassets.net www.gravatar.com www.google-analytics.com just- comments.com; font-src 'self' data:; connect-src 'self' cdn.contentful.com images.contentful.com videos.contentful.com images.ctfassets.net videos.ctfassets.net service.just-comments.com www.google-analytics.com; media-src 'self' videos.contentful.com videos.ctfassets.net; object-src 'self'; frame-src codepen.io; frame- ancestors 'self'; worker-src 'self'; block-all-mixed-content; manifest-src 'self' 'self'; disown-opener; prefetch-src 'self'; report-uri https:// stefanjudis.report-uri.com/r/d/csp/reportOnly Response Header
52. Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' just-comments.com www.google- analytics.com production-assets.codepen.io storage.googleapis.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: images.contentful.com images.ctfassets.net www.gravatar.com www.google-analytics.com just- comments.com; font-src 'self' data:; connect-src 'self' cdn.contentful.com images.contentful.com videos.contentful.com images.ctfassets.net videos.ctfassets.net service.just-comments.com www.google-analytics.com; media-src 'self' videos.contentful.com videos.ctfassets.net; object-src 'self'; frame-src codepen.io; frame- ancestors 'self'; worker-src 'self'; block-all-mixed-content; manifest-src 'self' 'self'; disown-opener; prefetch-src 'self'; report-uri https:// stefanjudis.report-uri.com/r/d/csp/reportOnly Response Header
53. Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' just-comments.com www.google- analytics.com production-assets.codepen.io storage.googleapis.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: images.contentful.com images.ctfassets.net www.gravatar.com www.google-analytics.com just- comments.com; font-src 'self' data:; connect-src 'self' cdn.contentful.com images.contentful.com videos.contentful.com images.ctfassets.net videos.ctfassets.net service.just-comments.com www.google-analytics.com; media-src 'self' videos.contentful.com videos.ctfassets.net; object-src 'self'; frame-src codepen.io; frame- ancestors 'self'; worker-src 'self'; block-all-mixed-content; manifest-src 'self' 'self'; disown-opener; prefetch-src 'self'; report-uri https:// stefanjudis.report-uri.com/r/d/csp/reportOnly Response Header
54. Report-To: { "group": "csp-endpoint", "max_age": 10886400, "endpoints": [{ "url": "https://stefanjudis.com/.../csp-report" }] }
55. Report-To: { "group": "csp-endpoint", "max_age": 10886400, "endpoints": [{ "url": "https://stefanjudis.com/.../csp-report" }] }, { "group": "network-endpoint", "max_age": 10886400, "endpoints": [{ "url": "https://stefanjudis.com/.../network-report" }] }, { "max_age": 10886400, "endpoints": [{ "url": "https://stefanjudis.com/.../general-report" }] }
56. developers.google.com/web/updates/2018/09/reportingapi
57. Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' just-comments.com www.google- analytics.com production-assets.codepen.io storage.googleapis.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: images.contentful.com images.ctfassets.net www.gravatar.com www.google-analytics.com just- comments.com; font-src 'self' data:; connect-src 'self' cdn.contentful.com images.contentful.com videos.contentful.com images.ctfassets.net videos.ctfassets.net service.just-comments.com www.google-analytics.com; media-src 'self' videos.contentful.com videos.ctfassets.net; object-src 'self'; frame-src codepen.io; frame- ancestors 'self'; worker-src 'self'; block-all-mixed-content; manifest-src 'self' 'self'; disown-opener; prefetch-src 'self'; report-uri https:// stefanjudis.report-uri.com/r/d/csp/reportOnly Response Header
58. Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' just-comments.com www.google- analytics.com production-assets.codepen.io storage.googleapis.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: images.contentful.com images.ctfassets.net www.gravatar.com www.google-analytics.com just- comments.com; font-src 'self' data:; connect-src 'self' cdn.contentful.com images.contentful.com videos.contentful.com images.ctfassets.net videos.ctfassets.net service.just-comments.com www.google-analytics.com; media-src 'self' videos.contentful.com videos.ctfassets.net; object-src 'self'; frame-src codepen.io; frame- ancestors 'self'; worker-src 'self'; block-all-mixed-content; manifest-src 'self' 'self'; disown-opener; prefetch-src 'self'; report-uri https:// stefanjudis.report-uri.com/r/d/csp/reportOnly Response Header
59. Content-Security-Policy: default-src 'self'; script-src 'sha256-blL...' <script> console.log('Inline script executing ...'); </script> Response Header
60. Content-Security-Policy: default-src 'self'; script-src 'nonce-abc...' <script nonce="abcdef"> console.log('Inline script executing ...'); </script> Response Header
61. caniuse.com/#feat=contentsecuritypolicy
62. caniuse.com/#feat=contentsecuritypolicy2 * * not complete
63. httparchive.org
64. How many pages use CSP?
65. USE CSP DON'T USE CSP 94% 6%
66. USE CSP DON'T USE CSP 94% 6% We can do better!
67. Always monitor your CSP reports and "test in production" with report-only before enforcing them! Troy Hunt
68. Disallow third-party cookies!
69. Set-Cookie: widget_session=abc123; Response Header Set-Cookie: ...
70. Set-Cookie: widget_session=abc123; Response Header Set-Cookie: ... This behaviour leads to security and privacy issues
71. Set-Cookie: widget_session=abc123; SameSite=None; Secure Set-Cookie: widget_session=abc123; SameSite=Lax; Secure Set-Cookie: widget_session=abc123; SameSite=Strict; Secure Response Header
72. caniuse.com/#feat=same-site-cookie-attribute * * somewhat ready but maybe buggy
73. web.dev/samesite-cookies-explained
74. the-responsible.dev/safe/
75. The web is crucial for people.
76. Your sh** doesn't work in Africa. William Imoh
78. You get 6MB for 2Euros but you have only 24h to use them! Right...
79. whatdoesmysitecost.com
80. The web has to be affordable!
81. Don't request the same content over and over again
82. Cache-Control: max-age=31536000, public, immutable Response Header
83. immutable developer.mozilla.org/en-US/docs/Web/HTTP/ Headers/Cache-Control
84. csswizardry.com/2019/03/cache-control-for-civilians/
85. Send the right data
86. Accept-Encoding: gzip, deflate, br Request Header
89. But Brotli compression is so slow!
90. GZIP Brotli vs Default Mode 6 11
91. GZIP Brotli Default Mode vs 6 11
92. GZIP Brotli Optimal middle ground vs 6 4
93. GZIP Brotli Optimal middle ground vs 6 4 Brotli tends to compress better with the same speed
94. GZIP Brotli Optimal middle ground vs 6 4 You don't have to do it on the fly...
95. blogs.akamai.com/2016/02/understanding-brotlis-potential.html
96. caniuse.com/#feat=brotli
99. Serve tailored media
100. <picture> <!-- serve WebP to Chrome and Opera --> <source media="(min-width: 50em)" sizes="50vw" srcset="/image/thing-200.webp 200w, /image/thing-400.webp 400w, /image/thing-800.webp 800w, /image/thing-1200.webp 1200w, /image/thing-1600.webp 1600w, /image/thing-2000.webp 2000w" type="image/webp"> <source sizes="(min-width: 30em) 100vw" srcset="/image/thing-crop-200.webp 200w, /image/thing-crop-400.webp 400w, /image/thing-crop-800.webp 800w, /image/thing-crop-1200.webp 1200w, /image/thing-crop-1600.webp 1600w, /image/thing-crop-2000.webp 2000w" type="image/webp"> <!-- serve JPEG to others --> <source media="(min-width: 50em)" sizes="50vw" srcset="/image/thing-200.jpg 200w, /image/thing-400.jpg 400w, /image/thing-800.jpg 800w, /image/thing-1200.jpg 1200w, /image/thing-1600.jpg 1600w, /image/thing-2000.jpg 2000w"> <source sizes="(min-width: 30em) 100vw"
101. /image/thing-800.webp 800w, /image/thing-1200.webp 1200w, /image/thing-1600.webp 1600w, /image/thing-2000.webp 2000w" type="image/webp"> <source sizes="(min-width: 30em) 100vw" srcset="/image/thing-crop-200.webp 200w, /image/thing-crop-400.webp 400w, /image/thing-crop-800.webp 800w, /image/thing-crop-1200.webp 1200w, /image/thing-crop-1600.webp 1600w, /image/thing-crop-2000.webp 2000w" type="image/webp"> <!-- serve JPEG to others --> <source media="(min-width: 50em)" sizes="50vw" srcset="/image/thing-200.jpg 200w, /image/thing-400.jpg 400w, /image/thing-800.jpg 800w, /image/thing-1200.jpg 1200w, /image/thing-1600.jpg 1600w, /image/thing-2000.jpg 2000w"> <source sizes="(min-width: 30em) 100vw" srcset="/image/thing-crop-200.jpg 200w, /image/thing-crop-400.jpg 400w, /image/thing-crop-800.jpg 800w, /image/thing-crop-1200.jpg 1200w, /image/thing-crop-1600.jpg 1600w, /image/thing-crop-2000.jpg 2000w"> <!-- fallback for browsers that don't support picture --> <img src="/image/thing.jpg" width="50%"> </picture>
102. Accept: image/webp, image/apng, image/*,*/*;q=0.8 Request Header
103. caniuse.com/#feat=webp
104. Accept-CH: Width, Viewport-Width Accept-CH-Lifetime: 100 Request URL: https://.../header.jpg
 Viewport-Width: 980 Width: 980
105. <img src="/header.jpg" alt="" sizes="100vw" /> Accept: image/webp,image/apng,image/*,*/*;q=0.8
 Request URL: https://.../header.jpg
 Viewport-Width: 980 Width: 980
106. <img src="/header.jpg" alt="" sizes="100vw" /> Accept: image/webp,image/apng,image/*,*/*;q=0.8
 Request URL: https://.../header.jpg
 Viewport-Width: 980 Width: 1960
107. <img src="/header.jpg" alt="" sizes="100vw" /> Accept: image/webp,image/apng,image/*,*/*;q=0.8
 Request URL: https://.../header.jpg
 Viewport-Width: 980 Width: 1064 Serve a tailored version via server/service worker
108. speaking.jeremy.codes/yD4dKY/take-a-client-hint
109. www.zdnet.com/article/privacy-concerns-raised-about-upcoming-client-hints-web-standard/
110. Sec-CH-UA: "Examplary Browser"; v="73" Accept-CH: UA, Platform Sec-CH-UA: "Examplary Browser"; v="73.3R8.2H.1" Sec-CH-UA-Platform: "Windows"; v="10"
111. wicg.github.io/ua-client-hints/
112. Save data
113. save-data: on if ("connection" in navigator) { if (navigator.connection.saveData === true) { // Implement data saving operations here. } } Request Header
115. Let's use the platform and make these features more visible
116. https://.... Save data?
117. https://.... Save data? We should provide an easy way to save data!
118. Save data? https://.... Prefer reduced motion? Prefer a dark interface?
119. Save data? https://.... Reduced Motion? Dark colour Scheme? All these settings should be easily accessible all the time!
121. blog.chromium.org/2019/03/chrome-lite-pages-for-faster-leaner.html
122. blog.chromium.org/2019/03/chrome-lite-pages-for-faster-leaner.html I'm not sure how I feel about that...
123. Cache-Control: max-age=31536000, public, no-transform Response Header
124. Be aware of CDNs and proxies – use vary
126. Should browsers or developers optimise?
127. The browser can only optimise to a certain extend...
129. 20% of requests...
130. https:/ /nooshu.github.io/blog/2019/09/01/speeding-up-the-web-with-save-data-header/
131. Less Data Doesn't Mean a Lesser Experience Tim Kadlec
132. the-responsible.dev/affordable/
133. The web is with us every day
134. 2018.bloomca.me
135. It has to be respectful!
136. Get stuff "down" as quickly as possible
137. Link: </unleashed.jpg>; rel=preload; as=image; no-push <link rel="preload" href="/unleashed.jpg" as="image"> Response Header
138. Link: </unleashed.jpg>; rel=preload; as=image; no-push <link rel="preload" href="/unleashed.jpg" as="image"> Response Header This is great to speed up critical resources
139. caniuse.com/#feat=link-rel-preload * * behind a flag
140. Don't annoy the user (aka. the AMP reaction)
141. speakerdeck.com/stefanjudis/amp-tries-to-fix-the-web-what-can-we-learn-from-it?slide=112
142. Feature-Policy: vibrate 'none'; geolocation 'none' Response Header
143. accelerometer ambient-light-sensor autoplay camera document-domain encrypted-media fullscreen geolocation gyroscope layout-animations legacy-image-formats magnetometer microphone midi oversized-images payment picture-in-picture speaker sync-xhr unoptimized-images unsized-media usb vibrate vr developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy
144. accelerometer ambient-light-sensor autoplay camera document-domain encrypted-media fullscreen geolocation gyroscope layout-animations legacy-image-formats magnetometer microphone midi oversized-images payment picture-in-picture speaker sync-xhr unoptimized-images unsized-media usb vibrate vr developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy
145. accelerometer ambient-light-sensor autoplay camera document-domain encrypted-media fullscreen geolocation gyroscope layout-animations legacy-image-formats magnetometer microphone midi oversized-images payment picture-in-picture speaker sync-xhr unoptimized-images unsized-media usb vibrate vr developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy
146. tiny-helpers.dev
147. <img srcset="/screenshots/{{ item.slug }}@1.jpg 1x, /screenshots/{{ item.slug }}@2.jpg 2x" src="/screenshots/{{ item.slug }}@2.jpg" alt="Screenshot of {{ item.name }}" loading="lazy"> <img srcset="/screenshots/{{ item.slug }}@1.jpg 1x, /screenshots/{{ item.slug }}@2.jpg 2x" src="/screenshots/{{ item.slug }}@2.jpg" alt="Screenshot of {{ item.name }}" width="1000" height="600" loading="lazy">
148. tiny-helpers.dev
149. www.youtube.com/watch?v=4-d_SoCHeWE
150. www.youtube.com/watch?v=4-d_SoCHeWE Define width & height to avoid jumpy pages
152. new ReportingObserver((reports, observer) => { reports.forEach(({type, url, body}) => { console.log(type, url); // 'feature-policy-violation', https://some-url.com/... console.log(body); // { // featureId: 'oversized-images', // sourceFile: 'https://path-to-image/... // ... // } }); }, {types: ['feature-policy-violation'], buffered: true}).observe();
153. Report-To: { "max_age": 10886400, "endpoints": [{ "url": "https://stefanjudis.com/.../general-report" }] }
154. timkadlec.com/remembers/2020-02-20-in-browser-performance-linting-with-feature-policies/
155. feature-policy: accelerometer 'none'; camera 'none'; geolocation 'none'; gyroscope 'none'; magnetometer 'none'; microphone 'none'; payment 'none'; usb 'none' Response Header
156. <iframe allow="camera 'none'; microphone 'none'"> document.featurePolicy.allowedFeatures(); // → ["geolocation", "midi", ...] document.featurePolicy.allowsFeature('geolocation'); // → true document.featurePolicy.getAllowlistForFeature('geolocation'); // → ["https://example.com"]
157. What happened to the most annoying one?
158. github.com/w3c/webappsec-feature-policy/issues/243
159. blog.chromium.org/2020/01/introducing-quieter-permission-ui-for.html
160. caniuse.com/#feat=feature-policy ** support only for allow on iframes ** * support for Feature-Policy header, allow on iframes, and JS API behind a flag * * * **
161. Respect privacy
163. caniuse.com/#feat=do-not-track
164. webkit.org/blog/8594/release-notes-for-safari-technology-preview-75/
165. caniuse.com/#feat=do-not-track
166. caniuse.com/#feat=do-not-track It was a nice try, but I don't really see that happening...
171. www.xanjero.com/news/samsung-internet-beta-version-9-2-now-includes-oneui-design-smart- anti-tracking-and-more-features/
172. webkit.org/blog/category/privacy/
173. www.engadget.com/2019/11/04/chromium-edge-browser-release-date/
174. The next browser war is on its way...
175. the-responsible.dev/respectful/
176. Building for the web is very hard
177. Design Performance Content Accessibility Devices Network Frameworks
178. Lighthouse
179. webhint.io
180. If you want to get a more complete overview...
181. www.twilio.com/blog/a-http-headers-for-the-responsible-developer
182. securityheaders.com
183. schepp.github.io/HTTP-headers
184. youtu.be/II9m9_esNZc
185. The web has to be safe...
186. The web has to be safe, affordable...
187. The web has to be safe, affordable and respectful...
188. ... so that it really is
 for everybody!
189. @stefanjudis www.stefanjudis.com Thanks. Slides:
 my-links.online/the-responsible-dev
190. @stefanjudis www.stefanjudis.com Thanks. Slides:
 my-links.online/the-responsible-dev I have some stickers!