如何在Chrome扩展程序的浏览器操作中显示Google reCAPTCHA v2？

Question

我正在开发一个与API交互的Chrome扩展程序，并希望使用Google recaptcha来保护它，因为我打算让它不仅限于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小部件显示了一条消息：

请升级到受支持的浏览器以获取reCAPTCHA挑战。

我通过自动呈现方法来显示小部件，但也尝试了显式方法，结果仍然出现同样的错误。提供信息，我正在使用以下content_security_policy：

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

有没有办法让这个在我的扩展程序中工作？如果不能，什么是集成reCAPTCHA的最佳替代方法？

- Rich Browne

---

我没有尝试过，但我认为在扩展中添加验证码是不可能的，因为它会由于Content-Security-Policy而被阻止。由于reCAPTCHA小部件显示错误，请问您是否已更新您的浏览器？ - Android Enthusiast

内容安全策略似乎不是问题的原因，因为我已经设置了策略（在原帖中有注明），以便远程脚本正确加载。错误似乎出现在 recapture 脚本尝试使用端口 80 显式地设置第二个参数（targetOrigin）时，即与接收窗口的来源不同。我不知道为什么它在源中显式设置端口 80，或者是否可以绕过这个问题。 - Rich Browne

我在这里问过：https://groups.google.com/forum/#!topic/recaptcha/6O4MTigYVPw - Martin Ždila

Answer 1

在 recaptcha v3 中，

manifest.json "content_security_policy": "script-src 'self' https://.google.com https://.gstatic.com; object-src 'self'"

在 reCAPTCHA 管理控制台中添加 Chrome 扩展 ID 到允许的域名列表中：

chrome-extension://aailnablglhloogfnpkgddnjjfimhhhg

因此，只需将 "aailnablglhloogfnpkgddnjjfimhhhg" 放入，无需 chrome-extension://。

- Sergio Quintero

---

有关如何在清单V3中实现它的任何想法吗？ - AMBasra

Manifest v3 不允许外部脚本，因此 content_security_policy 声明将无法工作。 - Duc Filan