video.js 和内容安全策略 (CSP) 的问题

Question

我在页面上使用video.js的'standard'设置，视频标签代码如下：

  <video
  id="my-video"
  class="video-js"
  controls
  preload="auto"
  width="640"
  height="264"
  poster="MY_VIDEO_POSTER.jpg"
  data-setup="{}"
>
  <source src="/videos/Sinéad O’Connor - Nothing Compares 2 U.mp4" type="video/mp4" />
  <source src="MY_VIDEO.webm" type="video/webm" />
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a
  web browser that
    <a href="https://videojs.com/html5-video-support/" target="_blank"
      >supports HTML5 video</a
    >
  </p>
</video>

我使用内容安全策略 (CSP)，但在解决以下问题时遇到问题：

Refused to create a worker from 'blob:http://localhost:3000/f215d47b-01ab-4ea4-943f-84c83cc5294c' because it violates the following Content Security Policy directive: "worker-src self".

Refused to load the font 'data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAABDkAAsAAAAAG6gAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPgAAAFZRiV3hY21hcAAAAYQAAADaAAADPv749/pnbHlmAAACYAAAC3AAABHQZg6OcWhlYWQAAA3QAAAAKwAAADYZw251aGhlYQAADfwAAAAdAAAAJA+RCLFobXR4AAAOHAAAABMAAACM744AAGxvY2EAAA4wAAAASAAAAEhF6kqubWF4cAAADngAAAAfAAAAIAE0AIFuYW1lAAAOmAAAASUAAAIK1cf1oHBvc3QAAA/AAAABJAAAAdPExYuNeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGS7wTiBgZWBgaWQ5RkDA8MvCM0...2DDXbYkhKc+V0Bqs5Zt9JM1HQGBRTm/EezTmZNKtpcAMs9Yu6AK9caF76zoLWIWcfMGOSkVduvSWechqZsz040Ib2PY3urxBJTzriT95lipz+TN1fmAAAAeJxtkMl2wjAMRfOAhABlKm2h80C3+ajgCKKDY6cegP59TYBzukAL+z1Zsq8ctaJTTKPrsUQLbXQQI0EXKXroY4AbDDHCGBNMcYsZ7nCPB8yxwCOe8IwXvOIN7/jAJ76wxHfUqWX+OzgumWAjJMV17i0Ndlr6irLKO+qftdT7i6y4uFSUvCknay+lFYZIZaQcmfH/xIFdYn98bqhra1aKTM/6lWMnyaYirx1rFUQZFBkb2zJUtoXeJCeg0WnLtHeSFc3OtrnozNwqi0TkSpBMDB1nSde5oJXW23hTS2/T0LilglXX7dmFVxLnq5U0vYATHFk3zX3BOisoQHNDFDeZnqKDy9hRNawN7Vh727hFzcJ5c8TILrKZfH7tIPxAFP0BpLeJPA==' because it violates the following Content Security Policy directive: "font-src 'self' fonts.gstatic.com maxcdn.bootstrapcdn.com".

我不明白我的 CSP 指令应该阅读什么才能解决这两个错误。我添加了一个“worker-src：'self'”但是没有效果，我不清楚这个 'worker' 应该做什么或者它是如何生成的（我从 [= 中的播放器代码假设25=]?) 以及生成 'font-woff' 的位置...?

非常感谢任何建议。我先谢谢你了。

Answer 1

您必须修改 CSP：

worker-src 'self' -> worker-src 'self' blob:;

font-src 'self' fonts.gstatic.com maxcdn.bootstrapcdn.com; -> font-src 'self' data: fonts.gstatic.com maxcdn.bootstrapcdn.com;

注意：worker-src: 'self' 是错误的，因为那里不允许 :。

而且，是的，它是一个 video.js 创建工人。 data: 在字体中是 Google 字体的常见做法。

video.js 和内容安全策略 (CSP) 的问题

Problem with video.js and Content Security Policy (CSP)

video.js

content-security-policy