Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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.

Slide 3

Slide 3 text

3 ©2019 2000

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

5 ©2019 window.open

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

7 ©2019 window.open

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

9 ©2019 nats.aero

Slide 10

Slide 10 text

10 ©2019 2007

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

13 ©2019

Slide 14

Slide 14 text

14 ©2019 Flash

Slide 15

Slide 15 text

15 ©2019 2015

Slide 16

Slide 16 text

16 ©2019 Samsung Galaxy S7 • Android 8 • Multiple web browsers installable and updatable • Octa-core (4x2.3 GHz Mongoose & 4x1.6 GHz Cortex-A53)

Slide 17

Slide 17 text

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/

Slide 18

Slide 18 text

18 ©2019

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

20 ©2019 Walled gardens of content? Developer creativity constrained by new "web-lite" formats hosted by platforms

Slide 21

Slide 21 text

21 ©2019

Slide 22

Slide 22 text

22 ©2019

Slide 23

Slide 23 text

23 ©2019 2019

Slide 24

Slide 24 text

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?

Slide 25

Slide 25 text

25 ©2019

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

27 ©2019 Feature-Policy

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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 ... HTTP requests used to be pretty simple

Slide 30

Slide 30 text

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’ ... Now we're adding a lot of new headers

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

32 ©2019 Insert highly unwise live demo

Slide 33

Slide 33 text

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?

Slide 34

Slide 34 text

34 ©2019

Slide 35

Slide 35 text

35 ©2019

Slide 36

Slide 36 text

36 ©2019

Slide 37

Slide 37 text

39 ©2019 How do we debug this?

Slide 38

Slide 38 text

40 ©2019

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

44 ©2019

Slide 43

Slide 43 text

45 ©2019

Slide 44

Slide 44 text

46 ©2019 [email protected]

Slide 45

Slide 45 text

47 ©2019 github.com/ slightlyoff/ never_slow_mode/

Slide 46

Slide 46 text

48 ©2019 "Never slow" policy bundle Per-interaction resource limits Feature-Policy: allow-slow 'none'

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

50 ©2019 featurepolicy.info

Slide 49

Slide 49 text

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