From 0c9fe3877e8f9880f2b4c3c081f940d8f15cf5b2 Mon Sep 17 00:00:00 2001 From: Darius Cepulis Date: Mon, 20 Jul 2026 17:18:50 -0700 Subject: [PATCH] docs(site): add Security concept page (#1559) Co-authored-by: Claude --- site/src/content/docs/concepts/security.mdx | 31 +++++++++++++++++++ site/src/content/docs/how-to/installation.mdx | 27 ++-------------- site/src/docs.config.ts | 1 + 3 files changed, 34 insertions(+), 25 deletions(-) create mode 100644 site/src/content/docs/concepts/security.mdx diff --git a/site/src/content/docs/concepts/security.mdx b/site/src/content/docs/concepts/security.mdx new file mode 100644 index 00000000..72390f1c --- /dev/null +++ b/site/src/content/docs/concepts/security.mdx @@ -0,0 +1,31 @@ +--- +title: Security +description: 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 + +```http +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. diff --git a/site/src/content/docs/how-to/installation.mdx b/site/src/content/docs/how-to/installation.mdx index d5e84799..be0a187c 100644 --- a/site/src/content/docs/how-to/installation.mdx +++ b/site/src/content/docs/how-to/installation.mdx @@ -182,35 +182,12 @@ Add it to your components folder in a new file. -## CSP - -If your application uses a Content Security Policy, you may need to allow additional sources for player features to work correctly. - -### Common requirements - -- `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 currently required for some player UI and HTML player styling behavior. - -### Example - -```http -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:; -``` - ## See also Skins +Security + Self-host the player diff --git a/site/src/docs.config.ts b/site/src/docs.config.ts index de761eb9..6d9a480f 100644 --- a/site/src/docs.config.ts +++ b/site/src/docs.config.ts @@ -42,6 +42,7 @@ export const sidebar: Sidebar = [ { slug: 'concepts/ui-components' }, { slug: 'concepts/accessibility' }, { slug: 'concepts/cast', sidebarLabel: 'Google Cast' }, + { slug: 'concepts/security' }, ], }, {