如何在 Laravel 中使用 Ajax 请求传递 CSRF 令牌？

CSRF 代表跨站请求伪造。CSRF 是一种由未经授权的用户执行的恶意活动，这些用户冒充已授权用户。

Laravel 通过为每个活动用户会话生成一个csrf令牌来保护此类恶意活动。该令牌存储在用户的会话中。如果会话发生更改，它将始终重新生成，因此每个会话都会验证令牌，以确保已授权的用户正在执行任何任务。以下是一个获取csrf_token的示例。

生成 csrf 令牌

您可以通过两种方式获取令牌。

  • 使用 $request→session()→token()

  • 直接使用 csrf_token() 方法

示例

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Student;

class StudentController extends Controller {
   public function index(Request $request) {
      echo $token = $request->session()->token();
      echo "<br/>";
      echo $token = csrf_token();
   }
}

输出

以上输出为：

13K625e8mnDna1oxm9rqjfAPfugtTlYdndBoNR4d
13K625e8mnDna1oxm9rqjfAPfugtTlYdndBoNR4d

Blade 模板中的 CSRF 令牌

无论何时您必须在 html 表单中使用 POST、PUT、PATCH、DELETE，请确保在 html 表单中将 csrf 令牌作为隐藏字段。这将确保使用 CSRF 中间件保护所做的请求。

在 Blade 模板中，您可以使用 @csrf 指令，这将帮助您生成 csrf 令牌，稍后可以将其存储为隐藏字段，如下所示：

示例

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Student;

class StudentController extends Controller {
   public function index(Request $request) {
      return view('hello');
   }
}

hello.blade.php

<form method="POST" action="/student">
   @csrf
   
   <!-- Equivalent to... -->
   <input type="hidden" name="_token" value="{{ csrf_token() }}" />
</form>


在 Ajax 请求中使用 csrf 令牌

这里将使用 Ajax 请求并在其中传递 csrf 令牌。要在 Ajax 中使用 csrf 令牌。您需要在 html 的头部部分添加 csrf 令牌，如下所示：

<meta name="csrf-token" content="{{ csrf_token() }}">

在您的 html 中包含一个 jquery 文件，因为我们将使用 $.ajaxSetup() 和 $.ajax 来进行 ajax 调用。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

稍后使用标头调用 ajaxsetup，如下所示：

$.ajaxSetup({
   headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
   }
});

现在进行如下所示的 ajax 调用：

$.ajax({
   type:'POST',
   url:'/getdata',
   success:function(data) {
      $("#data").html(data.msg);
   },
   
   error: function (msg) {
      console.log(msg);
   var errors = msg.responseJSON;
   }
});

ajaxtest.blade.php 中的完整代码为：

<html>
<head>
   <title>Ajax CSRF TOKEN Example</title>
   <meta name="csrf-token" content="{{ csrf_token() }}">
   <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   
   <script>
      function getData() {
         console.log("ABCD");
         $.ajaxSetup({
            headers: {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
         });
         $.ajax({
            type:'POST',
            url:'/getdata',
            success:function(data) {
               $("#data").html(data.msg);
            },
            error: function (msg) {
               console.log(msg);
               var errors = msg.responseJSON;
            }
         });
      }
   </script>
</head>
<body>
   <div id = 'data'></div>
   <?php echo Form::open(array('url'=>'/ajaxtest'));?>
      <?php
         echo Form::button('Click Me',['onClick'=>'getData()']);?>
   <?php echo Form::close(); ?>
</body>
</html>

AjaxCSRFController.php

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;

class AjaxCSRFController extends Controller {
   public function index() {
      $data = "Hello World";
      return response()->json(array('msg'=> $data), 200);
   }
}

在 routes/web.php 中为 CSRF 测试创建路由

Route::get('ajaxtest',function() {
   return view('ajaxtest');
});
Route::post('/getdata',[AjaxCSRFController::class, 'index']);

现在在浏览器中点击 url：https://127.0.0.1:8000/ajaxtest，您将获得以下输出：

现在点击“点击我”按钮，查看显示的消息。

更新于：2022-08-30

22K+ 浏览量

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告