启用CSP的服务器上Safari粘贴剪贴板时页面刷新问题排查

问题场景 #

使用Nginx配置了如下CSP规则：

add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' img-src 'self' data:; connect-src 'self'; font-src 'self'; object-src 'none'; media-src 'self'; form-action 'self'; frame-ancestors 'self';" always;

目的是禁用内联CSS、外部CSS及JS脚本。OTP输入页支持手动输入/粘贴验证码，在PC、安卓浏览器及iOS非Safari浏览器均正常，但Safari中粘贴OTP时页面强制刷新，移除CSP配置后问题消失。

根本原因排查 #

1. CSP语法错误（最可能触发）
   原规则中style-src 'self' img-src 'self' data:;存在语法错误：style-src和img-src是两个独立的CSP指令，不能合并写在同一个指令条目下。不同浏览器对语法错误的处理逻辑不同：

   • Chrome等浏览器容错性较强，会尝试忽略错误并继续解析后续指令；
   • Safari对CSP语法校验更严格，会将此类错误判定为严重违规，直接触发页面刷新阻断潜在风险。

2. 剪贴板权限限制（次要可能）
   Safari的剪贴板访问机制相对严格，若页面使用navigator.clipboard相关API，而CSP或权限策略未明确允许，可能触发违规行为。但此场景下移除CSP后问题消失，说明核心矛盾仍与CSP配置直接相关。

解决方案 #

1. 修复CSP语法错误
   将style-src和img-src拆分为独立指令，修正后的Nginx配置：

   add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; connect-src 'self'; font-src 'self'; object-src 'none'; media-src 'self'; form-action 'self'; frame-ancestors 'self';" always;
   

2. 补充剪贴板权限配置（可选，若修复语法后仍有问题）
   在Nginx中添加权限策略，允许自身域名访问剪贴板：

   add_header Permissions-Policy "clipboard-read=(self), clipboard-write=(self)";
   

3. 验证违规日志
   打开Safari开发者工具的Console面板，查看是否有CSP违规报错，可直接定位具体触发刷新的违规行为（比如内联脚本、未授权的资源请求等）。

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