集成Stripe时遭遇CSP内联脚本执行拒绝问题求助

我在网站集成Stripe时遇到了以下错误：

js.stripe.com/v3/hcaptcha-invisible-078b5f9fb44d244a9ec072f93a216630.html#debugMode=false&parentOrigin=http%3A%2F%2Flocalhost:3 [仅报告] 拒绝执行内联脚本，因为它违反了以下Content Security Policy指令："script-src 'self'"。需要使用'unsafe-inline'关键字、哈希值('sha256-CBu0w5uiOaPgb2R6Zgf7E0+STJHF4lcPIdhZzQXE6yk=')或随机数('nonce-...')才能启用内联执行。

我尝试通过添加meta标签配置CSP指令解决：

<meta http-equiv="Content-Security-Policy" content="script-src 'self' js.stripe.com code.jquery.com cdn.jsdelivr.net maps.googleapis.com  'unsafe-inline';"/>

但报错文件存储在Stripe服务器上，我认为当前CSP规则无法作用于该文件。之前其他集成场景遇到同类错误时，配置对应指令就能解决，但这次不管用。访问https://js.stripe.com/v3/hcaptcha-invisible-078b5f9fb44d244a9ec072f93a216630.html#debugMode=false&parentOrigin=http%3A%2F%2Flocalhost并查看浏览器控制台可复现该错误。

可行解决方法 #

1. 补充frame-src规则
   Stripe的hcaptcha页面是通过iframe加载的，你的CSP必须允许加载该iframe源。修改CSP配置，添加frame-src js.stripe.com：

   <meta http-equiv="Content-Security-Policy" content="script-src 'self' js.stripe.com code.jquery.com cdn.jsdelivr.net maps.googleapis.com 'unsafe-inline'; frame-src js.stripe.com;"/>
   

2. 使用错误提示中的哈希值替代unsafe-inline
   错误里给出了内联脚本的哈希值，把它加入script-src，无需启用unsafe-inline，安全性更高：

   <meta http-equiv="Content-Security-Policy" content="script-src 'self' js.stripe.com code.jquery.com cdn.jsdelivr.net maps.googleapis.com 'sha256-CBu0w5uiOaPgb2R6Zgf7E0+STJHF4lcPIdhZzQXE6yk='; frame-src js.stripe.com;"/>
   

3. 检查服务器端CSP配置
   如果你的服务器（比如Nginx、Apache）通过HTTP头设置了CSP，meta标签的配置会被覆盖。需要在服务器配置中修改CSP规则，添加对应的源和哈希值。

4. 确认Stripe必需的CSP源
   除了js.stripe.com，还要确保CSP允许api.stripe.com以及hcaptcha相关的源（如hcaptcha.com、*.hcaptcha.com），具体可参考Stripe官方的CSP配置要求。

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