WeChat - Feature policy violation: accelerometer is not allowed in this document

Question

From Angular application we're using on WeChat the last Tencent Captcha API and this error appear in DevTools console (on desktop - windows - Chrome webkit):

[Violation] Feature policy violation: accelerometer is not allowed in this document.

Unfortunately, there isn't more stacktraces.

It seems Tencent Captcha try to use through iframe the accelerometer browser API which is not allowed from our website. We need to add an HTTP header like 'Feature-Policy : accelerometer ...'

https://developer.mozilla.org/en-US/docs/Web/API/Accelerometer

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy

I don't know where we should add this http header

thks

Answer 1

In your application server you should add a response header called Feature-Policy with a value of one of the following:

• "accelerometer *"
• "accelerometer 'self'"
• "accelerometer 'src'"

The exact allowList argument you provide following accelerometer will depend on your specific circumstances and requirements (re. MDN docs - Feature-Policy: Syntax).

In an application using an Express server, the response header can be set by adding this line in a piece of middleware:

response.set('Feature-Policy', "accelerometer 'self'"

e.g.

// app.js

import express from 'express';

import applyFeaturePolicyHeaderMiddleware from './apply-feature-policy-header-middleware';

const app = express();

app.use(
    applyFeaturePolicyHeaderMiddleware
);

// apply-feature-policy-header-middleware.js

export default (request, response, next) => {

    response.header('Feature-Policy', "accelerometer 'self'");

    next();

}

You can then ensure the Feature Policy is present by checking in the DevTools Network tab that the request for the page document includes the feature-policy header under the Response Headers.