Google reCAPTCHA v2遇到Microsoft Edge中被阻止的CSP14312错误资源

问题描述

我在网站上使用严格的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: Resource violated directive 'script-src...' Resource will be blocked.

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

Tracking Prevention blocked access to storage for <URL>.

如何解决该问题，以便复选框能够正确显示？

解决方法

我认为您在/之后错过了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>

产生Edge Legacy：

按照以下规则：

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

您有2种麻烦：

省略斜杠后，CSP会将 / recaptcha 视为文件名（而不是目录），并仅允许加载此文件。如果 https://www.gstatic.com/recaptcha/ CSP将 / recaptcha / 视为目录，并允许加载嵌套在其中的任何目录/文件。
Firefox具有old bug，因此它不支持 default-中的'strict-dynamic'或'nonce-value' src 指令。您需要为这些令牌使用 script-src 。

PS：请不要忘记使用'nonce- $ nonce_value'令牌而不是$ nonce_value变量来每次插入新的服务器生成的随机数。

PPS：您还需要在CSP规则中添加主机源： https://script.tapfiliate.com https://fonts.googleapis.com 。

content-security-policy grecaptcha jsp jsp microsoft-edge recaptcha recaptcha