如何在 CSP 限制下嵌入 Razorpay 订阅按钮

[MihirR (Mihir)]

我刚刚创建了一个简单的静态订阅页面，现在想在该页面上嵌入一个按钮。

代码如下：

<form>
    <script
        src="https://cdn.razorpay.com/static/widget/subscription-button.js"
        data-subscription_button_id="pl_randodmdi7373737"
        data-button_theme="brand-color"
        async>
    </script>
</form>

据我所知，CSP 不允许我使用该脚本，有什么方法可以实现吗？

PS：我正在使用 Landing Page Plug-in 来创建自定义页面。

[awesomerobot (Kris)]

这可能会有帮助

@awesomerobot

您的浏览器控制台中是否出现有关脚本的错误？类似这样的？

您需要将提供的哈希值（'sha256-xxxxx'）添加到管理后台 > 所有站点设置中的“内容安全策略脚本源”设置中。

我们在这里有更多关于 CSP 的信息：Mitigate XSS Attacks with Content Security Policy

[MihirR (Mihir)]

内容安全策略脚本源

​
https://cdn.razorpay.com
添加项目…

​
content_security_policy_script_src：值必须是 'unsafe-eval' 或 'wasm-unsafe-eval'，或者采用 '\u003chash algorithm\u003e-\u003cbase64 value\u003e' 的形式，其中支持的哈希算法为 sha256、sha384 或 sha512。请确保您的输入用单引号括起来。
其他允许的脚本源。当前主机和 CDN 默认包含在内。请参阅使用内容安全策略缓解 XSS 攻击 (CSP)。由于启用了 strict-dynamic，其他主机源将被忽略。

这是我收到的错误。

[awesomerobot (Kris)]

好的，这是管理员区域中的设置配置错误……添加脚本后，您需要在浏览器控制台中查找错误（在脚本应加载的页面上右键单击，选择“检查”，然后导航到“控制台”选项卡）。

在控制台中，您应该会看到类似以下的错误：

此错误提供一个哈希值或一个 nonce 值，然后您可以将其添加到管理员的“内容安全策略脚本 src”设置中。