Skip to content
FrameworkStyle

Security

How to configure Content Security Policy for your video player

Content Security Policy (CSP) limits which resources a page can load. Video.js uses the URLs you configure for media, posters, thumbnails, and captions. Some HLS renderers also create blob URLs or web workers, so your policy must allow those resources too.

Allow player resources

  • media-src must allow your media URLs.
  • img-src must allow any poster or thumbnail image URLs.
  • connect-src must allow HLS manifests, playlists, captions, and segment requests when using HLS playback.
  • media-src blob: is required when using the HLS player variants, which use MSE-backed playback.
  • worker-src blob: is required when using the hls.js player variants.
  • style-src 'unsafe-inline' is required for some player UI and HTML player styling behavior.

Example

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

This policy assumes you bundle Video.js with your application or serve it from your own origin. If you load the player from a CDN, add that CDN’s origin to script-src.

Replace broad sources such as https: with the exact origins your player uses. Remove sources your deployment does not need, and keep blob: only where your selected HLS renderer requires it.