NuxtJS配置CSP实现YouTube与Plyr嵌入 线上加载失效排查

你现在的配置存在多处和vue-plyr、YouTube嵌入运行逻辑不匹配的问题，直接调整对应的指令就能解决线上加载失败的问题：

现有配置的错误点 #

• reportOnly: true 是CSP的仅上报模式，不会真的拦截违规请求，这种模式下资源加载失败，大概率是你的CSP根本没真正对线上请求生效，或是有其他链路（比如反向代理的旧CSP规则）在拦截资源，同时这个模式也不会在控制台显示具体的拦截原因，会大幅增加排查成本。
• connect-src 被整体注释后，会被default-src: 'self'兜底，也就是说所有跨域的接口请求、视频分片拉取、和YouTube播放器的postMessage通信全部只会放行自身域名资源，YouTube加载视频所需的所有跨域请求都会被直接拦截。
• 没有单独配置frame-src指令，同样会被self兜底，而YouTube嵌入播放器的核心是跨域iframe加载，未放行对应iframe源时，播放器框架根本无法加载。
• 没有配置media-src、worker-src指令，会被self兜底，导致YouTube的视频流、播放器初始化需要的Web Worker无法正常加载。
• script-src 中加入的*.plyr.io属于冗余配置，Plyr的代码会被打包到项目自身的静态资源中，运行时不会从plyr.io域名拉取任何脚本。

可直接使用的调整后配置 #

把Nuxt配置里的render.csp部分替换为以下内容：

render: {
  csp: {
    // 先切换为强制拦截模式，等功能完全验证正常后，可切回reportOnly做线上违规观测
    reportOnly: false,
    hashAlgorithm: 'sha256',
    policies: {
      'default-src': ["'self'"],
      'img-src': ['https:', 'http:'],
      'style-src': ["'self'", "'unsafe-inline'"],
      'script-src': [
        "'self'",
        "'unsafe-inline'",
        'https://www.youtube.com',
        'https://s.ytimg.com'
      ],
      // 放行YouTube iframe加载权限
      'frame-src': [
        "'self'",
        'https://www.youtube.com',
        'https://www.youtube-nocookie.com'
      ],
      // 放行和YouTube的全部通信请求
      'connect-src': [
        "'self'",
        'https://*.youtube.com',
        'https://*.ytimg.com',
        'https://*.google.com',
        'https://*.googleapis.com'
      ],
      // 放行媒体资源加载
      'media-src': [
        "'self'",
        'https://*.youtube.com',
        'https://*.ytimg.com'
      ],
      // 放行Web Worker加载
      'worker-src': [
        "'self'",
        'blob:'
      ]
    }
  }
}

上线验证注意事项 #

• 配置生效后打开浏览器控制台，查看CSP类的报错提示，如果还有拦截会明确标注被拦的资源源和缺失的指令，按提示补全即可。
• 检查部署链路的反向代理配置，很多场景下反向代理会默认注入旧的CSP响应头，覆盖Nuxt本地配置的规则，导致本地正常、线上被拦的情况。
• 功能验证完成后，建议把img-src中的http:规则移除，避免加载混合内容。

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