Angular嵌入YouTube播放器触发CSP内联样式拒绝错误求助

一、修正Content Security Policy（CSP）配置 #

错误核心是未显式声明style-src，导致 fallback 到default-src 'none'，而YouTube播放器会插入内联样式，同时你还引入了外部Bootswatch样式，需要在index.html的CSP元标签中补充完整规则：

<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  style-src 'self' 'sha256-j6Tt8qv7z2kSc7fUs0YHbrxawwsQcS05fVaX1r2qrbk=' https://bootswatch.com;
  script-src 'self' https://www.youtube.com https://www.googleapis.com;
  frame-src 'self' https://www.youtube.com;
  img-src 'self' data: https://*.ytimg.com;
">

• style-src中使用错误提示给出的哈希值替代unsafe-inline，同时加入https://bootswatch.com允许加载外部Bootswatch样式；
• script-src和frame-src加入YouTube相关域名，确保播放器脚本和iframe能正常加载；
• img-src加入YouTube的图片域名，避免播放器缩略图加载被拦截。

如果之前的CSP标签存在语法错误（比如引号不配对、分号遗漏）也会导致配置不生效，检查后替换成上述完整规则。

二、修复Angular与YouTube播放器的版本不兼容问题 #

你使用的是Angular 12，但安装的@angular/youtube-player是14.2.6，跨大版本的依赖会引发未知兼容性问题（比如内联样式的生成逻辑差异），建议降级到与Angular12匹配的版本：

执行命令：

npm uninstall @angular/youtube-player
npm install @angular/youtube-player@12.2.16

（12.2.16是Angular12系列的最后稳定版本，与你的项目版本完全匹配）

三、验证配置生效 #

1. 清除Angular缓存：ng cache clean
2. 重启开发服务器：ng serve
3. 打开页面查看控制台，确认CSP错误是否消失，YouTube播放器能否正常加载。

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