138. Security (CSRF)（セキュリティ：CSRF対策：見えない攻撃からユーザーを守る）

原理：信頼の「合言葉」

勝手にボタンを押される恐怖

例えば、ある銀行のサイトにログインしているとします。別の悪意あるサイトをたまたま開いたとき、そのサイトが裏側で勝手に「あなたの銀行口座からお金を送る」というHTMXのリクエスト（hx-post）をブラウザから飛ばすことができてしまいます。これが「CSRF（シーエスアールエフ / サイト間リクエスト偽造）」という攻撃です。

「CSRF対策（CSRF Protection）」とは、「そのリクエストは、本当に私のサイトから送られた正しいものか？」を確かめるために、あらかじめ秘密の「合言葉（トークン）」をリクエストに添えさせることです。

実践：HTMXでの安全な合言葉のやり取り

1. HTMLに合言葉を埋め込む

多くのサーバー側フレームワークは、自動的にログイン中のユーザー専用のトークンを発行してくれます。これを、HTMXが読み取れる場所に書きます。

<!-- index.html のヘッダーなどに -->
<meta name="csrf-token" content="秘密の合言葉12345">

2. HTMXに自動で送信させる

HTMXの設定（JavaScript）で、「これから送る全ての通信に、この合言葉を添えてね！」と一度だけ伝えます。

document.body.addEventListener('htmx:configRequest', function(evt) {
    // metaタグから合言葉を取得
    const token = document.querySelector('meta[name="csrf-token"]').content;
    // リクエストのヘッダーに合言葉をセット
    evt.detail.headers['X-CSRF-Token'] = token;
});

3. ステップ・バイ・ステップ解説

フレームワークの機能をONにする: Django, Laravel, Rails などは標準でこれが必要です。
合言葉を発行する: サーバー側で {% csrf_token %} のような命令を使い、トークンを作ります。
HTMXを護衛する: 上記の短いJavaScriptを共通ファイルに書き足します。これで、あなたのサイトの全てのHTMX通信は「安全な合言葉付き」になります。

比較：セキュリティなし vs セキュリティあり

セキュリティなし

リスク: 知らぬ間にログイン中のユーザーの名前で書き込みをされたり、情報を盗まれたりする。

セキュリティあり (CSRFトークン)

利点: 外部からの「偽物の注文」は、合言葉を知らないためサーバーが即座に拒否します。ユーザーの安全が完全に守られます。

まとめ：初心者のための「信頼のガード」

セキュリティは「後回し」にしてはいけない、Web制作の必須マナーです。

GETは安全、POSTはガード: 情報を「見る（GET）」だけなら比較的安全ですが、情報を「変える（POST, PUT, DELETE）」時は、必ずこのガードをかけましょう。
HTMXなら一箇所で済む: 全てのボタンに合言葉を書く必要はありません。htmx:configRequest イベントを使えば、サイト全体を一行で守ることができます。
ユーザーの安心こそが価値: 派手な機能よりも「安全であること」。これがあなたのサイトの本当の価値になります。

見えない盾で、信頼を守る。CSRF対策という「セキュリティの基本」を確実に実装して、ユーザーが安心してアクセスできる、強く誠実なWebアプリを築き上げてください。次の記事では、外部との通信で重要になる「CORS（139. CORS & HTMX）」をご紹介します。