Question

我已经阅读了一些关于Laravel的CSRF的问题，但我仍然没有找到如何将它与React一起使用。我的目标是制作一个POST表单，在那里我进行AJAX调用。

以下是我render( )的摘录。

render() {
return (
  <form method="post" action="logpage">
   <input type="hidden" name="csrf-token" value="{{{ csrf_token() }}}" />
   //I'm sure this doesn't have csrf_token.

   <input type="text" name ="word" value={this.state.word || ''}/>
   <button onClick={this.submit} className="btn btn-flat btn-brand waves-attach waves-effect" data-dismiss="modal" type="button">Save</button>
  </form>
  );
}

这是提交功能。

submit(){
fetch('/words', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  },
  body: JSON.stringify({
    //parameters
  })
}).then((response)=>{
  console.log(response);
});
}

我认为问题是$('meta[name="csrf-token"]').attr('content')没有被发送，因为令牌没有生成。但是，我不知道如何在React上生成它。

有没有人有想法？

Answer 1

您可以在Javascript中回显令牌：

<script> 
    var csrf_token = '<?php echo csrf_token(); ?>'; 
</script>

并从Javascript的任何地方访问它

'X-CSRF-TOKEN': csrf_token

我希望这适合你。

Answer 2

您还可以将某些路由从csrf保护中排除，这意味着您在发布到这些路由时不需要令牌，但也冒着在这些路由上进行跨站点伪造的风险。

要排除，请打开app\Http\Middleware\VerifyCsrfToken.php，您将看到$ except数组。只需将要排除的路由添加到该数组即可：

protected $except = [
  '/uploadtest'
];

在处理从React组件将文件上传到AWS S3存储中时，我使用了这种方法，这避免了我需要编写新的刀片模板进行上传-我只是将表单放在React组件中，并添加了我的POST路由到except数组。

在没有csrf的情况下，它可以“工作”，我通过在刀片模板中放置一个全局var定义来添加它：

<head>
...
...
<script>
...
var csrf_token = '{{ echo csrf_token()}}';
...
</script>
</head>

，然后通过全局变量将其包含在表单中-可行！即使它“应该”是一个道具，而不是一个全局变量：

<form action="/uploadtest" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="_token" value={csrf_token} />
  <input type="file" name="filename" />
  <input type="submit" value="Upload"/>
</form>

“更好”的方法是将令牌作为道具传递：

<form action="/uploadtest" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="_token" value={this.props.csrf_token} />
  <input type="file" name="filename" />
  <input type="submit" value="Upload"/>
</form>

React js - Laravel 5：在POST方法中使用csrf-token

2 个答案: