

This is because iframes inherit the policies of their parent page. The header can control features in the main response + any iframe'd content within the page. The biggest difference between the HTTP header and the allow attribute is that the allow attribute only controls features within an iframe. Through the Feature-Policy HTTP header.# Using Feature Policyįeature Policy provides two ways to control features: If the site or embedded third-party content attempts to violate any of the developer's preselected rules, the browser overrides the behavior with better UX or blocks the API altogether. They inform the browser about what the developer's intent is and thus, help keep us honest when our app tries to go off the rails and do something bad. Policies are a contract between developer and browser. prevent layout thrashing) and are not too big for the viewport (e.g. Ensure images are sized properly (e.g.Block the use of outdated APIs like synchronous XHR and document.write().Allow iframes to use the fullscreen API.Restrict a site from using sensitive APIs like camera or microphone.Change the default behavior of autoplay on mobile and third party videos.Here are examples of things you can do with Feature Policy: These policies restrict what APIs the site can access or modify the browser's default behavior for certain features. With Feature Policy, you opt-in to a set of "policies" for the browser to enforce on specific features used throughout your site. That Great Experience ™ you once achieved may begin to deteriorate and UX starts to suffer! Feature Policy is designed to keep you on track. As your project evolves, developers come on board, new features land, and the codebase grows. It's even harder to keep that experience great over time. It's hard enough to build a top-notch web app that nails performance and uses all the latest best practices. # Introductionīuilding for the web is a rocky adventure.

The feature policies themselves are little opt-in agreements between developer and browser that can help foster our goals of building (and maintaining) high quality web apps. It's like CSP but instead of controlling security, it controls features! Feature Policy allows web developers to selectively enable, disable, and modify the behavior of certain APIs and web features in the browser.
