React应用中Content Security Policy阻止本地视频预览问题排查

为什么本地Data URL会被CSP拦截？ #

CSP是浏览器端的安全策略，校验逻辑只看资源的加载协议（比如data:）和使用场景（比如<video>的资源加载），和资源是来自服务器还是用户本地文件无关。哪怕是用户选择的本地文件生成的Data URL，只要符合CSP的校验规则，就会被浏览器检查。

你的配置问题所在 #

你的Helmet CSP配置里，img-src和media-src的指令值写法错误：

• 你把https:和data:写在了同一个字符串里（比如"https: data:"），这会被浏览器识别为无效指令值，导致整个media-src规则不生效，浏览器只能 fallback 到default-src。而default-src *不包含data:协议，因此触发了拦截。

修正后的Helmet配置 #

把每个协议拆成独立的数组元素：

app.use(
  helmet.contentSecurityPolicy({
    useDefaults: true,
    directives: {
      "img-src": ["'self'", "https:", "data:"], // 将https:和data:拆分为独立元素
      "media-src": ["'self'", "data:", "https:"], // 拆分后可省略*，已覆盖所需来源
      "connect-src": [
        "'self'",
        "https://countriesnow.space/api/v0.1/countries",
      ],
    },
  })
);

验证方法 #

修改配置后重启服务器，打开浏览器开发者工具的「网络」面板，查看页面响应头中的Content-Security-Policy字段，确认media-src已包含data:。

额外说明 #

• media-src里的"*"可省略，'self'、https:和data:已覆盖你需要的资源来源；若需允许所有网络媒体资源，保留"*"也可，但要确保和其他值拆分为独立元素。
• 本地文件生成的Data URL属于data:协议，必须在对应的CSP规则（此处为media-src）中显式声明，才能被浏览器允许加载。

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