外部脚本与样式的Content Security Policy（CSP）配置异常求助

问题出在哪 #

从你贴的错误信息能看出来，当前生效的CSP规则里，script-src只允许加载https://cdnjs.cloudflare.com、https://api.mapbox.com、'self'和blob:这几个来源的脚本，但你要加载的Stripe脚本域名https://js.stripe.com不在允许列表里，所以浏览器直接拦截了。

你试的<meta http-equiv="Content-Security-Policy" content="default-src https:">没起作用，大概率是因为服务器已经通过响应头设置了CSP——浏览器会优先认响应头里的规则，meta标签的配置直接被忽略了。

怎么解决 #

第一步：先搞清楚CSP的来源

先去检查你的服务器配置（比如Nginx、Apache）或者后端代码，看看是不是已经设置了Content-Security-Policy响应头。举个例子：

• Nginx里可能有类似add_header Content-Security-Policy "script-src https://cdnjs.cloudflare.com https://api.mapbox.com 'self' blob:";的配置
• Express框架里可能用res.setHeader('Content-Security-Policy', ...)设置了这个头

如果服务器已经发了CSP响应头，那你得改这个响应头的内容，meta标签不管用的。

第二步：更新CSP规则

不管是改服务器响应头还是用meta标签（仅限服务器没设CSP头的情况），核心是把Stripe的域名加到script-src里，同时确保其他需要的资源也能正常加载：

方法一：修改服务器的CSP响应头

把script-src指令更新成包含https://js.stripe.com，同时补充style-src保证Mapbox的样式能加载：

Content-Security-Policy: default-src 'self'; script-src https://js.stripe.com https://cdnjs.cloudflare.com https://api.mapbox.com 'self' blob:; style-src https://api.mapbox.com 'self';

方法二：用meta标签（仅当服务器没设置CSP响应头时生效）

替换你原来的meta标签，用下面这个更明确的配置：

<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  script-src https://js.stripe.com https://cdnjs.cloudflare.com https://api.mapbox.com 'self' blob:;
  style-src https://api.mapbox.com 'self';
">

几个重要提醒 #

• 优先级问题：响应头的CSP规则比meta标签的优先级高，所以如果服务器已经发了CSP头，meta标签的配置肯定没用，必须改服务器端的设置。
• 安全原则：尽量别用default-src https:这种太宽松的规则，明确列出所有需要的域名更安全，也能避免不必要的风险。

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