Making less of the web with Feature Policy

1 ©2019 Making less of the web with Feature-Policy Andrew
Betts Developer relations engineer

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.

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

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

11 ©2019 Apple iPhone • 6 million sold • 8GB
storage • The ﬁrst user friendly web browser in a phone • No mobile data

12 ©2019 Flash is heating your apartment We ﬁxed pop
ups, but Flash is using 3x times the memory of your browser

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 ©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/

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

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?

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

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 ©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 ©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 ©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

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?

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 notiﬁed when violations happen

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

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

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 eﬀort

51 ©2019 Thank you! Andrew Betts Tweet me at @triblondon
[email protected] These slides are published at fastly.us/feature-pol

Making less of the web with Feature Policy

Making less of the web with Feature Policy

More Decks by Andrew Betts

Other Decks in Technology

Featured

Transcript