位置：文档库 > PHP > 在Laravel中如何通过Ajax请求传递CSRF令牌？

在Laravel中如何通过Ajax请求传递CSRF令牌？

音乐家上传于 2025-03-24 08:50

YPE html>

《在Laravel中如何通过Ajax请求传递CSRF令牌》

在Web开发中，跨站请求伪造（CSRF）是一种常见的安全威胁。攻击者通过伪造用户请求，在用户不知情的情况下执行非预期的操作。Laravel框架内置了CSRF保护机制，通过为每个用户会话生成唯一的令牌（CSRF Token），并在表单提交时验证该令牌，从而有效防止CSRF攻击。然而，当使用Ajax发起异步请求时，如何正确传递CSRF令牌成为开发者需要解决的问题。本文将详细介绍在Laravel中通过Ajax请求传递CSRF令牌的多种方法，帮助开发者构建安全的Web应用。

一、CSRF保护机制概述

Laravel的CSRF保护基于同步令牌模式（Synchronizer Token Pattern）。其核心原理如下：

服务器为每个活跃用户会话生成唯一的CSRF令牌
将令牌存储在用户会话中
在表单中嵌入令牌作为隐藏字段
服务器验证请求中的令牌是否与会话中的令牌匹配

在传统表单提交中，Laravel通过@csrfBlade指令自动生成隐藏字段：


    @csrf

这会渲染为：

二、Ajax请求中传递CSRF令牌的必要性

当使用Ajax发起POST、PUT、DELETE等会修改数据的请求时，必须包含CSRF令牌，否则会收到419（Page Expired）错误响应。这是因为Laravel默认会验证所有非GET请求的CSRF令牌。

错误示例（缺少CSRF令牌）：

$.ajax({
    url: '/update-profile',
    method: 'POST',
    data: { name: 'John' },
    success: function(response) {
        console.log(response);
    }
});

上述代码会收到类似以下的响应：

{
    "message": "CSRF token mismatch.",
    "exception": "Symfony\\Component\\HttpKernel\\Exception\\HttpException"
}

三、传递CSRF令牌的五种方法

方法1：通过请求头传递（推荐）

Laravel会自动检查名为X-CSRF-TOKEN的请求头。这是最简洁的方法，尤其适合现代前端框架。

步骤1：在HTML中添加meta标签存储令牌

步骤2：配置Ajax请求自动添加令牌头（jQuery示例）

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

之后所有Ajax请求都会自动包含CSRF令牌：

$.ajax({
    url: '/update-profile',
    method: 'POST',
    data: { name: 'John' },
    success: function(response) {
        console.log(response);
    }
});

方法2：作为请求数据的一部分

可以将CSRF令牌作为表单数据的一部分发送：

$.ajax({
    url: '/update-profile',
    method: 'POST',
    data: {
        _token: '{{ csrf_token() }}',
        name: 'John'
    },
    success: function(response) {
        console.log(response);
    }
});

或者使用JavaScript变量存储令牌：

const csrfToken = '{{ csrf_token() }}';

$.ajax({
    url: '/update-profile',
    method: 'POST',
    data: {
        _token: csrfToken,
        name: 'John'
    },
    // ...
});

方法3：使用Laravel的axios配置（Vue.js等前端框架）

Laravel默认使用axios作为HTTP客户端，并已配置好CSRF保护：

// resources/js/bootstrap.js
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').content;

在Vue组件中使用：

axios.post('/update-profile', {
    name: 'John'
}).then(response => {
    console.log(response.data);
});

方法4：通过Cookie传递

Laravel默认会将CSRF令牌存储在名为XSRF-TOKEN的Cookie中。前端框架如axios会自动读取此Cookie并添加到X-XSRF-TOKEN请求头中。

手动使用示例：

// 从Cookie中获取令牌（需要自定义函数）
function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}

const xsrfToken = getCookie('XSRF-TOKEN');

$.ajax({
    url: '/update-profile',
    method: 'POST',
    headers: {
        'X-XSRF-TOKEN': xsrfToken
    },
    data: { name: 'John' },
    success: function(response) {
        console.log(response);
    }
});

方法5：API路由的特殊处理

对于纯API路由（无会话状态），可以：

将路由放在api.php路由文件中
在中间件中排除CSRF保护

修改app/Http/Kernel.php：

protected $middlewareGroups = [
    'web' => [
        // ...其他中间件
        \App\Http\Middleware\VerifyCsrfToken::class,
    ],

    'api' => [
        'throttle:api',
        \App\Http\Middleware\Authenticate::class,
        // 移除VerifyCsrfToken
    ],
];

或者更精细地控制：

// app/Http/Middleware/VerifyCsrfToken.php
class VerifyCsrfToken extends Middleware
{
    protected $except = [
        'api/*',
        'payment/process'
    ];
}

四、最佳实践与常见问题

最佳实践

优先使用请求头方式传递CSRF令牌
对于SPA应用，确保初始化时设置好axios/jQuery的默认头
定期更新CSRF令牌（Laravel默认在每次会话时更新）
对于敏感操作，考虑使用双重验证（CSRF+额外验证）

