Originally presented at WordCamp Nordic 2019

1. Felix Arntz / WordCamp Nordic 2019
Web Policies & Reporting
Defining Contracts Between Your Site and the Browser

2. The web is constantly evolving
● Responsive Images
● AJAX Requests
● Geolocation Integration
● Add to Home Screen
● Web Payments
● ...

3. Web Features,
being used in the wild
(don’t worry, my site is actually not that terrible)

4. So we have all these cool features,
but how do we use them responsibly?

5. Feature Policy
https://w3c.github.io/webappsec-feature-policy/

6. Example: Geolocation
Feature-Policy: geolocation 'none'

7. Example: Oversized images
Feature-Policy: oversized-images 'none'

8. Example: Oversized images
Feature-Policy: oversized-images 'none'

9. More Supported Features
● autoplay 'none'
● lazyload
● sync-xhr 'none'
● camera 'none' (coming soon)
● fullscreen 'none' (coming soon)
● ...
Try it at
feature-policy-demos.appspot.com

10. Current Browser Support
● Chrome 60+
● Safari 11.1+
● Opera 47+
See full browser support
caniuse.com/#feat=feature-policy

11. Reporting API
https://w3c.github.io/reporting/

12. Example
Report-To: {
"group": "default",
"max_age": 10886400,
"endpoints": [{
"url": "https://example.com/wp-json/reporting-api"
}]
}

13. Supported Report Types
● csp
● crash
● deprecation
● network-error
● feature-policy-violation (coming soon, see crbug.com/867471)
● ...

14. Current Browser Support
● Chrome 69+

15. What about
WordPress?

16. Feature Policy for WordPress
wordpress.org/plugins/feature-policy/

17. Reporting API for WordPress
wordpress.org/plugins/reporting-api/

18. Further Reading & Experimenting
● https://developers.google.com/web/updates/2018/06/feature-policy
● https://developers.google.com/web/updates/2018/09/reportingapi
● https://developers.google.com/web/updates/2018/07/reportingobserver
● https://featurepolicy.rocks
● Try the WordPress plugins and give feedback!

19. Proprietary + Confidential
Thank You
Felix Arntz
@felixarntz