跨域 iframe 权限需三者协同：iframe 的 allow 属性、父页响应头 permissions-policy、子页用户手势触发，缺一不可；https 与正确域名格式（含双引号/单引号）亦为硬性前提。
allow="microphone; geolocation" 为什么跨域下根本没反应
因为只写 allow="microphone; geolocation" 是无效的——它只是告诉浏览器「这个 iframe 有资格申请权限」，但跨域场景下，父页面必须同步在 HTTP 响应头中声明 Permissions-Policy，否则子帧调用 navigator.mediaDevices.getUserMedia() 或 navigator.geolocation.getCurrentPosition() 会直接抛 NotAllowedError。
常见错误是只改了 iframe 标签，却忘了配响应头。比如嵌入 https://widget.example.net，父页响应头必须包含：
Permissions-Policy: microphone=(self "https://widget.example.net"), geolocation=(self "https://widget.example.net")
- 括号内必须用双引号包裹域名，
self表示同源，多个来源用逗号分隔 -
*不被现代浏览器接受（尤其对microphone这类敏感权限） - 响应头必须由父页面服务器返回，前端 JS 无法动态注入
跨域时 allow 值怎么写才不被忽略
允许值必须严格按规范拼写 + 分号分隔 + 来源列表，空格、逗号、大小写错误都会导致整项失效。正确写法是：
allow="microphone 'https://widget.example.net'; geolocation 'https://widget.example.net'"
- 每个权限后必须跟括号包裹的来源列表，单引号不能省略
- 不能写成
allow="microphone, geolocation"（逗号分隔已被废弃） - 不能写成
allow="Microphone; Geolocation"（大小写虽不敏感，但首字母大写容易引发拼写混淆） - 如果子帧是
https://widget.example.net，而父页本身是https://main.example.com，两者不同源，'self'就不生效，必须显式列出目标域名
HTTPS 和用户手势这两个硬性前提常被跳过
即使 allow 和 Permissions-Policy 都配对了，以下两点不满足仍会失败：
- iframe 的
src必须是 HTTPS 协议；http://或file://下所有权限请求会被浏览器静默拒绝 -
getUserMedia()和getCurrentPosition()必须由用户手势触发（如 click、tap），不能在页面加载时自动调用；否则 Chrome 会报NotAllowedError，且不弹权限框 - 移动端 Safari 对
geolocation支持较弱，iOS 16.4+ 才稳定支持跨域allow，旧版本需引导用户手动开启网站定位权限
调试时如何确认权限链是否完整
打开开发者工具 → Network → 找到 iframe 的 src 请求 → 查看 Response Headers 中是否有合规的 Permissions-Policy；再切到 Application → 左侧选中该 iframe → 右侧 “Permissions” 面板里 microphone 和 geolocation 是否显示为 “prompt” 或 “granted”。
- 如果面板里这两项是空白或 “denied”，大概率是响应头缺失、域名拼错、或 iframe 加载在非安全上下文里
- 控制台出现
DOMException: Permission denied或NotAllowedError时，先检查是否漏掉用户手势触发逻辑 - 动态创建的 iframe（
document.createElement('iframe')）必须在设置src前就赋值allow，否则策略解析已结束，挂再晚都无效
真正卡住的往往不是语法，而是三处必须同时对齐：iframe 标签、父页响应头、子页脚本触发时机。少一个，权限就断在半路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
