Google reCAPTCHA V3按官方文档配置CSP后出现跨域报错如何解决

问题根因 #

你当前使用的官方文档给出的是最小化基础配置，没有覆盖reCAPTCHA V3实际运行时的全部资源请求场景，具体缺漏如下：

• 未配置img-src规则，缺少对ssl.gstatic.com域名的静态资源加载授权，reCAPTCHA运行时拉取校验用图标、静态素材的请求会被拦截，就是你看到的favicon跨域报错来源
• 未配置connect-src规则，CSP默认会拦截所有未授权域名的fetch、XHR异步请求，reCAPTCHA V3的风控令牌上报、校验接口请求被拦截后，就会抛出Uncaught (in promise) TypeError: Failed to fetch的异常
• 现有script-src的路径配置过窄，reCAPTCHA部分核心运行时JS会从www.gstatic.com根路径下发，不在你配置的/recaptcha/子路径下，偶发会出现JS加载失败的问题

修复后可用的CSP配置 #

直接替换原有的meta标签即可：

<meta http-equiv="Content-Security-Policy" content="
script-src https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ https://www.gstatic.com/;
frame-src https://www.google.com/recaptcha/ https://recaptcha.google.com/recaptcha/;
img-src https://www.gstatic.com/ https://ssl.gstatic.com/ https://www.google.com/;
connect-src https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ https://recaptcha.google.com/recaptcha/;
">

配置说明 #

• 所有规则都做了域名和路径收敛，没有使用泛域名通配，不会过度降低CSP的安全防护等级
• 补全的connect-src规则覆盖了reCAPTCHA V3所有异步上报、校验请求的域名，直接解决fetch失败的Promise异常
• 补全的img-src规则覆盖了所有静态图片、素材资源的加载域名，解决ssl.gstatic.com下的资源跨域拦截问题
• 给script-src补充的www.gstatic.com授权，覆盖了非/recaptcha/路径下的核心JS加载需求，避免偶发的脚本加载失败

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