What is the Feature-Policy header?
The Feature-Policy is an HTTP response header. It is a mechanism for website owners to enable or disable certain browser features and APIs for web pages and embedded frames. This allows developers to improve the quality of their websites while ensuring restricted hardware access to third-party sites.
Feature-Policy can be used in the following scenarios:
Preventing a third-party site from accessing a user's microphone or camera through the embedded iframe
Catching the use of outdated APIs
Altering the default behavior of autoplay on videos
Ensuring images are optimized and sized correctly
Syntax
The command used to implement the Feature-Policy header is shown below:
Feature-Policy: <directive> <allow-list>
Parameters
There are two parameters in the header: directive and allow-list. Each of these has various possible values, as outlined below:
The directivefeature
This is the feature on which the allow-list is applied. The types of features are specified in the table below:
Directives in Feature-Policy
Directives | Description |
accelerometer | Dictates whether the web page is allowed to get information about the device acceleration through the |
ambient-light-sensor | Controls whether the web page is allowed to gather information about the intensity of light around the device through the |
autoplay | Dictates if the web page is allowed to autoplay media through the |
battery | Dictates whether the web page is allowed to get the device's battery charge level through the |
camera | Dictates whether the web page is allowed to access the camera. |
display-capture | Controls whether the web page is allowed to capture screen content through the |
document-domain | Dictates whether the web page is allowed to set the domain portion of the origin. |
encrypted-media | Dictates whether the web page is allowed to use the |
fullscreen | Dictates whether the web page is allowed full screen access through |
gamepad | Dictates whether the web page is allowed access to gamepads and other game controllers using the |
geolocation | Dictates whether the web page can determine the location of the device using the |
gyroscope | Dictates whether the web page is allowed to get information about the orientation of the device using the |
layout-animations | Dictates whether the web page is allowed to show layout animations and transitions. |
legacy-image-formats | Dictates whether the web page can display images in legacy formats, which are file formats that have since been updated. |
magnetometer | Dictates whether the web page is allowed to get information about the magnetic orientation of the device using the |
microphone | Dictates whether the web page is allowed to access the device's microphone. |
midi | Dictates whether the web page is allowed to use the |
oversized-images | Dictates whether the web page can download and display oversized, or large, images. |
payment | Dictates whether the web page is allowed to use the |
picture-in-picture | Dictates whether the web page can play videos in the picture-in-picture mode, i.e., allow watching videos in a floating video. |
publickey-credentials-get | Dictates whether the web page can use the |
seaker-selection | Dictates whether the web page is allowed to select speakers. |
sync-xhr | Dictates whether the web page can make synchronous |
usb | Controls whether the web page is allowed to use the |
screen-wake-lock | Dictates whether the web page can influence the device's power saving mode through the |
web-share | Dictates whether the web page can use the |
xr-spatial-tracking | Dictates whether the web page is allowed to use the |
The allow-list
This list of origins indicates how the browser feature can be used. It consists of one or more of the following values:
*: This indicates that the feature is allowed on the current web page and all nested (or third-party) content, regardless of their origin. This may only be used alone.'self': This feature is allowed in the current document and all nested (or third-party) content of the same origin. Therefore, the feature is not allowed on cross-origin websites.'src': This is only valid when the iframeallowattribute is used. It permits a feature as long as the origin of the web page matches thesrcattribute in the iframe.'none': This does not allow the feature to be used on the web page or any nested iframes/sites. This may only be used alone.<origin(s)>: This indicates that the feature is allowed for specific origins or domains. These domains can be listed and separated by a space.
Example
Let's suppose a website uses video input for its own functionality. However, the website owner wants to disable the geolocation feature for user privacy concerns. Given this information, the Feature-Policy header may look like the following:
Feature-Policy: camera 'self'; geolocation 'none'
This allows the website (or same-origin sites) to access the device's camera and disable the geolocation API.
Browser compatibility
Since Feature-Policy header is a recent header, it is not compatible with all browsers. Currently, the browsers that support this header are Chrome, Edge, and Opera. Other browsers offering partial support are Firefox and Safari.
Moreover, the directives, or features, are not standard across each browser, even if they support the header. For instance, the battery directive is not supported in Chrome, while the oversized-images directive is not supported in Opera.
Free Resources
