Question

我正在尝试整合Stripe，但面临以下问题。

当我通过ngx-stripe正常加载时，会在控制台中显示此错误。

拒绝加载脚本“ https://js.stripe.com/v3/”，因为它违反以下内容安全策略指令：“ script-src 'self''unsafe-eval'”。请注意，“ script-src-elem”未明确显示设置，因此将'script-src'用作后备广告。

我将清单中的content_security_policy更改为"script-src 'self' https://js.stripe.com/v3/; object-src 'self' "，但这在控制台中给了我这个错误。

未捕获的EvalError：拒绝将字符串评估为JavaScript，因为以下内容不允许'unsafe-eval'脚本源内容安全政策指令：“ script-src'self' https://js.stripe.com/v3/”。

之后，我尝试添加content_scripts，但这给了我这个错误，也不允许我在说

无法为内容脚本加载javascript
。

我该如何克服这个问题？并且可以将Stripe集成到chrome扩展中，因为Stripe仅通过https起作用，而扩展与chrome://一起起作用

Answer 1

我遇到了这些以及随后的一些问题，这些问题将stripe集成到chrome扩展中。

说明：

我将首先陈述一下我相信正在发生的事情。使用条纹反应库，我相信它们在某个地方有一个内联js调用，从而导致您看到关于js.stripe.com的错误。我认为可以通过在您的unsafe-inline中添加content_security_policy来解决此问题，但这不会由每个the extension CSP的chrome扩展名执行。

解决方案：

这就是我所做的各种事情（解决一个问题通常会导致不得不解决下一组错误）。

我最初将constent_security_policy设置为

"content_security_policy": "script-src 'self' https://js.stripe.com/v3; object-src 'self';"

我在上面遇到了您的问题，因此将脚本添加到标题调用中，导致index.html文件如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://js.stripe.com/v3" async></script>
  </head>
  <body>
    <div id="modal-window"></div>
  </body>
</html>

这解决了上面与您相匹配的第一组错误，但导致了下一组问题：

然后我在Refused to frame ... because it violates the following Content Security Policy directive: "frame-src"...附近遇到了一系列错误，因此我通过在content_security_policy中添加以下内容来解决了这些错误：

frame-src https://js.stripe.com/v3

所以我的content_security_policy的最终版本如下：

"content_security_policy": "script-src 'self' https://js.stripe.com/v3; object-src 'self'; frame-src https://js.stripe.com/v3"

我希望能为您做到。我花了几个小时才能完成所有这些工作。

Answer 2

@EndersJeesh 提供的答案适用于清单版本为 2 的 Chrome 扩展程序。

我想知道它是否会在清单版本 3 中停止工作：

https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#remotely-hosted-code

远程托管代码表示您将无法加载远程托管代码，因此我认为无法加载 https://js.stripe.com/v3。

最好的解决方案是将所有 Stripe 代码嵌入到扩展中，但没有用于此 Stripe 代码的 npm 包。

@EndersJeesh 或其他人的任何评论将不胜感激。

是否可以将Stripe集成到Chrome扩展程序中

2 个答案: