0

我在我的网站中使用了严格的 CSP，并且我使用了 Google reCAPTCHA v2（复选框），但是，该复选框会在其他浏览器中呈现，但不会在 Microsoft Edge 中呈现，特别是 Microsoft Edge 44.18362.449.0。但在使用 Microsoft Edge 85.0.564.51 时，复选框已正确加载。

下面是我的 CSP 配置的样子：

default-src 'self' https://*.olark.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' 'nonce-$nonce_value' https://*.olark.com https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha 'strict-dynamic'; style-src 'self' 'unsafe-inline' 'nonce-$nonce_value' https://*.olark.com; img-src 'self' data: https://*.olark.com; font-src 'self'; child-src 'self' https://*.olark.com; object-src 'none'; frame-src 'self' https://www.google.com/recaptcha;

以下是使用 Microsoft Edge 44.18362.449.0 的控制台中的警告：

CSP14312：资源违反指令“script-src ...”资源将被阻止。

以下是使用 Microsoft Edge 85.0.564.51 的控制台中的警告：

跟踪防护阻止了对 <URL> 的存储的访问。

如何解决问题以使复选框正确呈现？

4

2 回答 2

1

在这样的规则中：

default-src https://www.gstatic.com/recaptcha 'strict-dynamic' 'nonce-value'

你有2个麻烦：

  1. 当您省略尾部斜杠时，CSP 将/recaptcha视为文件名（而不是目录），并仅允许加载此文件。如果https://www.gstatic.com/recaptcha/ CSP 将/recaptcha/视为目录，并允许加载嵌套在其中的任何目录/文件。
  2. Firefox 有一个旧错误，因此它不支持default-src指令中的“严格动态”或“随机值” 。您需要对这些令牌使用script-src。

PS：不要忘记在 'nonce-$nonce_value' 标记而不是 $nonce_value 变量中每次插入一个新的服务器生成的随机数。

PPS：您还需要将 host-sources: https://script.tapfiliate.com https://fonts.googleapis.com添加到您的 CSP 规则中。

于 2020-09-20T03:20:58.543 回答
0

我想你错过了一个/之后https://www.gstatic.com/recaptcha。那么 Edge Legacy 就无法到达该路径下的资源。它可以在 Edge Chromium 和 Chrome 中工作，这可能是因为它们处理 url 路径的规则与 Edge Legacy 不同。

我添加了/它，它可以在 Edge Legacy 中很好地工作。我使用如下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://mysite/; script-src 'self' 'unsafe-inline' 'unsafe-eval' 'nonce-$nonce_value' https://mysite/ https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ 'strict-dynamic'; style-src 'self' 'unsafe-inline' 'nonce-$nonce_value' https://mysite/; img-src 'self' data: https://mysite/; font-src 'self'; child-src 'self' https://mysite/; object-src 'none'; frame-src 'self' https://www.google.com/recaptcha/;" />
    <title>reCAPTCHA demo: Simple page</title>
    <script nonce="$nonce_value" src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="" method="post">
        <label for="name">Name:</label>
        <input name="name" required><br />
        <label for="email">Email:</label>
        <input name="email" type="email" required><br />
        <div class="g-recaptcha" data-sitekey="mykey"></div>
        <input type="submit" value="Submit" />
    </form>
  </body>
</html>

边缘遗产的结果：

在此处输入图像描述

于 2020-09-16T05:29:44.550 回答