docs(site): add Security concept page#1559
Conversation
Move CSP guidance off the installation page into a new Concepts > Security page covering Content Security Policy, crossorigin, and Subresource Integrity. Installation links to it via See also. Closes #966
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
✅ Deploy Preview for vjs10-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📦 Bundle Size Report🎨 @videojs/html — no changesPresets (7)
Media (8)
Players (5)
Skins (30)
UI Components (35)
Sizes are marginal over the root entry point. ⚛️ @videojs/react — no changesPresets (7)
Media (7)
Skins (27)
UI Components (29)
Sizes are marginal over the root entry point. 🧩 @videojs/core — no changesEntries (9)
🏷️ @videojs/element — no changesEntries (2)
📦 @videojs/store — no changesEntries (3)
🔧 @videojs/utils — no changesEntries (10)
📦 @videojs/spf — no changesEntries (3)
ℹ️ How to interpretAll sizes are standalone totals (minified + brotli).
Run |
Adds plain-English definitions of Content Security Policy and Subresource Integrity, gates each section with a "does this apply to me?" line, and shows concrete HTML and React code for setting crossorigin on the media element.
decepulis
left a comment
decepulis
left a comment
There was a problem hiding this comment.
Codex review (comment-only): useful structure, but I would not treat this as fully reliable yet. The page hits the right buckets for #966, but I see one material overclaim and a few docs-accuracy issues worth tightening.
-
[P1] The safe-default paragraph overclaims URL handling. The new page says users do not need to scrub URLs before passing them to the player, and the PR body says source URLs are forwarded through
setAttribute. That is true for later attribute changes, but not for initial custom-media construction: initial attributes are copied into an HTML string and assigned throughshadowRoot.innerHTML, andserializeAttributesdoes not escape quote characters. A value likesrc='x" onerror="...'becomes a separateonerrorattribute in the generated inner<video>. Either the docs should avoid promising this, or the implementation should escape/DOM-create the initial media element. Relevant code:packages/core/src/dom/media/custom-media-element/index.tsaround the template/constructor path andpackages/utils/src/dom/attributes.tsaroundserializeAttributes. -
[P2] The CSP table blurs how captions are loaded. Browser
<track>loads are covered bymedia-src(MDN lists<track>undermedia-src), while HLS manifests/segments and any JS/fetch/XHR paths needconnect-src. I would split this so readers do not incorrectly put ordinary caption files only underconnect-src. -
[P2] The nonce/hash guidance for
style-srcsounds more actionable than the current implementation supports. The player injects internal<style>tags / shadow style fallbacks without an obvious user nonce plumbing path. Directelement.style.foo = ...is not blocked bystyle-srcper MDN, but<style>tags and style attributes are. I would phrase this as "unsafe-inlineis currently the practical requirement for Video.js injected style tags" rather than implying a user can wire nonce/hash support today. -
[P3] The SRI/package-manager sentence is directionally right but too broad. Safer wording: SRI is for browser-loaded CDN scripts; package-manager installs rely on lockfile/registry integrity instead.
Overall: useful guide shape, not hallucinated as a whole, but the safe-defaults sentence is the risky part I would not ship as written.
- Remove the safe-defaults paragraph; the player's initial-construction attribute interpolation isn't quote-safe (filed as separate issue). - Add caption files loaded via <track> to media-src. - Restore the original installation page's "when using HLS playback" scoping on connect-src captions, and "currently required" hedge on the style-src row. - Drop the impractical nonce/hash suggestion — the player's shadow-DOM <style> tags don't accept a user-plumbed nonce. - Restore the original installation CSP example shape (script-src, no default-src fallback).
The previous @10.0.0 example URL doesn't resolve yet (current package is on 10.0.0-beta.23). A <version> placeholder reads as 'fill this in' and won't go stale across releases. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
|
||
| ## `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`](https://developer.mozilla.org/docs/Web/HTML/Reference/Attributes/crossorigin) attribute tells the browser how to handle these requests. |
There was a problem hiding this comment.
"When the player" more accurately would be "When the html video element"
Because the crossorigin attribute doesn't affect the loading of Hls.js via xhr or fetch, that's handled by that request itself unless Hls.js uses that value in its requests but I'm not aware of that.
4 participants
Summary
Adds a new
concepts/securitypage and moves CSP guidance off the installation page.What's on the new page
media-src,img-src,connect-src,worker-src,style-src) with a starting-point example.<track>caption files land inmedia-src; HLS-driven captions stay underconnect-srcwith the "when using HLS playback" qualifier preserved from the original installation copy.crossoriginattribute — when to useanonymousvsuse-credentials, with HTML and React code examples.<FrameworkCase frameworks={["html"]}>) since CDN install isn't a documented React path. Example script tag and the version-pinning caveat.Installation page
Deletes the
## CSPsection. Adds a Security<DocsLinkCard>next to the existing Skins card in See also.Sidebar
Slotted after
concepts/accessibilityin the Concepts section.Editorial calls
style-srcis preserved from the original installation copy as a placeholder for future improvement.style-src— the shadow-DOM<style>tags don't accept a user-plumbed nonce.Closes
#966
Related
#1562 (XSS in
serializeAttributes— separate fix, blocks restoring any safe-defaults claim here)Test plan
/docs/framework/html/concepts/security/and verify all three sections render (CSP table,crossorigin, Subresource Integrity)./docs/framework/react/concepts/security/and confirm Subresource Integrity is hidden, and thecrossoriginexample shows the React JSX form./docs/framework/html/how-to/installation/and confirm the## CSPsection is gone and a Security card appears in See also.https://claude.ai/code/session_016W6tiNqpHoZm6GrGHUVbVm
Note
Low Risk
Low risk documentation-only changes; primary impact is reorganizing guidance, so the main risk is broken links or framework-gated content not rendering as intended.
Overview
Adds a new Security concepts doc (
concepts/security) covering CSP directives (with an example policy), proper use of thecrossoriginattribute (HTML + React snippets), and HTML-only Subresource Integrity guidance for CDN installs.Removes the CSP section from the installation guide and replaces it with a “See also” link card to the new Security page, and updates the docs sidebar to include
concepts/securityunder Concepts.Reviewed by Cursor Bugbot for commit da28c2d. Bugbot is set up for automated code reviews on this repo. Configure here.