Making less of the web with Feature Policy

Making less of the web with Feature Policy

The web platform has seen a decade of furious expansion, with websites now able to access USB, vibration, bluetooth, and geolocation, as well as store huge amounts of data on end user devices, trigger background sync and notifications, and even get paid from users' digital wallets. But with this expansion has come an increased scope for attacks, costly mistakes and performance regressions. Feature policy is a new feature designed to actually disable or limit features of the platform. With a feature policy, developers can solve performance issues, improve security, police their development team's best practices, and even stop third party scripts from misbehaving. All with one new HTTP header.

Fd1af6cc88403788ae1e5710871bbf62?s=128

Andrew Betts

March 12, 2019
Tweet

Transcript

  1. 1 ©2019 Making less of the web with Feature-Policy Andrew

    Betts Developer relations engineer
  2. 2 ©2019 2 Some things are a bad idea Any

    project as old as the web is littered with outdated practices and things that seemed like a good idea at the time.
  3. 3 ©2019 2000

  4. 4 ©2019 Nokia 3310 • 126 million sold • Enhanced

    SMS up to 3 times the length of a normal message • 8 call history • 245 hours standby time • Interchangeable covers
  5. 5 ©2019 window.open

  6. 6 ©2019 engadget.com/2014/08/14/the-creator-of-the-pop-up-ad-says-sorry/

  7. 7 ©2019 window.open

  8. 8 ©2019 Parties to the web platform We all pull

    in different directions, and the ecosystem evolves You (a developer) Developers Browser vendors Major websites
  9. 9 ©2019 nats.aero

  10. 10 ©2019 2007

  11. 11 ©2019 Apple iPhone • 6 million sold • 8GB

    storage • The first user friendly web browser in a phone • No mobile data
  12. 12 ©2019 Flash is heating your apartment We fixed pop

    ups, but Flash is using 3x times the memory of your browser
  13. 13 ©2019

  14. 14 ©2019 Flash

  15. 15 ©2019 2015

  16. 16 ©2019 Samsung Galaxy S7 • Android 8 • Multiple

    web browsers installable and updatable • Octa-core (4x2.3 GHz Mongoose & 4x1.6 GHz Cortex-A53)
  17. 17 ©2019 Webpages are getting bigger 250% Increase in data

    size of an average web page between 2011 and 2017 speedcurve.com/blog/web-performance-page-bloat/
  18. 18 ©2019

  19. 19 ©2019 Distributed content platforms Google AMP Facebook instant articles.

    Apple News.
  20. 20 ©2019 Walled gardens of content? Developer creativity constrained by

    new "web-lite" formats hosted by platforms
  21. 21 ©2019

  22. 22 ©2019

  23. 23 ©2019 2019

  24. 24 ©2019 Samsung Fold • Octa-core (1x2.84 GHz Kryo 485

    & 3x2.42 GHz Kryo 485 & 4x1.8 GHz Kryo 485) • Voice assistant • 4 GPS networks • Foldable screen • Wait, what?
  25. 25 ©2019

  26. 26 ©2019 We still need the web to be better.

    • Allow good practices to be declared, recognised and rewarded • Protect openness and decentralisation • Do it collaboratively • Don't break anything
  27. 27 ©2019 Feature-Policy

  28. 28 ©2019 Feature policy is... • An HTTP header (and

    an IFRAME attribute) • Developer-controlled • A statement of conformance that can be enforced by the browser • An open standard you can get involved in and have an opinion on
  29. 29 ©2019 $ telnet bank.example.com 80 GET /statement HTTP/1.1 Host:

    bank.example.com HTTP/1.1 200 OK Date: Tue, 27 Feb 2018 13:28:47 GMT Content-Type: text/html Content-Length: 34882 <html> ... HTTP requests used to be pretty simple
  30. 30 ©2019 $ telnet bank.example.com 80 GET /statement HTTP/1.1 Host:

    bank.example.com HTTP/1.1 200 OK Content-Type: text/html Content-Length: 34882 Cache-Control: private, max-age=3600 Access-Control-Allow-Origin: * Accept-Ranges: bytes Last-Modified: Fri, 02 Feb 2018 07:21:05 GMT Strict-Transport-Security: max-age=31536000; includeSubdomains; Content-Security-Policy: default-src 'self'; report-uri https://csp.example.com/ Accept-CH: DPR, Width, Viewport-Width Feature-Policy: vibrate 'none'; geolocation 'none'; unsized-media ‘none’ <html> ... Now we're adding a lot of new headers
  31. 31 ©2019 Feature-Policy: document-write 'none'; autoplay 'none'; speaker 'self'; unsized-media

    bad3rdparty.example.com How do we write a feature policy? Add an HTTP header to the HTML page response
  32. 32 ©2019 Insert highly unwise live demo

  33. 33 ©2019 Feature-Policy: autoplay 'none'; document-domain 'none'; document-write 'none'; font-display-late-swap

    'none'; layout-animations 'none'; legacy-image-formats 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unoptimized-images 'none'; unsized-media 'none' Testing today's web with the strictest policies When you disallow all 'hopeful deprecations', what happens?
  34. 34 ©2019

  35. 35 ©2019

  36. 36 ©2019

  37. 39 ©2019 How do we debug this?

  38. 40 ©2019

  39. 41 ©2019 const reportHandler = report => { console.log('Uh oh.

    Something happened!'); } const observerConfig = { types: ['feature-policy-violation'], buffered: true } const observer = new ReportingObserver(reportHandler, observerConfig); observer.observe(); Discover feature policy violations in Javascript Attach a ReportingObserver to get notified when violations happen
  40. 42 ©2019 Report-To: { "group": "endpoint-1", "endpoints": [ { "url":

    "https://example.com/reports" } ] } Feature-Policy: ...; report-to endpoint-1 Or use a header to beacon reports to your server Reports are sent even if your page's JS doesn't run
  41. 43 ©2019 geolocation accelerometer midi payment magnetometer layout-animations serial vertical-scroll

    camera usb unoptimized-images oversized-images legacy-image-formats picture-in-picture speaker fullscreen vr document-domain encrypted-media autoplay wake-lock font-display-late-swap unsized-media ambient-light-sensor gyroscope document-write lazyload sync-script sync-xhr microphone
  42. 44 ©2019

  43. 45 ©2019

  44. 46 ©2019 abetts@fastly.com

  45. 47 ©2019 github.com/ slightlyoff/ never_slow_mode/

  46. 48 ©2019 "Never slow" policy bundle Per-interaction resource limits Feature-Policy:

    allow-slow 'none'
  47. 49 ©2019 Shhh, feature policy is coming. Look busy Do

    this stuff now, be smug later: • Async all the things • Optimise media • Reduce bundle sizes • Don't block font rendering • Don't use layout-thrashing animations • Stop using document.write or document.domain • Know which user-consent APIs you are using • Get involved in the spec effort
  48. 50 ©2019 featurepolicy.info

  49. 51 ©2019 Thank you! Andrew Betts Tweet me at @triblondon

    abetts@fastly.com These slides are published at fastly.us/feature-pol