应用生成的YouTube嵌入URL在Chrome/Edge失效的问题求助

核心问题定位 #

你的YouTube嵌入在Chrome/Edge失效但Firefox正常，核心原因是CSP配置存在语法错误+必要源缺失：Chrome/Edge对CSP的语法规范和源限制执行更严格，而Firefox有一定容错性；Vimeo嵌入正常是因为其依赖的域名范围较窄，原配置刚好覆盖需求。

具体修复步骤 #

1. 修正CSP配置的语法错误与源缺失

原配置中default-src混入了不属于CSP规则的x-content-type-options nosniff，需将其单独作为响应头，同时补充YouTube嵌入所需的所有关联域名：

<customHeaders>
  <!-- 单独设置内容类型安全头 -->
  <add name="X-Content-Type-Options" value="nosniff" />
  <!-- 修正后的CSP配置 -->
  <add name="Content-Security-Policy" value="default-src 'self' 'unsafe-inline'; 
       script-src 'self' https://www.youtube.com https://s.ytimg.com https://test.letmetourit.us;
       frame-src 'self' https://www.youtube.com https://www.youtube-nocookie.com https://test.letmetourit.us;
       media-src 'self' https://www.youtube.com https://www.youtube-nocookie.com;
       img-src 'self' https://www.youtube.com https://s.ytimg.com;"/>
</customHeaders>

2. 完善iframe的权限配置

YouTube嵌入需要更多权限才能在Chrome/Edge中正常运行，补充allow属性的权限项：

<div>
  <iframe style="width:1000px; height:600px;border:none;" 
          src="https://test.letmetourit.us/embedscenemedia?Id=uKPAbISmExd7g5O06p9XaA%3D%3D" 
          referrerpolicy="strict-origin-when-cross-origin"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
          allowfullscreen="true"></iframe>
</div>

3. 调试验证

修改配置后，打开Chrome/Edge开发者工具（F12）的Console面板，查看是否有CSP违规报错。若仍存在问题，根据报错提示的缺失源，补充到对应CSP指令中即可。

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