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

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.