内容安全策略 nuxtjs 嵌入 youtube 视频

Question

我对 javascript 开发完全陌生，我正在碰壁。

我想在我的 nuxtjs 应用程序中嵌入 plyr（vue-plyr 模块）和一些 youtube 视频。

本地一切正常，但一旦我将网站上线。视频未加载，plyr 也未加载。

所以我谈到了内容安全政策的问题。我尝试了几件事，但 none 有效。

这是我最近的尝试：

  render: {
    csp: {
      reportOnly: true,
      hashAlgorithm: 'sha256',
      policies: {
        'default-src': ["'self'" ],
        'img-src': ['https:', 'http:',],
        'style-src': ["'self'", "'unsafe-inline'"],
        'script-src': [
          "'self'",
          "'unsafe-inline'",
          '*.youtube.com',
          '*.ytimg.com',
          '*.plyr.io',
        ],
        // 'connect-src': ['*.youtube.com', '*.ytimg.com'],  
      },
      // addMeta: true
    }
  },

我做的对吗？

Answer 1

具有 reportOnly: true, 的 CSP 不阻止任何内容，仅发送报告。因此它根本不会影响 Plyr 播放器。
您可能正在编辑一个实际上并未用于发布 CSP 的文件。很有可能，CSP 确实是由 Helmet 中间件发布的。
它需要从浏览器控制台查看 CSP 违规消息才能了解发生了什么。
播放内容安全策略 youtube video via Plyr播放器比你显示的稍微复杂一点。

内容安全策略 nuxtjs 嵌入 youtube 视频

Content Security Policy nuxtjs embedding youtube videos

content-security-policy

vue.js

vuejs2

nuxtjs