Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set feature policy headers in JS

I am getting the following errors in my console on my site:

Error with Feature-Policy header: Unrecognized feature: 'unsized-media'.
Error with Feature-Policy header: Unrecognized feature: 'ambient-light-sensor'.
Error with Feature-Policy header: Unrecognized feature: 'speaker'.
Error with Feature-Policy header: Unrecognized feature: 'vr'.

I am a front end web developer so I'm trying to set this in JS as described here https://developers.google.com/web/updates/2018/06/feature-policy#js without messing with my server config.

console.log(document.featurePolicy.allowedFeatures());

results in:

["geolocation", "midi", "ch-ect", "usb", "magnetometer", "picture-in-picture", "publickey-credentials-get", "accelerometer", "ch-lang", "document-domain", "encrypted-media", "ch-downlink", "ch-ua-arch", "xr-spatial-tracking", "ch-ua-platform-version", "ch-width", "ch-ua-model", "sync-xhr", "camera", "ch-viewport-width", "payment", "ch-rtt", "ch-ua-full-version", "fullscreen", "autoplay", "ch-dpr", "ch-ua-platform", "screen-wake-lock", "gyroscope", "ch-ua-mobile", "ch-device-memory", "ch-ua", "microphone"]

Also

document.featurePolicy.allowsFeature('unsized-media', 'self');

results in:

Invalid origin url for feature 'unsized-media': self.
like image 361
Paddy Hallihan Avatar asked Jul 23 '20 09:07

Paddy Hallihan


People also ask

How do you use feature policy headers?

Feature-Policy is an HTTP header that can allow website owners to toggle on or off certain of those web browser features and API. This effect is caused to both the host website and on the pages which are embedded in it. To use this HTTP header, we can edit the . htaccess file or server config file.

What is feature policy header?

The HTTP Feature-Policy header provides a mechanism to allow and deny the use of browser features in its own frame, and in content within any <iframe> elements in the document. For more information, see the main Feature Policy article. Header type.

How do I add permission policy to header?

You can find the Permissions Header policy settings in the Premium tab from your Really Simple SSL Dashboard (Settings -> SSL -> Premium). To enable the Permission Policy header, enable the 'Permissions Policy' option. Once enabled, a new block containing a list of directives and their values will appear.


1 Answers

You can't.

Feature policies are set by the server (via the Feature-Policy or Permissions-Policy headers) and control what JavaScript is allowed to do.

It would be pointless if the JavaScript could grant itself permission to do anything it liked.

like image 68
Quentin Avatar answered Oct 16 '22 17:10

Quentin