Feature Policy

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Feature Policy allows web developers to selectively enable, disable, and modify the behavior of certain features and APIs in the browser. It is similar to CSP but controls features instead of security behaviour.

In a Nutshell

Feature Policy provides a mechanism to explicitly declare what functionality is used (or not used), throughout your website. This allows you to lock in best practices, even as the codebase evolves over time and more safely compose third-party content, by limiting which features are available.

With Feature Policy, you opt-in to a set of "policies" for the browser to enforce on specific features used throughout a website. These policies restrict what APIs the site can access or modify the browser's default behavior for certain features.

Examples of what you can do with Feature Policy:

  • Change the default behavior of autoplay on mobile and third party videos.
  • Restrict a site from using sensitive APIs like camera or microphone.
  • Allow iframes to use the fullscreen API.
  • Block the use of outdated APIs like synchronous XHR and document.write().
  • Ensure images are sized properly and are not too big for the viewport.

Concepts and usage

Feature Policy allows you to control which origins can use which features, both in the top-level page and in embedded frames. Essentially, you write a policy, which is an allowed list of origins for each feature. For every feature controlled by Feature Policy, the feature is only enabled in the current document or frame if its origin matches the allowed list of origins.

For each policy-controlled feature, the browser maintains a list of origins for which the feature is enabled, known as an allowlist. If you do not specify a policy for a feature, then a default allowlist will be used. The default allowlist is specific to each feature.

Writing a policy

A policy is described using a set of individual policy directives. A policy directive is a combination of a defined feature name, and an allowlist of origins that can use the feature.

Specifying your policy

Feature Policy provides two ways to specify policies to control features:

The primary difference between the HTTP header and the allow attribute is that the allow attribute only controls features within an iframe. The header controls features in the response and any embedded content within the page.

For more details see Using Feature Policy.

Types of policy-controlled features

Though Feature Policy provides control of multiple features using a consistent syntax, the behavior of policy controlled features varies and depends on several factors.

The general principle is that there should be an intuitive or non-breaking way for web developers to detect or handle the case when the feature is disabled. Newly introduced features may have an explicit API to signal the state. Existing features that later integrate with Feature Policy will typically use existing mechanisms. Some approaches include:

  • Return "permission denied" for JavaScript API that require user permission grants.
  • Return false or error from an existing JavaScript API that provides access to feature.
  • Change the default values or options that control the feature behaviour.

The current set of policy-controlled features fall into two broad categories:

  • Enforcing best practices for good user experiences
  • Providing granular control over sensitive or powerful features

Best practices for good user experiences

There are several policy-controlled features to help enforce best practices for providing good performance and user experiences.

In most cases, the policy-controlled features represent functionality that when used will negatively impact the user experience. To avoid breaking existing web content, the default for such policy-controlled features is to allow the functionality to be used by all origins. Best practices are then enforced by using policies that disable the policy-controlled features. For more details see "Enforcing best practices for good user experiences".

The features include:

  • Animations
  • Image compression
  • Image downscaling
  • Legacy image formats
  • Synchronous scripts
  • Synchronous XMLHTTPRequest
  • Unsized media

Granular control over certain features

The web provides functionality and APIs that may have privacy or security risks if abused. In some cases, you may wish to strictly limit how such functionality is used on a website. There are policy-controlled features to allow functionality to be enabled/disabled for specific origins or frames within a website. Where available, the feature integrates with the Permissions API, or feature-specific mechanisms to check if the feature is available.

The features include:

  • Accelerometer
  • Ambient light sensor
  • Autoplay
  • Camera
  • Encrypted media
  • Fullscreen
  • Geolocation
  • Gyroscope
  • Lazyload
  • Microphone
  • Midi
  • PaymentRequest
  • Picture-in-picture
  • Speaker
  • USB
  • VR / XR

Examples

Specifications

Specification Status Comment
Feature Policy
The definition of 'Feature-Policy' in that specification.
Draft Initial definition. Defines the Feature-Policy header. Directives are defined in the specs for the features they control. See individual directive pages for details.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support60 No No No47 No
accelerometer691 No No No562 No
ambient-light-sensor691 No No No562 No
animations684 No No No555 No
autoplay64 No No No51 No
camera59 No No No48 No
encrypted-media59 No No No48 No
fullscreen57 No No No46 No
geolocation56 No No No45 No
gyroscope691 No No No562 No
legacy-image-formats684 No No No555 No
magnetometer691 No No No562 No
maximum-downscaling-image684 No No No555 No
microphone59 No No No48 No
midi56 No No No45 No
payment56 No No No45 No
picture-in-picture No No No No No No
speaker59 No No No48 No
sync-xhr657 No No No528 No
unsized-media6610 No No No5311 No
usb60 No No No47 No
vibrate56 No No No43 No
vr62 No No No49 No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support6060 No No47 No No
accelerometer693691 No No562 No No
ambient-light-sensor693691 No No562 No No
animations686684 No No555 No No
autoplay6464 No No51 No No
camera5959 No No48 No No
encrypted-media5959 No No48 No No
fullscreen5757 No No46 No No
geolocation5656 No No45 No No
gyroscope693691 No No562 No No
legacy-image-formats686684 No No555 No No
magnetometer693691 No No562 No No
maximum-downscaling-image686684 No No555 No No
microphone5959 No No48 No No
midi5656 No No45 No No
payment5656 No No45 No No
picture-in-picture No No No No No No No
speaker5959 No No48 No No
sync-xhr659657 No No528 No No
unsized-media66126610 No No5311 No No
usb6060 No No47 No No
vibrate5656 No No43 No No
vr6262 No No49 No No

1. From version 69: this feature is behind the #enable-experimental-productivity-features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.

2. From version 56: this feature is behind the #enable-experimental-productivity-features preference (needs to be set to Enabled).

3. From version 69: this feature is behind the #enable-experimental-productivity-features preference (needs to be set to Enabled).

4. From version 68: this feature is behind the #enable-experimental-productivity-features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.

5. From version 55: this feature is behind the #enable-experimental-productivity-features preference (needs to be set to Enabled).

6. From version 68: this feature is behind the #enable-experimental-productivity-features preference (needs to be set to Enabled).

7. From version 65: this feature is behind the #enable-experimental-productivity-features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.

8. From version 52: this feature is behind the #enable-experimental-productivity-features preference (needs to be set to Enabled).

9. From version 65: this feature is behind the #enable-experimental-productivity-features preference (needs to be set to Enabled).

10. From version 66: this feature is behind the #enable-experimental-productivity-features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.

11. From version 53: this feature is behind the #enable-experimental-productivity-features preference (needs to be set to Enabled).

12. From version 66: this feature is behind the #enable-experimental-productivity-features preference (needs to be set to Enabled).

See also

Document Tags and Contributors

Contributors to this page: Malvoz, jpchase, jpmedley
Last updated by: Malvoz,