如何同时使用'strict-dynamic'与'unsafe-inline'并兼容Safari？

核心结论 #

Safari 低版本确实无法直接将 'unsafe-inline' 作为 'strict-dynamic' 的回退方案，这是 Safari 旧版本的 CSP 解析兼容性缺陷导致的，并非配置逻辑错误。

原因说明 #

规范层面，CSP 规则中只要存在有效 nonce 或 hash 字段，'unsafe-inline' 会被自动忽略，这也是 Chrome、Firefox 等浏览器可以正常运行的逻辑基础：支持 'strict-dynamic' 的浏览器会自动忽略 'unsafe-inline' 和显式配置的主机源，不支持的浏览器则会忽略 'strict-dynamic' 字段，回退到 'unsafe-inline'、指定主机、'self' 这些规则执行。
但 Safari 15.4 以下的版本存在解析 bug：一旦检测到 CSP 中存在 'strict-dynamic' 字段，会直接无视所有的 'unsafe-inline'、显式配置的主机源、'self' 规则，同时自身又不支持 'strict-dynamic' 的实际生效逻辑，最终相当于没有配置任何允许脚本执行的规则，因此抛出对应权限拒绝错误。

可行修复方案 #

• 方案1：基于用户代理（UA）判断做规则拆分
  对识别为 Safari 且版本低于 15.4 的请求，单独返回不带 'strict-dynamic' 的 CSP 规则，格式为：
  'nonce-${hash}' ...命名主机 'self' 'unsafe-inline'
  其他浏览器照常返回包含 'strict-dynamic' 的原有规则即可。
• 方案2：仅兼容 Safari 15.4 及以上版本
  Safari 15.4 及更高版本已经修复了该解析 bug，同时原生支持 'strict-dynamic' 特性，如果你业务的兼容范围可以覆盖到该版本及以上，不需要额外修改原有配置即可正常运行。

内容的提问来源于stack exchange，提问作者brouk.develop