Content-Security-Policy阻止本地子域JS内联模块加载问题求助

问题拆解 #

你遇到两个CSP拦截场景：

1. 内联type="module"脚本被拦截，报错提示inline资源违反default-src规则
2. 外部模块里动态import子域components.boardmeister.local的资源时，同样被default-src规则拦截

针对性解决步骤 #

1. 处理内联模块的拦截

CSP默认禁止内联模块脚本，哪怕default-src包含'self'也不例外，有两种处理方式：

• 推荐：使用nonce（安全）

  1. 后端生成随机唯一的nonce值（每次请求生成一个即可）
  2. 修改CSP规则，添加script-src并指定nonce：

     <meta http-equiv="Content-Security-Policy" content="default-src 'self' *.boardmeister.local; script-src 'nonce-你的随机值' 'self' *.boardmeister.local;">
     

  3. 给内联模块脚本添加nonce属性：

     <script type="module" nonce="你的随机值">
       import * as components from './components.js';
     </script>
     

• 临时方案：添加'unsafe-inline'（不推荐，降低安全性）
  直接在CSP的script-src里加入'unsafe-inline'，规则修改为：

  <meta http-equiv="Content-Security-Policy" content="default-src 'self' *.boardmeister.local; script-src 'unsafe-inline' 'self' *.boardmeister.local;">
  

2. 处理动态import子域资源的拦截

动态import加载的资源属于脚本范畴，受script-src规则管控，只要确保script-src包含*.boardmeister.local即可——上面的规则已经覆盖了这个需求，因为*.boardmeister.local包含所有子域（包括components.boardmeister.local）。

额外检查

确认NGINX配置中没有通过add_header重复设置CSP规则，否则meta和NGINX的CSP会取更严格的组合，可能导致规则冲突。

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