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 full-size 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 full-size slide

  3. 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 full-size slide

  4. 5
    ©2019
    window.open

    View full-size slide

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

    View full-size slide

  6. 7
    ©2019
    window.open

    View full-size slide

  7. 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 full-size slide

  8. 9
    ©2019
    nats.aero

    View full-size slide

  9. 10
    ©2019
    2007

    View full-size slide

  10. 11
    ©2019
    Apple iPhone

    6 million sold
    • 8GB storage
    • The first user friendly web
    browser in a phone
    • No mobile data

    View full-size slide

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

    View full-size slide

  12. 14
    ©2019
    Flash

    View full-size slide

  13. 15
    ©2019
    2015

    View full-size slide

  14. 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 full-size slide

  15. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  18. 23
    ©2019
    2019

    View full-size slide

  19. 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 full-size slide

  20. 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 full-size slide

  21. 27
    ©2019
    Feature-Policy

    View full-size slide

  22. 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 full-size slide

  23. 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 full-size slide

  24. 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 full-size slide

  25. 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 full-size slide

  26. 32
    ©2019
    Insert highly
    unwise live demo

    View full-size slide

  27. 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 full-size slide

  28. 39
    ©2019
    How do we debug this?

    View full-size slide

  29. 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 full-size slide

  30. 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 full-size slide

  31. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  34. 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 full-size slide

  35. 50
    ©2019
    featurepolicy.info

    View full-size slide

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

    View full-size slide