CSRF トークンの送信（ヘッダ） — fetch(url, { headers: { 'X-CSRF-Token': token } })
Web アプリでは CSRF（Cross-Site Request Forgery）攻撃を防ぐために「CSRF トークン」を使います。
初心者は「サーバーからもらった秘密の合言葉を、リクエストのヘッダに入れて送る」と覚えると理解しやすいです。
基本のコード例
const token = "abcdef123456"; // サーバーから受け取ったCSRFトークン
fetch("/update-profile", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-CSRF-Token": token // ← トークンをヘッダに追加
},
body: JSON.stringify({ name: "Aki" })
})
.then(res => res.json())
.then(data => console.log("更新成功:", data))
.catch(err => console.error("エラー:", err));
X-CSRF-Token→ サーバーがチェックする特別なヘッダ。token→ サーバーから配布された秘密の値。- 効果: 攻撃者が勝手にリクエストを送っても、このトークンがないと拒否される。
よく使うテンプレート集
フォーム送信時にトークンを付ける
const fd = new FormData(document.querySelector("#myForm"));
fetch("/submit", {
method: "POST",
headers: { "X-CSRF-Token": token },
body: fd
});
JSON API にトークンを付ける
fetch("/api/data", {
method: "PUT",
headers: {
"Content-Type": "application/json",
"X-CSRF-Token": token
},
body: JSON.stringify({ value: 123 })
});
非同期処理（async/await）で書く
async function updateUser(user) {
const res = await fetch("/user", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-CSRF-Token": token
},
body: JSON.stringify(user)
});
return res.json();
}
updateUser({ id: 1, name: "Mika" }).then(console.log);
例題: コメント投稿機能
const token = document.querySelector("meta[name='csrf-token']").content;
async function postComment(text) {
const res = await fetch("/comments", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-CSRF-Token": token
},
body: JSON.stringify({ comment: text })
});
const result = await res.json();
console.log("投稿結果:", result);
}
postComment("こんにちは！"); // トークン付きで安全に送信
- 効果: コメント投稿時に CSRF トークンを送ることで、外部サイトからの不正リクエストを防げる。
実務でのコツ
- トークンはサーバーから配布: HTML の
<meta>タグや Cookie に埋め込まれることが多い。 - 必ずヘッダに付ける: サーバー側で「正しいトークンか」をチェックする。
- セッションごとに変わる: トークンはユーザーごとに異なるので、使い回しはできない。
練習問題（商品追加 API）
const token = "xyz987"; // サーバーから渡されたトークン
async function addProduct(product) {
const res = await fetch("/products", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-CSRF-Token": token
},
body: JSON.stringify(product)
});
return res.json();
}
addProduct({ id: "p1", name: "Laptop" }).then(console.log);
直感的な指針
- CSRF トークン = 秘密の合言葉。
X-CSRF-Tokenヘッダに入れて送信。- サーバーがトークンを確認して不正リクエストを防ぐ。
- 初心者は「フォーム送信」「JSON API」で練習すると理解が深まる。
これを覚えれば「安全にデータを送信」できるようになり、セキュリティを守りながら Web アプリを開発できます。