React 安全性：状态操作答案

【问题标题】：React security: state manipulationReact 安全性：状态操作
【发布时间】：2018-06-20 23:21:13
【问题描述】：

我正在开发一个 React 项目，并且喜欢它的动态性。但是，在处理动态安全功能时——在我的例子中是 Google reCAPTCHA，我非常担心用户可能会操纵我的状态和属性。

例如，这就是我处理 reCAPTCHA 的方式：

class Create extends Component {
  constructor() {
    super();
    this.onRECAPTCHA = this.onRECAPTCHA.bind(this);
    this.state = {captcha: false}
    // ...
  }

  onRECAPTCHA(value) {
    if (value == null) {
      this.setState({captcha: false})
    }
    this.setState({captcha: true})
  }
}

我有一个按钮 onClick 的处理程序，它在函数中测试 this.state.captcha，然后再继续。它按预期工作，但我偶然发现了 react-dev-tools 并发现我能够手动操作我的验证码状态！我是否公然遗漏了什么，或者我不应该将验证码设置为状态/属性？这也让我担心我设置的其他几个状态/道具。我所有的验证都以这种方式存储。

【问题讨论】：

标签： node.js reactjs security recaptcha states

【解决方案1】：

最终，您需要授权才能在安全的环境中进行，而浏览器不是那个地方。例如，如果您要保护表单提交，则由您负责处理提交的服务器端代码以验证验证码响应是否符合预期。只要您不将其用作验证/授权的唯一来源，就可以操纵客户端状态这一事实并不重要。

【讨论】：

我的验证码确实在服务器上得到验证，但我将其结果存储在客户端，为人们提供了一个机会来操纵状态。作为客户，我不知道如何处理这个问题，因为大多数时候，您在点击“提交”之前点击“我不是机器人”——所以这个窗口看起来应该无处不在。
服务器应与表单提交一起验证验证码。您不希望客户端控制（最终）验证状态。
但这如何解释提交按钮的存在呢？如果我要直接从服务器验证处理所有事情，只要他们单击“我不是机器人”，我就会提交表单（如果经过验证）。我感到困惑的是，在选中该框和单击提交之间存在的状态。
我的解决方案是禁用提交按钮，直到服务器端验证返回。其中仅由服务器触发，而不是状态。感谢您的观点！
如果您想将验证码验证与提交验证分开，那么当您的服务器验证验证码时，它应该保留某种不可伪造的令牌作为验证证明并将其发送回客户端。当客户端提交时，它应该将该令牌发送回服务器，以便服务器可以验证它是一个授权请求。简单地禁用提交按钮并不安全，因为用户可以使用开发工具轻松启用它。您也可以合并您的验证码并提交验证。