Permissions-Policy 是 HTTP 响应头或 iframe 的 allow 属性控制的硬性权限闸门，非前端 JS 可控；需用分号分隔、括号标注来源，服务器配置须支持 all-status 并避免 file:// 协议干扰。
Permissions-Policy 不是前端 JS 能开关的开关，它本质是 HTTP 响应头或 iframe 的 allow 属性控制的权限闸门——没配对、没生效、配错格式，API 调用直接抛 NotAllowedError。
iframe 的 allow 属性怎么写才不被浏览器无视
这是最常翻车的环节：写了 allow 却没效果，不是浏览器 bug，而是语法没过 Chrome 100+ 的校验。
- 必须用分号
;分隔多个权限，空格分隔会彻底失效（allow="geolocation clipboard-read"❌） - 每个权限后必须跟来源列表，用括号
()包裹；省略括号 = 默认拒绝（allow="geolocation"❌） -
'self'指 iframe 自身源，不是父页面源；跨域 iframe 无法读父 DOM，但能用自己的源申请权限 - 显式禁止比省略更可靠：
fullscreen=()比不写fullscreen更明确
正确示例：
<iframe src="https://thirdparty.example/embed" allow="geolocation 'self' https://maps.example.com; clipboard-read 'self'; fullscreen ()"></iframe>
HTTP 响应头 Permissions-Policy 怎么配才真正生效
这个头作用于整个响应上下文（当前页 + 所有子 iframe），但前端 JS 完全无法设置，必须由服务器注入。
- 开发时用
file://协议打开 HTML → 所有策略自动失效（浏览器不应用） - Nginx/Apache 配置必须加
always，否则只对 200 响应生效，304/404 就丢了策略 - 旧语法如
geolocation='none'已被现代 Chrome 忽略整条头，必须用geolocation=() - 多值需转义双引号：Nginx 中
"geolocation=(self \"https://maps.example.com\")"
Nginx 示例（需 headers_more 模块）：
add_header Permissions-Policy "geolocation=(self \"https://maps.example.com\"), camera=(), microphone=(), payment=(), fullscreen=(self)";
navigator.permissions.query() 返回 prompt 并不等于能调用 API
这个方法只是告诉你“目前状态”，不是授权通行证。真实调用仍受三重限制：
- 必须由用户手势触发（click/tap/key press），自动执行会静默失败
- 如果 API 在 iframe 里调用，该 iframe 必须已在
allow或响应头中获准对应权限 - 返回
state: "prompt"只表示尚未授予权限，不代表下次调用就能成功——仍可能因策略拦截而抛错
错误写法：
navigator.permissions.query({name: 'geolocation'}).then(r => { if (r.state === 'prompt') navigator.geolocation.getCurrentPosition(...); }); // ❌ 无手势、无 iframe 授权保障，大概率失败
最容易被忽略的是：把 Permissions-Policy 当成“功能开关”来调试。它实际是一道硬性闸门，一旦关死，连 navigator.geolocation 这类基础属性访问都会被拦截，且不报具体错误——只在控制台显示模糊的 NotAllowedError。验证前务必先起 http-server，排除 file:// 协议干扰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
