reCAPTCHA v3网络密集型Web应用程序

Question

我在Angular 2应用程序中使用Google的reCAPTCHA v3来防止自动表单提交.当用户与UI交互时,我的应用程序在后台进行许多网络调用.

从index.html,我做了一个故意阻塞调用来加载库(防止Angular世界在recaptcha/api.js加载之前进入):

<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>

从Angular Service的构造函数中,我使用DOCUMENT DI令牌来引用grecaptcha对象:

  constructor(@Inject(DOCUMENT) private document: any) {
    this.grecaptcha = this.document.grecaptcha;
  }

一旦应用程序被加载(使用生命周期钩子),前面提到的Angular服务调用grecaptcha.execute获取唯一token(根据前端集成指南):

  public executeCaptcha() {
    this.grecaptcha.ready(() => {
      this.grecaptcha
        .execute(MyService.CAPTCHA_KEY, {
          action: 'execute'
        })
        .then((token: string) => this.token = token);
    });
  }

它token是回调的参数,并存储为Angular service(this.token = token))的成员.

此时,应用程序没有对我的后端进行任何API调用,也没有将用户验证为人.

在token必须发送到我的后端服务器,后者又必须验证用户的响应通过做一个API请求.

然后可以将API响应返回给浏览器(Angular app):

{
  "success": true|false,
  "challenge_ts": timestamp,  // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
  "hostname": string,         // the hostname of the site where the reCAPTCHA was solved
  "error-codes": [...]        // optional
}

问题

• 是否应该token与我的Angular应用程序的每个HTTP请求一起发送,并且每次都要验证？
  • ...或者用户可以一次(在开始时)进行验证,并在Angular应用程序中记住他们的分数？
• 我在某处读到谷歌使用鼠标移动和各种客户端信号来计算分数.
  • ......这是否意味着我应该(重新)定期验证以获得更高的分数？

Answer 1

如果您想确保安全，则必须在每次用户通过表单发布数据时发送令牌（每次都是新的）。否则，如果用户发现您只检查他一次，他可以自己第一次点击发布，那么他可以运行 selenium 或其他脚本程序，因为他的会话已经被验证。

请注意，您每次都需要向 google 询问新令牌。首先，因为它们只允许您一次使用一个令牌，其次，令牌的生存时间很短，之后就会过期。这两个边界的目的是防止我上面描述的漏洞。

当然，安全性和性能之间总是需要权衡。我不建议缓存验证数据，但也许对于某种轻量级搜索，您可以考虑它，但我强烈建议在发布数据、更新或删除时不要这样做。