Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Andrew Betts

March 12, 2019
Tweet

More Decks by Andrew Betts

Other Decks in Technology

Transcript

  1. 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.
  2. 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
  3. 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
  4. 11 ©2019 Apple iPhone • 6 million sold • 8GB

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

    ups, but Flash is using 3x times the memory of your browser
  6. 16 ©2019 Samsung Galaxy S7 • Android 8 • Multiple

    web browsers installable and updatable • Octa-core (4x2.3 GHz Mongoose & 4x1.6 GHz Cortex-A53)
  7. 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/
  8. 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?
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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?
  15. 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
  16. 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
  17. 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
  18. 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
  19. 51 ©2019 Thank you! Andrew Betts Tweet me at @triblondon

    [email protected] These slides are published at fastly.us/feature-pol