Safari配置CSP后拒绝应用样式表问题的修复方法

核心原因 #

这个是Safari（尤其是15.4之前的桌面版、所有iOS 15及以下版本的Safari/内嵌WebView）独有的CSP兼容问题，和其他浏览器的逻辑差异点在于：

1. Safari对CSP Level 3的style-src-elem/style-src-attr指令fallback逻辑支持不完善，当这两个指令单独存在时，不会自动继承style-src里声明的'unsafe-inline'规则
2. 如果你的框架（从配置格式看是Ruby on Rails）自动给CSP的style相关指令注入了nonce值，Safari会严格执行CSP标准：只要指令中存在nonce或hash配置，就直接忽略'unsafe-inline'声明，而Chrome、Firefox会做兼容降级，非nonce的内联样式依然会被允许加载。

排查步骤 #

• 打开Safari开发者工具，切换到「网络」面板，找到当前页面的文档请求，查看响应头中实际返回的Content-Security-Policy字段值，不要只看本地配置：很多时候框架会自动修改你写的CSP规则，比如自动追加nonce、自动补全其他域名。
• 筛选网络面板中的「样式表」类型资源，找到状态为被拦截的CSS资源，确认它属于哪种类型：
  • 内联<style>标签
  • 元素style属性写的行内样式
  • 外链CSS文件
  • JS动态插入的blob/data URL格式样式
• 检查页面中是否有CSS-in-JS库、组件库在运行时动态插入<style>标签，这类动态生成的样式是Safari拦截的高发场景。

修复方案 #

按优先级从高到低选择：

1. 最快兼容方案：删除配置中单独的style_src_elem、style_src_attr配置项，让所有样式规则统一走style_src的配置，避开Safari的指令fallback bug。修改后的核心配置如下：

config.csp = {
  default_src: %w('self' https: wss:),
  base_uri: %w('self'),
  child_src: %w('self' https:),
  font_src: %w('self' data: https:),
  frame_ancestors: %w('self'),
  img_src: %w('self' data: https:),
  object_src: %w('self'),
  script_src: %w('self' 'unsafe-eval' 'unsafe-inline' https:),
  script_src_elem: %w('self' 'unsafe-inline' https:),
  script_src_attr: %w('self' 'unsafe-inline' https:),
  style_src: %w('self' 'unsafe-inline' https: data: blob:),
  worker_src: %w('self' blob:)
}

2. 如果必须保留style_src_elem/style_src_attr的细粒度控制：不要依赖指令继承，在三个style相关的指令里都显式写全'unsafe-inline'，同时补全data、blob协议的权限，避免动态样式被拦截：

style_src: %w('self' 'unsafe-inline' https: data: blob:),
style_src_elem: %w('self' 'unsafe-inline' https: data: blob:),
style_src_attr: %w('self' 'unsafe-inline' https:),

3. 如果检查响应头发现style相关指令里被自动注入了nonce值：
   • 要么关闭CSP配置中针对style资源的自动nonce生成（Rails中可以通过config.content_security_policy_nonce_directives = %w(script-src)配置，只给脚本加nonce，不给样式加）
   • 要么修改动态插入样式的JS逻辑，给所有生成的<style>标签加上当前页面的nonce属性。

验证方式 #

• 清缓存后重新加载页面，查看Safari控制台是否还有CSP拦截报错
• 逐页检查页面样式，确认没有样式丢失、排版错乱的情况
• 确认其他浏览器（Chrome、Firefox、Edge）下功能、样式均正常，没有引入新的CSP问题。

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