本文旨在解决在使用Stripe时遇到的Content-Security-Policy (CSP) `script-src 'inline'`错误。文章将深入探讨`'unsafe-inline'`指令的风险，强调将内联脚本外部化的最佳实践，并详细指导如何通过修改HTTP响应头来正确配置服务器端的CSP，以安全地允许Stripe脚本加载及运行，同时提供处理无法避免的内联脚本的高级策略。
1. 理解Content-Security-Policy (CSP) 与内联脚本问题
Content-Security-Policy (CSP) 是一种重要的安全机制，旨在通过限制浏览器加载和执行特定类型资源（如脚本、样式、图片等）的来源，有效防范跨站脚本 (XSS) 攻击和其他内容注入漏洞。当在应用程序中集成Stripe时，如果页面的CSP配置不当，浏览器可能会阻止Stripe相关脚本的加载或执行，导致类似“Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).”的错误。
这个错误的核心在于script-src指令阻止了“内联”（inline）脚本的执行。默认情况下，现代CSP策略会禁止所有内联脚本（包括<script>标签内的代码、HTML事件处理器如onclick、以及javascript: URI），因为它们是XSS攻击的常见载体。
用户尝试通过HTML <meta> 标签设置CSP是一种常见做法，例如：
<meta http-equiv="Content-Security-Policy"
content="script-src 'self' https://js.stripe.com" />
<script type="text/javascript" src="https://js.stripe.com/v3/"></script>然而，需要注意的是，如果服务器已经通过HTTP响应头设置了CSP，那么<meta>标签中的CSP将不会放松已有的限制，只会使其变得更严格。这意味着，如果服务器端的CSP已经阻止了内联脚本，<meta>标签即使允许了Stripe的外部脚本，也无法解决内联脚本被阻止的问题。因此，解决CSP问题通常需要修改服务器端的配置。
2. 避免使用'unsafe-inline'
为了解决内联脚本被阻止的问题，一种直接但不推荐的方法是在script-src指令中添加'unsafe-inline'。例如：
Content-Security-Policy: script-src 'self' 'unsafe-inline' https://js.stripe.com;
尽管这可以允许所有内联脚本执行，但如其名称所示，'unsafe-inline'会大大削弱CSP的安全防护能力，使其更容易受到XSS攻击。一旦攻击者能够注入任何内联脚本，他们就可以执行恶意代码，窃取用户数据或劫持会话。
最佳实践：将内联脚本外部化
为了避免使用'unsafe-inline'，最佳策略是将所有必要的内联脚本移至单独的JavaScript文件。例如，如果页面中存在以下内联脚本：
<script>
// Stripe相关的初始化或其他逻辑
var stripe = Stripe('pk_test_YOUR_KEY');
var elements = stripe.elements();
// ... 其他Stripe或应用逻辑
</script>应将其内容剪切到一个名为 stripe-setup.js 的文件中：
// stripe-setup.js
var stripe = Stripe('pk_test_YOUR_KEY');
var elements = stripe.elements();
// ... 其他Stripe或应用逻辑然后，在HTML文件中通过外部引用加载：
<script type="text/javascript" src="https://js.stripe.com/v3/"></script> <script type="text/javascript" src="/path/to/stripe-setup.js"></script>
这样，所有的脚本都来自明确的外部源，CSP可以更安全地进行管理。
3. 正确配置Stripe的CSP
解决CSP问题的关键在于修改服务器通过HTTP响应头发送的Content-Security-Policy。首先，您需要检查当前页面的CSP设置。在浏览器开发者工具（如Firefox或Chrome）的网络（Network）标签页中，选择主文档请求，查看其响应头（Response Headers），查找Content-Security-Policy字段。
Stripe所需的CSP指令
为了确保Stripe的功能完整，除了核心的script-src，可能还需要配置其他指令。以下是集成Stripe时常用的CSP指令及其对应的源：
-
script-src: 允许加载Stripe的JavaScript库。
- 'self'：允许加载同源脚本。
- https://js.stripe.com：Stripe JavaScript库的CDN地址。
-
connect-src: 允许通过XMLHttpRequest (XHR)、Fetch API、WebSocket等方式与Stripe API进行通信。
- 'self'：允许同源连接。
- https://api.stripe.com：Stripe API的端点。
-
frame-src: 允许Stripe在页面中嵌入iframe（例如用于支付表单元素）。
- https://js.stripe.com：Stripe用于iframe的源。
-
style-src: 允许Stripe加载其样式。
- 'self'：允许同源样式。
- 'unsafe-inline'：如果Stripe或您的应用有少量内联样式，可能需要，但应尽量避免。更安全的选择是使用nonce或hash。
-
img-src: 允许加载图片（例如Stripe的品牌标志）。
- 'self'：允许同源图片。
- data:：如果Stripe或您的应用使用data URI嵌入图片，可能需要。
服务器端CSP配置示例
以下是一个针对Stripe集成的综合CSP策略示例，应在服务器端作为HTTP响应头发送：
Content-Security-Policy: default-src 'self'; script-src 'self' https://js.stripe.com; connect-src 'self' https://api.stripe.com; frame-src https://js.stripe.com; style-src 'self' 'unsafe-inline'; /* 建议替换为nonce或hash */ img-src 'self' data:; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none';
解释：
- default-src 'self'：为未明确指定的指令设置默认策略为同源。
- script-src 'self' https://js.stripe.com：允许加载来自同源和https://js.stripe.com的脚本。
- connect-src 'self' https://api.stripe.com：允许同源和https://api.stripe.com的连接请求。
- frame-src https://js.stripe.com：允许来自https://js.stripe.com的iframe。
- style-src 'self' 'unsafe-inline'：允许同源样式和内联样式。再次强调，'unsafe-inline'应尽量避免。
- img-src 'self' data:：允许同源图片和data URI图片。
- object-src 'none'：禁止加载<object>, <embed>, <applet>等元素，进一步增强安全性。
- base-uri 'self'：限制<base>标签的URL。
- form-action 'self'：限制表单提交的URL。
- frame-ancestors 'none'：防止页面被其他网站嵌入到<iframe>、<frame>、<object>中，防止点击劫持。
如何修改服务器配置：
-
Nginx: 在您的Nginx配置文件（例如nginx.conf或站点配置文件）中添加或修改add_header指令：
add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://js.stripe.com; connect-src 'self' https://api.stripe.com; frame-src https://js.stripe.com; style-src 'self'; img-src 'self' data:; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none';";
-
Apache: 在.htaccess文件或服务器配置文件中添加或修改Header set指令：
Header set Content-Security-Policy "default-src 'self'; script-src 'self' https://js.stripe.com; connect-src 'self' https://api.stripe.com; frame-src https://js.stripe.com; style-src 'self'; img-src 'self' data:; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none';"
-
Node.js/Express: 使用helmet等中间件或直接设置响应头：
const express = require('express'); const helmet = require('helmet'); const app = express(); app.use(helmet.contentSecurityPolicy({ directives: { defaultSrc: ["'self'"], scriptSrc: ["'self'", "https://js.stripe.com"], connectSrc: ["'self'", "https://api.stripe.com"], frameSrc: ["https://js.stripe.com"], styleSrc: ["'self'"], // 如果有内联样式，需要添加 "'unsafe-inline'" 或使用 nonce/hash imgSrc: ["'self'", "data:"], objectSrc: ["'none'"], baseUri: ["'self'"], formAction: ["'self'"], frameAncestors: ["'none'"], }, })); // ... 其他路由和中间件
4. 处理无法避免的内联脚本（高级技巧：Nonce和Hash）
如果确实存在无法外部化的内联脚本（例如，由第三方库动态生成且难以控制的脚本），并且您不想使用不安全的'unsafe-inline'，CSP提供了更安全的替代方案：Nonce (一次性随机数) 和 Hash (哈希值)。
-
Nonce (一次性随机数): 在服务器端为每个请求生成一个唯一的、加密安全的随机字符串（Nonce），并将其添加到CSP头和对应的<script>标签中。
<script nonce="YOUR_RANDOM_NONCE_STRING"> // 你的内联脚本 </script>
CSP头中则包含：
Content-Security-Policy: script-src 'self' 'nonce-YOUR_RANDOM_NONCE_STRING' https://js.stripe.com;
每次页面加载时，YOUR_RANDOM_NONCE_STRING都必须是不同的。
-
Hash (哈希值): 计算内联脚本内容的SHA256、SHA384或SHA512哈希值，并将其添加到CSP头中。
<script> alert('Hello, CSP!'); </script>其SHA256哈希值可能是 sha256-qznLcsROx4GACP2dm/GM/B+P6nbQFKefgQUj45/8cOk=。 CSP头中则包含：
Content-Security-Policy: script-src 'self' 'sha256-qznLcsROx4GACP2dm/GM/B+P6nbQFKefgQUj45/8cOk=' https://js.stripe.com;
这种方法要求脚本内容精确匹配哈希值，任何微小改动都会导致脚本被阻止。
Nonce通常更灵活，因为它允许脚本内容动态变化，只要Nonce匹配即可。Hash则适用于内容固定不变的内联脚本。
总结与注意事项
- 优先修改HTTP响应头CSP：<meta>标签CSP的优先级低于HTTP响应头，且只能使策略更严格。务必在服务器端配置CSP。
- 避免'unsafe-inline'：除非万不得已，否则不要使用此指令，它会极大地降低安全性。
- 外部化脚本：将所有内联JavaScript代码移至独立的.js文件，这是解决script-src 'inline'问题的最佳实践。
- 明确Stripe所需源：确保script-src包含https://js.stripe.com，connect-src包含https://api.stripe.com，frame-src包含https://js.stripe.com。根据您的集成方式，可能还需要其他指令。
- 增量式测试：在部署新的CSP策略时，可以先使用Content-Security-Policy-Report-Only头进行测试，它会报告违规而不阻止资源加载，帮助您发现遗漏的源。
- 持续监控：CSP是一个动态的安全策略，随着应用程序和第三方服务的更新，可能需要调整。定期检查浏览器控制台的CSP违规报告。
通过遵循上述指导，您可以为Stripe集成配置一个强大且安全的Content-Security-Policy，有效保护您的应用程序免受XSS攻击，同时确保支付功能的正常运行。
