Skip to content
FrameworkStyle

Security

How to configure Content Security Policy, CORS, and Subresource Integrity for your video player

You make a few security choices when you ship a video player. This page covers three:

  • Content Security Policy tells the browser which URLs the player is allowed to fetch.
  • The crossorigin attribute controls how the browser fetches videos, captions, and posters from other domains.
  • Subresource Integrity lets the browser verify that a script you loaded from a CDN hasn’t been tampered with.

Content Security Policy

A Content Security Policy (CSP) is a list of rules your site sends to the browser saying which URLs are allowed to load scripts, media, images, and so on. This limits the damage a malicious script could do if one got onto your page.

You have one if your server returns a Content-Security-Policy HTTP response header, or your HTML has a <meta http-equiv="Content-Security-Policy"> tag. If you haven’t set one up, skip this section. CSP is a good idea for production sites; MDN’s CSP guide walks through getting started.

When you do have a CSP, allow the sources the player loads:

Directive What to allow
media-src Origins for media files and caption files loaded via <track> elements. Add blob: for HLS playback
img-src Origins for posters and thumbnail tracks
connect-src Origins for HLS manifests, playlists, segments, and captions when using HLS playback
worker-src blob: if you load hls.js variants
style-src 'unsafe-inline', currently required for player UI styles

A reasonable starting point: 

Content-Security-Policy:
  script-src 'self';
  style-src 'self' 'unsafe-inline';
  img-src 'self' https: data:;
  media-src 'self' https: blob:;
  connect-src 'self' https:;
  worker-src 'self' blob:;

Replace the origins to match where your media, posters, and captions are hosted.

crossorigin attribute

When the player loads a video, caption file, or poster from another domain, the browser needs to know whether to send cookies and whether your page is allowed to read the response. The crossorigin attribute tells the browser how to handle these requests.

Skip this section if your media, captions, and posters are served from the same domain as your site.

When they live on a different domain, set crossorigin on the media element: 

<video src="https://media.example.com/video.mp4" crossorigin="anonymous" playsinline></video>

anonymous covers most cases: the browser sends the request without cookies, which is what HLS manifests, WebVTT captions, and CDN scripts all expect. Use use-credentials only when the cross-origin request must include cookies or auth headers, for example with cookie-signed segment URLs.

Subresource Integrity

Subresource Integrity (SRI) lets you attach a hash to a <script> tag. The browser refuses to run the script if the downloaded file’s hash doesn’t match, which protects you when a CDN you don’t control serves a tampered file.

Skip this section if you install the player with a package manager like npm or pnpm. They verify packages already.

When you install from a CDN, add an integrity hash to your script tag: 

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@videojs/html@<version>/cdn/video.js"
  integrity="sha384-..."
  crossorigin="anonymous"
></script>

The hash pins to a specific file, so it changes on every release. Pin to an exact version in the URL and copy the hash from your CDN’s integrity tool, or regenerate the hash as part of your release process. SRI also requires crossorigin="anonymous" on the script tag.