WeChat - Нарушение политики в отношении функций: использование акселерометра в этом документе запрещено.

Question

Из приложения Angular мы используем в WeChat последний Tencent Captcha API, и эта ошибка появляется в консоли DevTools (на рабочем столе - Windows - Chrome webkit):

[Нарушение] Нарушение политики функции: использование акселерометра в этом документе запрещено.

К сожалению, трассировок стека больше нет.

Кажется, Tencent Captcha пытается использовать через iframe API браузера акселерометра, что запрещено на нашем веб-сайте. Нам нужно добавить заголовок HTTP, например "Feature-Policy: акселерометр..."

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

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

Я не знаю, куда нам добавить этот http-заголовок

спасибо

Answer 1

На сервере приложений вы должны добавить заголовок ответа с именем Feature-Policy со значением одного из следующих:

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

Точный allowList аргумент, который вы предоставляете ниже accelerometerбудет зависеть от ваших конкретных обстоятельств и требований (см. документы MDN - Feature-Policy: Syntax).

В приложении, использующем сервер Express, заголовок ответа можно установить, добавив эту строку в промежуточное ПО:

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

например

// 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();

}

Затем вы можете убедиться, что политика функций присутствует, проверив на вкладке DevTools Network, что запрос документа страницы включает feature-policy заголовок под заголовками ответа.