Angular集成ngx-youtube-player部署后Chrome无法播放视频CSP错误求助

根因说明 #

Chrome对CSP规则执行严格匹配，你当前的CSP配置存在两个问题：

1. 未允许加载YouTube iframe API所属域名的脚本，仅配置frame-src规则无法解决脚本加载拦截问题
2. 域名匹配不完整（仅写youtube.com未覆盖www.youtube.com等子域名），且服务端返回的CSP响应头优先级高于HTML中的meta标签，仅改meta可能不生效

分步修复 #

• 第一步：先确认部署环境的CSP配置位置
  优先检查你应用的部署服务（Nginx、Cloudflare、网关层、托管平台）是否返回了Content-Security-PolicyHTTP响应头，如果存在，所有规则修改需要在服务端配置，仅修改HTML的meta标签会被覆盖不生效。
• 第二步：补充完整CSP规则
  无论你是在服务端配置还是meta标签配置，都需要在原有CSP规则基础上补充以下允许项，不要删除原有已允许的域名（比如原有https://apis.google.com需要保留）：

  script-src 'self' 'unsafe-inline' https://apis.google.com https://www.youtube.com https://s.ytimg.com;
  frame-src 'self' https://youtube.com https://www.youtube.com;
  

  如果你原有规则中单独配置了script-src-elem，也需要把https://www.youtube.com https://s.ytimg.com加入到该规则列表中。
  如果你使用meta标签配置，完整写法参考：

  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https://apis.google.com https://www.youtube.com https://s.ytimg.com; frame-src 'self' https://youtube.com https://www.youtube.com;">
  

• 第三步：优化脚本加载逻辑（可选，避免重复加载报错）
  修改组件中脚本插入逻辑，避免每次组件初始化重复插入相同脚本：

  ngOnInit(): void {
    // 避免重复加载YouTube iframe API
    if (!document.querySelector('script[src="https://www.youtube.com/iframe_api"]')) {
      const tag = document.createElement("script");
      tag.src = "https://www.youtube.com/iframe_api";
      document.body.appendChild(tag);
    }
    const videoUrl = new URL(this.link);
    this.videoId = new URLSearchParams(videoUrl.search.slice(1)).get("v");
  }
  

其他说明 #

Safari浏览器运行正常是因为其对CSP域名匹配规则更宽松，会自动匹配根域名下的所有子域名，而Chrome要求严格匹配指定域名，所以必须补全www.youtube.com等子域名规则才能生效。

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