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.

Stefan Judis "HTTP headers for the responsible developer"

159 views

Published on

To build inclusive websites, developers have to consider accessibility, performance and user flows. Crafted source code forms the foundation for thought-through UIs, but it’s not only about the code. Let’s have a look at HTTP, and to be specific, its headers that can have a direct impact on user experience.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Stefan Judis "HTTP headers for the responsible developer"

  1. 1. @stefanjudis HTTP headers for the responsible developer
  2. 2. My journey on the web
  3. 3. freenet.de
  4. 4. uboot.com
  5. 5. 1999
  6. 6. The web connects people
  7. 7. 2010
  8. 8. The web connects people
  9. 9. We connect people!
  10. 10. We connect people! We enable people!
  11. 11. We connect people! We enable people! We help people!
  12. 12. @stefanjudis www.stefanjudis.com Heyo, I'm Stefan!
  13. 13. ... and I want to be a responsible developer
  14. 14. 1999
  15. 15. 2019
  16. 16. 2019 We should be building for everybody
  17. 17. "We don't have users in/that ..."
  18. 18. "We don't have users in/that ..."
  19. 19. The challenge of building a "good" website
  20. 20. Design PerformanceContent Accessibility DevicesNetworkFrameworks
  21. 21. Design PerformanceContent Accessibility NetworkFrameworks Devices
  22. 22. Let's talk HTTP
  23. 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. 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. 25. the-responsible.dev
  26. 26. How can we use headers to make this site better?
  27. 27. The web is a scary place
  28. 28. thenextweb.com/contributors/2018/03/10/protect-website-cryptojacking-attacks/
  29. 29. shoptalkshow.com/episodes/special-one-one-hacker/
  30. 30. blog.npmjs.org/post/180565383195/details-about-the-event-stream-incident
  31. 31. www.twilio.com/blog/learned-about-security-from-calling-35-contact-centers
  32. 32. www.twilio.com/blog/learned-about-security-from-calling-35-contact-centers We always rely on others
  33. 33. The web has to be safe!
  34. 34. HTTPS
  35. 35. HTTP/2 ServiceWorker getUserMedia() ...
  36. 36. whynohttps.com
  37. 37. requestmap.webperf.tools
  38. 38. Ensure encryption
  39. 39. Strict-Transport-Security: max-age=1000
  40. 40. Strict-Transport-Security: max-age=1000; includeSubDomains
  41. 41. Strict-Transport-Security: max-age=1000; includeSubDomains; preload
  42. 42. chromium.googlesource.com/chromium/src/net/+/master/http/ transport_security_state_static.json
  43. 43. chromium.googlesource.com/chromium/src/net/+/master/http/ transport_security_state_static.json
  44. 44. caniuse.com/#feat=stricttransportsecurity
  45. 45. Upgrade HTTP requests
  46. 46. Content-Security-Policy: upgrade-insecure-requests
  47. 47. Limit what's allowed
  48. 48. base-uri block-all-mixed-content connect-src default-src disown-opener 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
  49. 49. base-uri block-all-mixed-content connect-src default-src disown-opener 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
  50. 50. base-uri block-all-mixed-content connect-src default-src disown-opener 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
  51. 51. the-responsible.dev
  52. 52. <a href="https://..." target="_blank"> Link </a>
  53. 53. <a href="https://..." target="_blank" rel="noopener"> Link </a>
  54. 54. base-uri block-all-mixed-content connect-src default-src disown-opener 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
  55. 55. <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*;">
  56. 56. 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
  57. 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
  58. 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
  59. 59. 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
  60. 60. Content-Security-Policy: default-src 'self'; script-src 'sha256-blL...' <script> console.log('Inline script executing ...'); </script>
  61. 61. Content-Security-Policy: default-src 'self'; script-src 'nonce-abc...' <script nonce="abcdef"> console.log('Inline script executing ...'); </script>
  62. 62. caniuse.com/#feat=contentsecuritypolicy
  63. 63. * caniuse.com/#feat=contentsecuritypolicy2 * * some stuff missing or "misbehaving"
  64. 64. httparchive.org
  65. 65. How many pages use CSP?
  66. 66. USE CSP DON'T USE CSP 94% 6%
  67. 67. USE CSP DON'T USE CSP 94% 6% You should use it!
  68. 68. ALWAYS MONITOR YOUR CSP REPORTS AND "TEST IN PRODUCTION" WITH REPORT- ONLY BEFORE ENFORCING THEM! Troy Hunt
  69. 69. the-responsible.dev/safe/
  70. 70. The web is crucial for people.
  71. 71. Your sh** doesn't work in Africa. William Imoh
  72. 72. You get 6MB for 2Euros but you have only 24h to use them! Right...
  73. 73. whatdoesmysitecost.com
  74. 74. The web has to be affordable!
  75. 75. Don't request the same content over and over again
  76. 76. Cache-Control: max-age=31536000, public
  77. 77. Cache-Control: max-age=31536000, public, immutable
  78. 78. immutable developer.mozilla.org/en-US/docs/Web/HTTP/ Headers/Cache-Control
  79. 79. csswizardry.com/2019/03/cache-control-for-civilians/
  80. 80. Send the right data
  81. 81. Accept-Encoding: gzip, deflate, br
  82. 82. But Brotli compression is so slow!
  83. 83. GZIP Brotlivs
  84. 84. GZIP Brotlivs Default Mode6 11
  85. 85. GZIP Brotli Default Mode vs 6 11
  86. 86. GZIP Brotli Optimal middle ground vs 6 4
  87. 87. GZIP Brotli Optimal middle ground vs 6 4 Brotli tends to compress better with the same speed
  88. 88. GZIP Brotli Optimal middle ground vs 6 4 You don't have to do it on the fly...
  89. 89. blogs.akamai.com/2016/02/understanding-brotlis-potential.html
  90. 90. caniuse.com/#feat=brotli
  91. 91. Serve tailored media
  92. 92. <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"
  93. 93. Accept: image/webp, image/apng, image/*,*/*;q=0.8
  94. 94. Accept-CH: Width, Viewport-Width Accept-CH-Lifetime: 100 Request URL: https://.../header.jpg
 Viewport-Width: 980 Width: 1064
  95. 95. <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
  96. 96. <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
  97. 97. speaking.jeremy.codes/yD4dKY/take-a-client-hint
  98. 98. Save data
  99. 99. save-data: on if ("connection" in navigator) { if (navigator.connection.saveData === true) { // Implement data saving operations here. } }
  100. 100. Let's use the platform and make these features more visible
  101. 101. blog.chromium.org/2019/03/chrome-lite-pages-for-faster-leaner.html
  102. 102. blog.chromium.org/2019/03/chrome-lite-pages-for-faster-leaner.html I'm not sure how I feel about that...
  103. 103. timkadlec.com/remembers/2019-03-14-making-sense-of-chrome-lite-pages/
  104. 104. Cache-Control: max-age=31536000, public, no-transform
  105. 105. Be aware of CDNs and proxies – use vary
  106. 106. the-responsible.dev/affordable/
  107. 107. The web is with us every day
  108. 108. 2018.bloomca.me
  109. 109. It has to be respectful!
  110. 110. Get stuff "down" as quickly as possible
  111. 111. Link: </fwdays.svg>; rel=preload; as=image <link rel="preload" href="/fwdays.svg" as="image">
  112. 112. Link: </fwdays.svg>; rel=preload; as=image; no-push <link rel="preload" href="/fwdays.svg" as="image">
  113. 113. Link: </fwdays.svg>; rel=preload; as=image; no-push <link rel="preload" href="/fwdays.svg" as="image"> This is great to speed up critical resources
  114. 114. caniuse.com/#feat=link-rel-preload * link element but no headers *** ** behind a flag
  115. 115. Don't annoy the user (aka. the AMP reaction)
  116. 116. speakerdeck.com/stefanjudis/amp-tries-to-fix-the-web-what-can-we-learn-from-it?slide=112
  117. 117. Feature-Policy: vibrate 'none'; geolocation 'none'
  118. 118. 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
  119. 119. 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
  120. 120. 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
  121. 121. <iframe allow="camera 'none'; microphone 'none'"> document.policy.allowedFeatures(); // → ["geolocation", "midi", ...] document.policy.allowsFeature('geolocation'); // → true document.policy.getAllowlistForFeature('geolocation'); // → ["https://example.com"]
  122. 122. <iframe allow="camera 'none'; microphone 'none'"> document.policy.allowedFeatures(); // → ["geolocation", "midi", ...] document.policy.allowsFeature('geolocation'); // → true document.policy.getAllowlistForFeature('geolocation'); // → ["https://example.com"] JS API is still
 under discussion...
  123. 123. What happened to the most annoying one?
  124. 124. https://github.com/w3c/webappsec-feature-policy/issues/243
  125. 125. caniuse.com/#feat=feature-policy * support only for allow on iframes *
  126. 126. Respect privacy
  127. 127. caniuse.com/#feat=do-not-track
  128. 128. webkit.org/blog/8594/release-notes-for-safari-technology-preview-75/
  129. 129. caniuse.com/#feat=do-not-track
  130. 130. caniuse.com/#feat=do-not-track It was a nice try, but I don't really see that happening...
  131. 131. blog.mozilla.org/futurereleases/2018/10/23/the-path-to-enhanced-tracking-protection/
  132. 132. www.xanjero.com/news/samsung-internet-beta-version-9-2-now-includes-oneui-design-smart- anti-tracking-and-more-features/
  133. 133. the-responsible.dev/respectful/
  134. 134. Building for the web is very hard Me
  135. 135. Design PerformanceContent Accessibility DevicesNetworkFrameworks
  136. 136. Lighthouse
  137. 137. webhint.io
  138. 138. If you want to get a more complete overview...
  139. 139. schepp.github.io/HTTP-headers
  140. 140. The web has to be safe...
  141. 141. The web has to be safe, affordable...
  142. 142. The web has to be safe, affordable and respectful...
  143. 143. ... so that it really is
 for everybody!
  144. 144. @stefanjudis www.stefanjudis.com Thanks. my-links.online/the-responsible-dev

×