如何在严格CSP下替代VideoJS生成的内嵌样式（无需修改源码）

以下是无需修改Video.js源码的几种可行方案：

• 使用CSP unsafe-hashes 指令（针对固定默认样式）
  对于Video.js生成的固定默认样式（.vjs-styles-defaults内的规则），可以计算其哈希值并加入CSP的style-src白名单：

  1. 提取默认样式的纯文本内容（如示例中的.video-js和.vjs-fluid规则）
  2. 用OpenSSL计算其SHA-256哈希：

     echo -n ".video-js { width: 300px; height: 150px; } .vjs-fluid { padding-top: 56.25% }" | openssl dgst -sha256 -binary | base64
     

  3. 更新CSP配置，将生成的哈希加入style-src：

     style-src https: 'nonce-<nonce_value>' 'sha256-生成的哈希值'
     

  注意：动态生成的.vjs-styles-dimensions样式因视频ID不同哈希不固定，此方案仅覆盖默认样式，需结合其他方法处理动态尺寸样式。

• 用MutationObserver自动为生成的style标签添加Nonce
  通过监听DOM变化，捕获Video.js动态创建的<style>标签，自动注入页面合法的nonce值：

  1. 页面中添加以下带合法nonce的脚本（nonce需与CSP中的值一致，可从服务端注入的meta标签获取）：

     const nonce = document.querySelector('meta[name="csp-nonce"]').content;
     const observer = new MutationObserver((mutations) => {
       mutations.forEach(mutation => {
         if (mutation.addedNodes) {
           mutation.addedNodes.forEach(node => {
             if (node.tagName === 'STYLE' && 
                 (node.classList.contains('vjs-styles-defaults') || node.classList.contains('vjs-styles-dimensions'))) {
               node.setAttribute('nonce', nonce);
             }
           });
         }
       });
     });
     observer.observe(document.body, { childList: true, subtree: true });
     

  2. 确保页面存在携带nonce的meta标签（服务端渲染时注入）：

     <meta name="csp-nonce" content="<nonce_value>">
     

  此方案可自动处理所有Video.js生成的内联样式标签，完全适配现有CSP规则。

• 禁用Video.js动态样式生成，手动控制播放器尺寸
  通过配置关闭Video.js的自动尺寸计算，改用自定义CSS/JS控制播放器大小：

  1. 初始化Video.js时添加fluid: false配置：

     const player = videojs('my-video', {
       fluid: false,
       // 其他播放器配置
     });
     

  2. 编写自定义CSS实现尺寸适配，比如响应式布局：

     .video-js {
       width: 100%;
       max-width: 800px;
       height: auto;
       aspect-ratio: 16/9;
     }
     

  3. 若需动态适配容器尺寸，可自行编写JS监听容器大小变化，调整播放器宽高。
     此方案彻底避免内联样式生成，最贴合严格CSP要求，但需要自行实现尺寸适配逻辑。

内容的提问来源于stack exchange，提问作者user3250183