CODEWITHSUNDEEP
video.jscontent-security-policy
Pangit
Pangit

Reputation: 664

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

I am using a 'standard' setup of video.js on a page, the video tag code is as follows:

  <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>

I make usage of Content Security Policy (CSP), and I am having problems resolving the following issues:

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".

I am not understanding what my CSP directives should read in order to resolve these two errors. I added a "worker-src: 'self'" however that had no effect, I am unclear on what this 'worker' is supposed to do or how it is generated (I assume from the player code in video.js?) and where the 'font-woff' is being generated...?

Any advice greatly appreciated. I thank you in advance.

Upvotes: 0

Views: 1561

Answers (1)

granty
granty

Reputation: 8496

You have to modify 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;

Note: worker-src: 'self' is wrong because of : is not allowed there.

And, yes, it's a video.js creates worker. data: in fonts is a common practice for Google fonts.

Upvotes: 2

Related Questions