常见问题与解决方案

问题1：收到419错误但确认已传递令牌

可能原因：

令牌过期（会话过期）
使用了错误的令牌（如多个标签页使用不同令牌）
请求头名称拼写错误

解决方案：

// 检查当前会话中的令牌
Route::get('/csrf-token', function() {
    return response()->json([
        'session_token' => session()->token(),
        'csrf_token' => csrf_token()
    ]);
});

问题2：在测试环境中如何处理CSRF

在测试时，可以禁用CSRF中间件或手动设置令牌：

// PHPUnit测试示例
public function test_example()
{
    $response = $this->withHeaders([
        'X-CSRF-TOKEN' => csrf_token(),
    ])->post('/api/endpoint', ['name' => 'Test']);
    
    $response->assertStatus(200);
}

或者使用@csrf的测试辅助函数：

$response = $this->postJson('/api/endpoint', [
    '_token' => csrf_token(),
    'name' => 'Test'
]);

五、高级用法：自定义CSRF令牌生成

在极少数情况下，可能需要自定义CSRF令牌的生成方式。可以通过覆盖Illuminate\Foundation\Http\Middleware\VerifyCsrfToken类实现：

namespace App\Http\Middleware;

use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as BaseVerifier;

class VerifyCsrfToken extends BaseVerifier
{
    protected function addCookieToResponse($request, $response)
    {
        // 自定义Cookie设置
        $config = config('session');
        
        $response->headers->setCookie(
            new \Symfony\Component\HttpFoundation\Cookie(
                'XSRF-TOKEN-CUSTOM',
                $request->session()->token(),
                $this->availableAt(60 * $config['lifetime']),
                $config['path'],
                $config['domain'],
                $config['secure'] ?? false,
                true, // httpOnly
                false, // raw
                $config['same_site'] ?? null
            )
        );
        
        return $response;
    }
}

六、安全性考虑

令牌长度：Laravel默认使用32字符的令牌，足够安全
令牌存储：确保会话存储安全（如使用加密的cookie或数据库存储）
SameSite Cookie属性：Laravel 5.6+默认设置SameSite=Lax，可修改为Strict增强安全性
HTTPS：生产环境必须使用HTTPS，防止令牌在传输中被截获

修改SameSite属性的方法（在app/Http/Middleware/VerifyCsrfToken.php中）：

protected function addCookieToResponse($request, $response)
{
    $response->headers->setCookie(
        new \Symfony\Component\HttpFoundation\Cookie(
            'XSRF-TOKEN',
            $request->session()->token(),
            $this->availableAt(60 * config('session.lifetime')),
            config('session.path'),
            config('session.domain'),
            config('session.secure'),
            true, // httpOnly
            false, // raw
            'Strict' // SameSite属性
        )
    );
    
    return $response;
}

七、完整示例：综合应用

以下是一个完整的Laravel+jQuery示例，展示最佳实践：

1. 布局文件（添加meta标签）：

// resources/views/layouts/app.blade.php
    
    
    CSRF示例
    


    @yield('content')

2. 路由定义：

// routes/web.php
Route::get('/profile', function() {
    return view('profile');
});

Route::post('/update-profile', function() {
    // 验证并处理数据
    request()->validate([
        'name' => 'required|string|max:255',
        'email' => 'required|email'
    ]);
    
    // 更新逻辑...
    
    return response()->json([
        'status' => 'success',
        'message' => 'Profile updated successfully'
    ]);
});

3. 视图文件：

// resources/views/profile.blade.php
@extends('layouts.app')

@section('content')
    
        更新个人资料
        
        
            姓名
            
        
        
        
            邮箱
            
        
        
        
    
@endsection

八、总结

在Laravel中通过Ajax请求传递CSRF令牌是确保应用安全的关键步骤。本文介绍了五种主要方法：

通过X-CSRF-TOKEN请求头（最推荐）
作为请求数据的一部分
使用Laravel的axios配置（适合前端框架）
通过X-XSRF-TOKEN Cookie（自动处理）
API路由的特殊处理（谨慎使用）

最佳实践是使用meta标签存储令牌，并通过AjaxSetup或axios配置自动添加到请求头中。这种方法简洁、安全，且适用于大多数Web应用场景。对于纯API应用，可以考虑使用API令牌或其他认证机制替代CSRF保护。

开发者应始终牢记：CSRF保护是Web应用安全的重要组成部分，不应因为使用Ajax而忽略。通过正确实现CSRF令牌传递，可以显著提高应用的安全性，防止潜在的数据篡改攻击。

关键词：Laravel、Ajax、CSRF令牌、Web安全、跨站请求伪造、X-CSRF-TOKEN、请求头、会话保护、前端框架集成、最佳实践

简介：本文详细介绍了在Laravel框架中通过Ajax请求传递CSRF令牌的五种方法，包括请求头传递、数据字段传递、axios配置、Cookie传递和API路由特殊处理。文章涵盖了从基础原理到高级用法的全面内容，提供了完整的代码示例和最佳实践建议，帮助开发者构建安全的Web应用。

立即下载

PHP相关