为何Permissions-Policy: camera=()头无法阻止应用摄像头访问？

我尝试通过Permissions-Policy HTTP响应头限制Web应用的摄像头访问，但未达到预期效果。设置的头信息如下：

Permissions-Policy: camera=()

尽管配置了上述头，我仍能通过navigator.mediaDevices.getUserMedia()在应用中正常访问摄像头。

React测试代码 #

import React, { useState } from 'react';

function TestHeaders() {
    const [cameraAccess, setCameraAccess] = useState(null);
    const [errorMessage, setErrorMessage] = useState('');

    const testCameraAccess = () => {
        // Requesting camera access
        navigator.mediaDevices
            .getUserMedia({ video: true })
            .then((stream) => {
                // If camera access is granted
                setCameraAccess(true);
                console.log('Camera access granted:', stream);
                stream.getTracks().forEach((track) => track.stop()); // Close camera after test
            })
            .catch((error) => {
                // If camera access is denied
                setCameraAccess(false);
                setErrorMessage(error.message);
                console.error('Camera access denied:', error);
            });
    };

    return (
        <div>
            <h1>Test Camera Access</h1>
            <button onClick={testCameraAccess}>Test Camera</button>
            {cameraAccess === null ? (
                <p>Click the button to test camera access</p>
            ) : cameraAccess ? (
                <p style={{ color: 'green' }}>Camera access granted</p>
            ) : (
                <p style={{ color: 'red' }}>
                    Camera access denied:
                    {errorMessage}
                </p>
            )}
        </div>
    );
}

export default TestHeaders;

已执行的排查步骤 #

• 确认Permissions-Policy头已正确包含在HTTP响应头中，而非仅HTML meta标签
• 清除浏览器缓存并在无痕窗口测试，确保未读取缓存响应
• 确认使用的是支持Permissions-Policy的现代浏览器
• 在不同浏览器及版本中测试功能
• 确认头信息拼写和格式正确

结果对比 #

实际结果：camera=()与camera=(self)均允许摄像头访问
预期结果：根据文档，camera=()应禁止摄像头访问，camera=(self)应允许同源请求访问摄像头

恳请提供相关分析及额外排查步骤！

内容的提问来源于stack exchange，提问作者Karamjeet Singh