React / CSRF：不使用表单和隐藏的输入值而传回CSRF令牌

Question

反应：^ 0.14.X

完整性检查-在React中通常会构建使用ajax的自定义输入组件，并且由于令牌是作为状态的一部分传递给客户端的， 我可以用React想象到，需要使用表单和隐藏的输入值来传递csrf令牌是被完全跳过了 ，但是当Github上的EVERYBODY仍在构建使用表单和隐藏输入值的React应用程序时，您开始认为必须有一些神奇的原因。

现在我知道表单和隐藏的输入值是建议在Node / SPA应用程序中处理的方式...

...但是使用React我没有看到CSRF令牌曾经接触DOM的原因（我认为它很容易被盗），而是从组件的状态进行访问，并在每次提交时将其传递制造。

例如，此登录组件将csrf从组件状态传递出去（稍后由ajax处理）。

var Login = React.createClass({

  getInitialState: function() {
    return{
      csrf: this.props.csrf,
      email:'',
      password: ''
    }
  },

  onEmailChange: function(event) {
    this.setState({email: event.target.value});
  },

  onPasswordChange: function(event) {
    this.setState({password: event.target.value});
  },

  onSubmit: function() {
    ActionCreators.login(this.state.email, this.state.password,this.state.csrf); 
  },

  render: function(){

    return (

        <div className="login-block">
            <input type="text" placeholder="Email" id="input" onChange={this.onEmailChange}/>
            <input type="password" placeholder="Password" id="input" onChange={this.onPasswordChange}/>
            <button onClick={this.onSubmit}>Submit</button>
        </div>

    )
  }

});

问题：上面的代码是否会在我的应用程序中引起某种形式的漏洞，我应该考虑使用表单和隐藏的输入值？

Answer 1

我不这么认为，我认为这只是SPA之前的保留。 也许实际上是使用SPA，理想情况下，您希望在每次状态更改后都以某种方式获得新的CSRF令牌，例如AJAX请求或Websocket请求，如果您使用的是未刷新的表单，则不可能。 实际上，在我们的应用中，CSRF令牌是通过EJS模板渲染所编写的var csrftokenblah =发送的。