时间戳

首页 > 解决方案 > video.js 和内容安全策略 (CSP) 的问题

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

问题描述

我在页面上使用 video.js 的“标准”设置，视频标记代码如下：

  <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'应该做什么或它是如何生成的（我假设来自 video.js 中的播放器代码？）和在哪里生成'font-woff'......？

非常感谢任何建议。我提前谢谢你。

标签： video.jscontent-security-policy

解决方案

您必须修改 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:in fonts 是 Google 字体的常见做法。

推荐阅读