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. 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. 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
    [email protected]
    These slides are published at
    fastly.us/feature-pol

    View Slide