Feature Policy & the Well-Lit Path for Web Development

on YouTube ↗22m

" summary

Feature Policy and the Reporting API provide concrete guardrails: an HTTP header or iframe Allow attribute enforces policies like oversized images policy that blocks images with a bytes‑to‑pixels ratio over 0.5, saving on average >500 KB on 10% of top sites and cutting load by up to 10 seconds on 3G. Reporting works via a clientside reporting observer or report‑to endpoint, a devtools extension previews policies, and applying policies to the site surfaces real, fixable violations.

AI-written summary · about

" chapters (28)

1. 0:00Intro
2. 0:27Web Consults
3. 1:12The WellLit Path
4. 1:38Guard Rails
5. 2:09Amp
6. 3:09Common Problems
7. 3:31Page Size
8. 3:51Load Time
9. 5:30Images without Explicit Sizes
10. 5:55How does this all work
11. 6:35Feature Policy HTTP Header
12. 7:12Feature Policies
13. 8:17Feature Policy Example
14. 10:01Allow Attribute
15. 12:09Best Practices
16. 12:51Where to Feed It
17. 13:54Policy Reporting
18. 15:03Browser Interventions
19. 15:47Console Messages
20. 16:15Reporting API
21. 16:41Reporting Observer
22. 17:20Reporting Fields
23. 17:43Reporting Header
24. 18:43CSP Reporting API
25. 19:20Where can you use this
26. 19:54Available policies
27. 20:28Dev Tools Extension
28. 21:21Wrapup

" related talks

• 30mHTTP headers for the responsible developerStefan Judis · RuhrJS 2019
• 40mHTTP Headers for the Responsible DeveloperStefan Judis · Web Unleashed 2019
• 45mHeaders for hackersAndrew Betts · JS Fest 2019 Spring
• 17mContent Security Policy: The application security Swiss Army KnifeScott Helme · dotSecurity 2016
• 46mContent Security Policies: Let's Break StuffMatt Brunt · Dutch PHP Conference 2018
• 30mHeaders for HackersAndrew Betts · Nordic.js 2018
• 32mBanish Image Bloat: Achieving Peak Performance with Image Performance BudgetsMyriam Jessier · DevReach 2023
• 10mUsing Content Security Policy for PrivacyDevin Lundberg · PEPR '23