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.

Transcript

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

   View Slide

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.
   

   View Slide

3. 3
   ©2019
   2000
   

   View Slide

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
   

   View Slide

5. 5
   ©2019
   window.open
   

   View Slide

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

   View Slide

7. 7
   ©2019
   window.open
   

   View Slide

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
   

   View Slide

9. 9
   ©2019
   nats.aero
   

   View Slide

10. 10
    ©2019
    2007
    

    View Slide

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

    View Slide

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

    View Slide

13. 13
    ©2019
    

    View Slide

14. 14
    ©2019
    Flash
    

    View Slide

15. 15
    ©2019
    2015
    

    View Slide

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)
    

    View Slide

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/
    

    View Slide

18. 18
    ©2019
    

    View Slide

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

    View Slide

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

    View Slide

21. 21
    ©2019
    

    View Slide

22. 22
    ©2019
    

    View Slide

23. 23
    ©2019
    2019
    

    View Slide

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?
    

    View Slide

25. 25
    ©2019
    

    View Slide

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
    

    View Slide

27. 27
    ©2019
    Feature-Policy
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

32. 32
    ©2019
    Insert highly
    unwise live demo
    

    View Slide

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?
    

    View Slide

34. 34
    ©2019
    

    View Slide

35. 35
    ©2019
    

    View Slide

36. 36
    ©2019
    

    View Slide

37. 39
    ©2019
    How do we debug this?
    

    View Slide

38. 40
    ©2019
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

42. 44
    ©2019
    

    View Slide

43. 45
    ©2019
    

    View Slide

44. 46
    ©2019
    abetts@fastly.com
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

48. 50
    ©2019
    featurepolicy.info
    

    View Slide

49. 51
    ©2019
    Thank you!
    Andrew Betts
    Tweet me at @triblondon
    abetts@fastly.com
    These slides are published at
    fastly.us/feature-pol
    

    View Slide