Laravel+Vue集成Stripe遇unsafe-eval CSP警告及脚本加载问题

问题核心 #

之前页面头部引入Stripe v3脚本一切正常，近期控制台弹出CSP安全警告，提示unsafe-eval不在允许的脚本源范围内；手动添加CSP meta标签后，其他脚本又被拦截——原因是新配置的CSP只包含了Stripe相关源，漏掉了项目里其他必要的脚本地址。

具体解决步骤 #

1. 优先用Laravel后端配置CSP（不推荐用meta标签） #

Laravel项目通过后端配置CSP更稳妥，比如使用spatie/laravel-csp扩展：

• 安装扩展后，在config/csp.php的script-src数组中补充所需源：

return [
    'default' => [
        'script-src' => [
            'self',
            'unsafe-eval', // Stripe内部运行必须依赖该规则
            'https://js.stripe.com',
            'https://m.stripe.network',
            // 补充你项目中其他依赖的脚本源，比如Vue开发服务器地址、第三方CDN等
        ],
        // 按需配置其他资源规则
        'style-src' => [
            'self',
            'unsafe-inline',
            'https://js.stripe.com',
        ],
        'img-src' => [
            'self',
            'data:',
            'https://*.stripe.com',
        ],
    ],
];

配置后后端会自动在响应头注入正确的CSP规则，不会覆盖原有合法配置。

2. 若必须使用meta标签配置 #

一定要把项目所有依赖的脚本源都加入，不能只包含Stripe相关：

<meta http-equiv="Content-Security-Policy" content="
    script-src 'self' 'unsafe-eval' https://js.stripe.com https://m.stripe.network 'sha256-e/Jqu4k9Gk1ZCWO6StAsfhF3i7qgIwfuitaD1g9DyvE=' 你的其他脚本源地址;
    style-src 'self' 'unsafe-inline' https://js.stripe.com;
    img-src 'self' data: https://*.stripe.com;
"/>

比如项目用到的axios CDN、UI库脚本地址等，都要补充到script-src中，否则会被拦截。

3. 排查遗漏的脚本源 #

如果仍有脚本被拦截，打开浏览器开发者工具的Security面板，里面会显示被拦截的脚本URL，将该URL添加到script-src即可。

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