原生form提交无法自动携带CSRF token，因不经过JS控制流；跨表单场景下可通过服务端渲染隐藏域、URL参数（仅GET）、sessionStorage三种方式安全传递；fetch提交时需手动设置headers或body中的token字段。
为什么不能直接用 form 的 action 跳转携带 CSRF token
浏览器原生表单提交（<form method="post"></form>）默认不会把当前页面的 meta[name="csrf-token"] 或 JS 变量自动塞进请求头或 body。服务端校验时发现缺失 X-CSRF-TOKEN 或 _token 字段，直接 419 或 403。这不是前端没发，是根本没机会发——原生 submit 不走 JS 控制流。
在跨表单场景下安全注入 token 的三种可行路径
所谓“跨表单”，指用户从 A 页面的 <form id="search"></form> 提交后，跳转到 B 页面的 <form id="detail"></form> 并预填 token。关键不是“怎么生成 token”，而是“怎么让目标表单能拿到且正确使用它”：
- 服务端渲染时，在目标表单 HTML 中直接写入隐藏域：
<input type="hidden" name="_token" value="abc123...">（最稳，但要求后端能接管跳转后的页面生成） - 跳转前用 URL 参数临时透传（仅限 GET 跳转）：
window.location.href = "/target?_token=abc123..."，目标页 JS 读取后注入隐藏域（注意：不能用于 POST 表单的 action URL，会暴露 token） - 跳转后通过
sessionStorage持有（推荐）：sessionStorage.setItem("csrf_token", "abc123...")，目标页 onload 时读取并填充到所有需要的<input name="_token">中
fetch 提交替代原生 submit 时 token 怎么带
如果允许改提交方式（比如把按钮 type="submit" 改成 type="button" + JS 拦截），就能完全控制请求头和 body：
document.getElementById('myForm').addEventListener('submit', async e => {
e.preventDefault();
const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
const formData = new FormData(e.target);
const res = await fetch(e.target.action, {
method: 'POST',
headers: { 'X-CSRF-TOKEN': token }, // Laravel 等框架认这个
body: formData
});
});
注意点：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
FormData会自动包含所有<input name>，但不包括<input type="hidden" name="_token">如果你手动删了它——所以要么保留 hidden 域，要么只靠 header - 某些框架（如 Django）要求 token 在 body 里叫
csrfmiddlewaretoken，header 则无效；务必查清后端约定 - 不要用
JSON.stringify()发送 FormData，会导致后端解析失败
容易被忽略的两个破坏性细节
一是 token 有效期：如果跳转耗时过长（比如用户切 Tab 做其他事），目标页读取的 token 可能已过期，服务端返回 403。建议目标页加载时立即校验 token 有效性（例如用 HEAD /api/csrf-check），过期则重定向回登录或刷新页。
二是多标签页冲突：sessionStorage 是 tab 级隔离的，用户开两个相同页面，token 写入/读取互不影响；但若用 localStorage，A 标签页更新 token 后，B 标签页仍持旧值，提交必失败。别图省事混用。
