移动Web应用CSP问题：添加style-src后img-src失效图片无法加载

我来帮你梳理一下问题的根源，再给出可行的解决方案：

问题拆解 #

1. 加style-src后img-src失效的原因 #

你当前的img-src指令写了重复的*：img-src * 'self' data: *;，虽然CSP语法上允许重复源，但部分浏览器可能会因为这种冗余写法出现解析异常，直接导致整个img-src指令不生效，图片自然加载失败。另外也可以检查下你的图片源是否真的在允许范围内，但先修正这个写法是第一步。

2. 移除style-src后内联样式报错的原因 #

当你没指定style-src时，浏览器会继承default-src的规则（这里是*），但default-src *并不包含'unsafe-inline'关键字——而内联样式（比如元素的style属性、页面内的<style>标签内容）默认是被CSP严格禁止的，所以就会抛出你看到的那个错误。

可行的解决方案 #

方案1：修正冗余写法，保留unsafe-inline（适合依赖大量内联样式的场景） #

把img-src里重复的*去掉，同时确保各指令配置清晰：

<meta http-equiv="Content-Security-Policy" content="default-src *; img-src * data:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

这里img-src * data:已经覆盖了所有外部源、同域源（*包含self）以及data URI格式的图片，足够应对大多数加载场景。

方案2：替代unsafe-inline（更安全的最佳实践） #

如果想提升安全性，避免使用unsafe-inline，可以用哈希值或Nonce来允许特定的内联样式：

• 哈希值方式：计算内联<style>内容的SHA-256/SHA-384/SHA-512哈希，将哈希值添加到style-src中。比如你的内联样式是<style>body { background: #f5f5f5; }</style>，计算哈希后配置如下：

<meta http-equiv="Content-Security-Policy" content="default-src *; img-src * data:; style-src 'self' 'sha256-xxxxxxxxx...'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

• Nonce方式：给每个请求生成一个随机的Nonce值，同时添加到CSP meta标签和内联样式标签中：

<meta http-equiv="Content-Security-Policy" content="default-src *; img-src * data:; style-src 'self' 'nonce-abc123xyz'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
<style nonce="abc123xyz">
/* 你的内联样式代码 */
</style>

这种方式只有携带匹配Nonce的内联样式才会被允许，比unsafe-inline安全得多。

最后小提示：调试CSP时，打开浏览器开发者工具的Console面板，里面会显示具体被阻止的资源和对应的规则缺失，能帮你快速定位问题。

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