跨域iframe调用Screen Capture API遇权限错误，求配置方案

问题分析 #

你遇到的NotAllowedError是因为跨源场景下，Permissions Policy的配置存在冲突和不完整情况：

• iframe的sandbox属性中allow-same-origin与实际跨源部署矛盾，导致权限校验异常
• allow属性的权限声明语法不符合规范
• 冗余的Feature-Policy头已被废弃，可能干扰权限判断

具体修复步骤 #

1. 修正iframe的sandbox属性 #

移除allow-same-origin，该属性会强制将跨源iframe标记为同源，与实际部署场景冲突，导致权限策略校验失败。保留其他必要权限：

<iframe
    allow="display-capture=*"
    src="link"
    referrerpolicy="no-referrer"
    sandbox="allow-scripts allow-forms allow-modals allow-pointer-lock"
    allowFullScreen>
</iframe>

2. 完善iframe的allow属性 #

原allow="display-capture"语法不符合Permissions Policy规范，需明确指定允许的来源：

• 允许所有跨源场景（适合测试或信任域名）：allow="display-capture=*"
• 更安全的方式：指定具体iframe域名，例如allow="display-capture=https://your-iframe-domain.com"

3. 统一使用Permissions-Policy响应头 #

废弃已淘汰的Feature-Policy，仅保留Permissions-Policy，确保父页面和iframe页面都正确配置：

// 父页面与iframe页面均需设置
res.header('Permissions-Policy', 'display-capture=*');

若需更严格的权限控制，可指定对方域名：

• 父页面响应头：Permissions-Policy: display-capture=https://your-iframe-domain.com
• iframe页面响应头：Permissions-Policy: display-capture=https://your-parent-domain.com

4. 确保权限请求由用户交互触发 #

浏览器要求屏幕共享权限必须通过用户主动操作（如点击按钮）触发，不能自动执行。示例代码：

// iframe页面中的触发逻辑
document.getElementById('start-share').addEventListener('click', async () => {
    try {
        const mediaStream = await navigator.mediaDevices.getDisplayMedia({ video: true });
        // 处理捕获到的媒体流
    } catch (error) {
        console.error('屏幕共享请求失败:', error);
    }
});

验证 #

完成以上配置后重新部署两个应用，跨源场景下触发屏幕共享请求，应能正常弹出授权窗口，不再出现权限报错。

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