Laravel Sanctum HTTP-only Cookie 前端安全调用API问题

一、HTTP-only Cookie令牌的API调用方式 #

你完全不需要让JavaScript手动获取HTTP-only Cookie里的令牌——这正是HTTP-only Cookie的安全设计：禁止JS访问，避免XSS攻击窃取令牌。浏览器会自动在符合条件的请求中携带该Cookie，你只需要给Fetch API添加一个配置项即可：

在所有API请求中加入credentials: 'include'（如果前端和API同域，也可以用credentials: 'same-origin'），浏览器就会自动把HTTP-only的api_token Cookie发送给后端，Sanctum会自动验证令牌有效性。

示例Fetch请求代码：

fetch('/api/horseinfo-data', {
  method: 'GET',
  credentials: 'include', // 关键配置，让浏览器自动携带Cookie
  headers: {
    'Accept': 'application/json'
  }
})
.then(res => res.json())
.then(data => {
  // 处理返回数据
})
.catch(err => console.error(err));

二、非GET请求的CSRF令牌处理 #

对于POST/PUT/DELETE这类非GET请求，Laravel Sanctum要求携带CSRF令牌验证。你可以这样处理：

1. 在Blade模板的<head>中添加meta标签：

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

2. 在单独的JS文件中读取该令牌：

const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

3. 在Fetch请求的headers中加入令牌：

fetch('/api/update-horse', {
  method: 'POST',
  credentials: 'include',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'X-XSRF-TOKEN': csrfToken // 加入CSRF令牌头
  },
  body: JSON.stringify({ /* 请求数据 */ })
})

三、Blade模板中添加脚本的安全性 #

只要遵循正确的编码规范，在Blade模板中添加脚本是安全的：

• 输出变量时使用Blade的{{ }}语法，它会自动对内容进行HTML转义，防止XSS攻击；如果需要输出JSON格式的变量，用@json()函数，它会自动处理JS字符串转义：

<script>
window.appConfig = @json([
  'apiBaseUrl' => url('/api'),
  'currentUserId' => auth()->id() ?? null
]);
</script>

• 单独的JS文件可以直接访问window.appConfig这类全局变量，无需在JS文件中硬编码敏感信息。
• 禁止使用{!! !!}输出未经过滤的用户输入内容，这会带来XSS风险。

四、对你当前登录代码的小建议 #

你当前的代码已经正确将令牌存入HTTP-only Cookie，这里补充两个细节：

• createToken('sanctum-token')创建的是个人访问令牌，默认没有过期时间，你可以通过第二个参数设置过期时间：

$token = $user->createToken('sanctum-token', ['*'], now()->addHours(2))->plainTextToken;

• 登录成功后的session()->regenerate()已经正确刷新了会话ID，有效防止会话固定攻击，这一步做得很好。

内容的提问来源于stack exchange，提问作者goodnight sir