javascript - ReCaptcha API v2 样式

Question

我在寻找如何设置 Google 的新 recaptcha (v2) 样式方面没有取得多大成功。最终目标是使其具有响应性，但我很难为宽度等简单的东西应用样式。

他们的 API documentation除了 theme 参数外，似乎没有给出任何关于如何控制样式的细节，简单的 CSS 和 JavaScript 解决方案对我不起作用。

基本上，我需要能够将 CSS 应用于 Google 的新版 reCaptcha。使用 JavaScript 是可以接受的。

Answer 1

概述:

很抱歉成为坏消息的回答者，但经过研究和调试，很明显无法自定义新 reCAPTCHA 控件的样式。这些控件被包装在 iframe 中，这可以防止使用 CSS 来设置它们的样式，并且 Same-Origin Policy阻止 JavaScript 访问内容，甚至排除了一个 hacky 解决方案。

为什么不自定义 API？:

不同于reCAPTCHA API Version 1.0 , API Version 2.0 中没有自定义选项.如果我们考虑一下这个新 API 的工作原理，就不足为奇了。

摘自Are you a robot? Introducing “No CAPTCHA reCAPTCHA” :

While the new reCAPTCHA API may sound simple, there is a high degree of sophistication behind that modest checkbox. CAPTCHAs have long relied on the inability of robots to solve distorted text. However, our research recently showed that today’s Artificial Intelligence technology can solve even the most difficult variant of distorted text at 99.8% accuracy. Thus distorted text, on its own, is no longer a dependable test.

To counter this, last year we developed an Advanced Risk Analysis backend for reCAPTCHA that actively considers a user’s entire engagement with the CAPTCHA—before, during, and after—to determine whether that user is a human. This enables us to rely less on typing distorted text and, in turn, offer a better experience for users. We talked about this in our Valentine’s Day post earlier this year.

如果您能够直接操纵控件元素的样式，则可以轻松干扰使新的 reCAPTCHA 成为可能的用户分析逻辑。

自定义主题怎么样？

现在新 API does offer a theme option ，您可以通过它选择预设主题，例如 light 和 dark。但是目前没有办法创建自定义主题。如果我们检查 iframe，我们会发现 theme 名称在 src 属性的查询字符串中传递。此 URL 类似于以下内容。

https://www.google.com/recaptcha/api2/anchor?...&theme=dark&...

此参数确定在 iframe 中的包装器元素上使用什么 CSS 类名，并确定要使用的预设主题。

挖掘缩小后的源代码，我发现实际上有 4 个有效的主题值，比文档中列出的 2 个多，但是 default 和 standard 是与 light 相同。

我们可以在这里看到从这个对象中选择类名的代码。

自定义主题没有代码，如果指定了任何其他 theme 值，它将使用 standard 主题。

总结:

目前，还没有办法对新的 reCAPTCHA 元素进行完全样式化，只能对 iframe 周围的包装元素进行样式化。这几乎肯定是有意为之，以防止用户破坏使新的无验证码复选框成为可能的用户分析逻辑。 Google 可能会实现有限的自定义主题 API，也许允许您为现有元素选择自定义颜色，但我不希望 Google 实现完整的 CSS 样式。