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 =發送的。