如何解决前端集成Stripe时出现的Content Security Policy错误？

错误原因分析 #

错误提示明确指出：

Refused to frame 'https://js.stripe.com/' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.

问题出在frame-src指令未配置，CSP会使用default-src的规则（仅允许同源资源）来限制iframe加载，导致Stripe的iframe被拦截。你之前只配置了script-src和script-src-elem，没有处理iframe相关的规则，所以问题未解决。

解决步骤 #

1. 添加frame-src指令到CSP配置
   修改页面的meta标签，明确允许https://js.stripe.com作为iframe源：

   <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://js.stripe.com; script-src-elem 'self' https://js.stripe.com; frame-src 'self' https://js.stripe.com;">
   

2. 额外检查项

   • 确认服务器是否也返回了Content-Security-Policy响应头：如果服务器端配置了CSP，页面meta标签的规则会和服务器规则合并（取更严格的限制），此时需要在服务器端的CSP配置中同样添加frame-src https://js.stripe.com。
   • 若使用Stripe Elements发起API请求，还需添加connect-src指令允许Stripe API域名，避免后续请求被拦截：

     <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://js.stripe.com; script-src-elem 'self' https://js.stripe.com; frame-src 'self' https://js.stripe.com; connect-src 'self' https://api.stripe.com;">
     

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