如何不在iframe标签中配置allow属性，转而在目标页面加载后设置

我现在有一段iframe代码：

<div className="w-6 h-4 ">
  <iframe
    src="https://mydomin/app"
    allow="microphone"
    className="bg-white"
    height={"100%"}
    width="100%"
  />
</div>

目前麦克风权限是直接在iframe标签里通过allow="microphone"配置的，但我想把这个权限配置移到iframe加载的目标页面（https://mydomin/app）里，而且我能访问目标页面的代码库，请问有没有可行的实现方法？

首先明确：iframe的allow属性是嵌入方页面的权限控制项，目标页面没法直接修改这个属性，但可以通过两种方式实现权限逻辑的转移：

• 方式一：目标页面主动请求麦克风权限
  先去掉iframe标签里的allow="microphone"属性，然后在目标页面通过浏览器原生API主动发起权限请求。代码示例：

  // 目标页面的JavaScript代码
  async function getMicPermission() {
    try {
      // 请求麦克风权限
      const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
      // 权限获取成功后，可按需处理流，比如暂时关闭
      mediaStream.getTracks().forEach(track => track.stop());
    } catch (error) {
      console.log('麦克风权限请求失败:', error);
      // 这里可以加权限被拒后的提示逻辑
    }
  }
  
  // 注意：浏览器要求权限请求必须由用户交互触发（比如点击按钮），否则会被拦截
  document.addEventListener('DOMContentLoaded', () => {
    const requestBtn = document.getElementById('mic-request-btn');
    requestBtn?.addEventListener('click', getMicPermission);
  });
  

  这种方式不需要嵌入方额外配置，只要嵌入方没禁止麦克风权限（即iframe无allow="microphone"也无allow="microphone 'none'"），目标页面就能正常发起请求。

• 方式二：目标页面通过PostMessage通知嵌入方设置allow属性
  如果必须依赖allow属性的配置，目标页面可以给嵌入方发消息，让嵌入方动态修改iframe的allow属性：

  1. 目标页面发送消息：

  // 目标页面代码
  // 第二个参数要填嵌入方页面的域名，确保消息安全
  window.parent.postMessage({ action: 'enableMicPermission' }, 'https://嵌入方域名');
  

  2. 嵌入方页面监听消息并修改iframe：

  // 嵌入方页面代码
  window.addEventListener('message', (event) => {
    // 验证消息来源，防止恶意请求
    if (event.origin !== 'https://mydomin/app') return;
    if (event.data.action === 'enableMicPermission') {
      const targetIframe = document.querySelector('iframe[src="https://mydomin/app"]');
      if (targetIframe) {
        targetIframe.setAttribute('allow', 'microphone');
      }
    }
  });
  

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