zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs(site): add Security concept page (#1559)

Browse Source 
Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Darius Cepulis
2026-07-20 17:18:50 -07:00
committed by GitHub
co-authored by Claude
parent 8525913327
commit 0c9fe3877e
3 changed files with 34 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/content/docs/concepts/security.mdx
+31
View File
@@ -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.
site/src/content/docs/how-to/installation.mdx
+2 -25
View File
@@ -182,35 +182,12 @@ Add it to your components folder in a new file.
</div>
## 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
<DocsLinkCard slug="concepts/skins" anchor="styling" description="Some skins expose CSS custom properties">Skins</DocsLinkCard>
<DocsLinkCard slug="concepts/security" description="Configure Content Security Policy for your player">Security</DocsLinkCard>
<FrameworkCase frameworks={["html"]}>
<DocsLinkCard slug="how-to/self-host-the-player" description="Serve the player from your own origin for offline or restricted-network deployments">Self-host the player</DocsLinkCard>
</FrameworkCase>
site/src/docs.config.ts
+1
View File
@@ -42,6 +42,7 @@ export const sidebar: Sidebar = [
{ slug: 'concepts/ui-components' },
{ slug: 'concepts/accessibility' },
{ slug: 'concepts/cast', sidebarLabel: 'Google Cast' },
{ slug: 'concepts/security' },
],
},
{