Support CSP style-src-attr 'none' by avoiding runtime inline style attributes #9198

Description

Video.js still appears to perform runtime inline style attribute writes, which makes it difficult to move toward a stricter Content Security Policy that uses:

style-src-attr 'none'

I’m testing a staged CSP rollout where a small baseline policy is enforced successfully, while the fuller policy remains report-only. Video.js works, but the stricter report-only policy produces CSP reports from video.min.js.

This seems separate from, or at least broader than, automatic stylesheet injection. The blocker here is runtime mutation of inline style attributes.

Example CSP report

Using Video.js 8.23.4:

{
  "effective_directive": "style-src-attr",
  "violated_directive": "style-src-attr",
  "blocked_uri": "/inline",
  "document_uri": "/wall",
  "source_file": "/libs/video.js/8.23.4/video.min.js",
  "line_number": 12,
  "column_number": 216137,
  "disposition": "report"
}

The same report appears on multiple pages that use Video.js players, including /wall and /events.

Current behavior

Video.js writes inline style attributes at runtime, triggering CSP style-src-attr reports.

Expected behavior

It would be helpful if Video.js had a CSP-friendly mode that avoids inline style attributes where possible, especially for static or predictable player layout/state changes.

Possible approaches might include:

• using CSS classes instead of inline style attributes for static player state/layout
• using CSS custom properties only where unavoidable and documented
• exposing an option to disable CSP-hostile runtime styling where the application provides the required CSS
• documenting which inline styles are required and whether they can be safely migrated
• Why this matters
• Many applications can tolerate style-src 'self' 'unsafe-inline' during migration, but style-src-attr 'none' is a useful next hardening step. At the moment, Video.js appears to be one of the blockers to enforcing that directive.

For now, we are keeping the full CSP report-only because enforcing style-src-attr 'none' could break Video.js-heavy media flows.

Version

Video.js: 8.23.4

Browser / OS

Observed via browser CSP reports. Not browser-specific from the application side.

Steps to reproduce

Reduced test case source:
https://gist.github.com/Cozmoz/7fc802b7dcc4d7313a9d968fb5133bca

Steps:

1. Save the Gist index.html locally, or serve it from any static host.
2. Open it in a browser.
3. Open DevTools console.
4. Confirm the page CSP includes style-src-attr 'none'.
5. Let the Video.js player initialise.
6. Observe CSP style-src-attr violations from Video.js runtime inline style writes.

Errors

With style-src-attr 'none' enabled, the browser reports a CSP violation for runtime inline style attributes written by Video.js.

Example report from production using Video.js 8.23.4:

{
  "effective_directive": "style-src-attr",
  "violated_directive": "style-src-attr",
  "blocked_uri": "/inline",
  "document_uri": "/wall",
  "source_file": "/libs/video.js/8.23.4/video.min.js",
  "line_number": 12,
  "column_number": 216137,
  "disposition": "report"
}

What version of Video.js are you using?

Video.js: 8.23.4

Video.js plugins used.

Video.js: 8.23.4

What browser(s) including version(s) does this occur with?

Chrome Version 148.0.7778.181 (Official Build) (64-bit)

What OS(es) and version(s) does this occur with?

Windows 11