google-chrome-extension - 如何在 Chrome 扩展浏览器操作中显示 Google reCAPTCHA v2？

Question

我正在构建一个与我希望使用 Google recatcha 保护的 API 交互的 Chrome 扩展程序，因为我打算将它用于 Chrome 扩展程序之外。 API 端正在工作，正确地验证了与 Google 的 recaptcha 响应，但是，在扩展的浏览器操作窗口中显示 recatcha 小部件会导致以下 javascript 错误:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('chrome-extension://pjhcgfibbbmibojnlkgjejaojpokgldl:80') does not match the recipient window's origin ('chrome-extension://pjhcgfibbbmibojnlkgjejaojpokgldl').

这是在 recaptcha_en.js 中生成的在线:

(a.window || ne(a.Tg)).postMessage(JSON.stringify({
        message: c || null ,
        messageType: b
    }), Zj(a.path));

问题似乎是 a.path的值是 chrome-extension://pjhcgfibbbmibojnlkgjejaojpokgldl:80但我不知道如何影响这个值。

此错误的结果是 recaptcha 小部件显示一条消息:

Please upgrade to a supported browser to get a reCAPTCHA challenge.

我正在通过 auto render method 显示小部件，但也尝试过 explicit method这会导致相同的错误。有关信息，我正在使用以下 content_security_policy :

script-src 'self' https://*.google.com https://*.gstatic.com; object-src 'self'

有什么办法可以让它在我的扩展程序中工作吗？如果没有，集成 recaptcha 的最佳替代方法是什么？

Answer 1

在 recaptcha v3 中

list 文件
"content_security_policy": "script-src 'self' https://.google.com https://.gstatic.com; object-src 'self'"

在 RECAPTCHA 管理控制台中向允许的域添加 Chrome 扩展 ID

Chrome 扩展://aailnablglhloogfnpkgddnjjfimhhhg

所以你只需输入“aailnablglhloogfnpkgddnjjfimhhhg”而不使用chrome-extension://