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

Question

反应：^0.14.X

健全性检查 - 在 React 中构建自定义输入很常见 使用 ajax 的组件，并且由于令牌作为状态的一部分传递给客户端我可以想象使用 React 需要使用表单和隐藏的输入值来传递 csrf 令牌是一个可以完全跳过的步骤， 但是当 Github 上的每个人仍在构建使用表单和隐藏输入值的 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 = 发送的。