Laravel 9+中AJAX请求的CSRF令牌管理最佳实践咨询

在Laravel 9+环境下，AJAX请求必须携带CSRF令牌以防范跨站请求伪造攻击，不同的令牌管理方式会影响代码的优雅性与组织结构，以下是常见的两种实现方式及更优的实践方案：

常见实现方式对比 #

方式一：Blade语法直接嵌入令牌 #

通过Blade语法将CSRF令牌直接写入JavaScript代码：

$(document).ready(function() {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': "{{ csrf_token() }}"
        }
    });
});

这种方式虽不会让令牌出现在HTML主体中，但要求JavaScript文件必须通过Blade渲染，违背了前后端关注点分离的原则，且多文件使用时会产生重复代码。

方式二：从Meta标签提取令牌 #

先在HTML头部添加包含CSRF令牌的Meta标签：

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

再在JavaScript中提取令牌并配置全局AJAX请求头：

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

两种方式本质上都会暴露CSRF令牌（这是CSRF防护机制的正常要求，令牌本身就是要在前端携带用于验证的），但此方式无需让JavaScript依赖Blade语法，便于JS文件的管理与复用，完全符合关注点分离原则。

你的判断与更优实践 #

你认为方式二更优雅且符合关注点分离原则的结论是完全正确的，这也是Laravel官方推荐的标准做法之一。除此之外，还有以下几种更平衡安全性与代码结构的最佳实践：

• 利用Laravel内置的Axios配置：Laravel默认在resources/js/bootstrap.js中已经配置了Axios的CSRF令牌请求头，直接引入该文件即可自动为所有Axios请求携带令牌：

  // bootstrap.js 内置代码，无需手动修改
  axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').content;
  

  如果你使用Axios作为AJAX库，无需额外编写配置代码，直接使用即可。

• 表单提交自动携带令牌：对于基于表单的AJAX提交，使用Laravel的@csrf Blade指令生成隐藏的_token字段，提交时序列化表单数据即可自动包含令牌，无需单独设置请求头：

  $('#submit-form').on('submit', function(e) {
      e.preventDefault();
      $.ajax({
          url: $(this).attr('action'),
          method: $(this).attr('method'),
          data: $(this).serialize(), // 自动包含_token字段
          success: function(res) {
              // 处理响应逻辑
          }
      });
  });
  

• 针对特定请求单独配置：如果不需要全局为所有AJAX请求添加令牌，可以在单个请求中单独设置，避免不必要的全局配置：

  $.ajax({
      url: '/user/update',
      method: 'POST',
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      data: {
          name: 'New Name'
      }
  });
  

内容的提问来源于stack exchange，提问作者Andre Clements