React/CSRF:在不使用表单和隐藏输入值的情况下返回CSRF令牌

Question

反应：^0.14.X

Sanity Check-在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 =发送的。