# クロスサイトリクエストフォージェリ（CSRF）とは？

## 1. はじめに

「気づいたら勝手に送金されていた…」「アカウントが乗っ取られた！」

こんな怖い話、聞いたことありませんか？
それ、もしかすると **クロスサイトリクエストフォージェリ（CSRF）** が原因かもしれません。

CSRFは、攻撃者がユーザーの認証済みセッションを悪用し、意図しないリクエストを送信させる攻撃のことです。
今回は **Node.js** を使った具体例を交えて、CSRFの仕組みと対策をわかりやすく解説します。

---

## 2. CSRFの仕組み

CSRFの基本的な流れは以下のようになります。

1. **ユーザーが正規サイトにログイン**
   - 例えば、ある銀行のウェブサイトにログインしている。

2. **攻撃者が悪意のあるページを作成**
   - 「特別割引キャンペーン！」と見せかけたサイトを作成。

3. **ユーザーが攻撃者のページにアクセス**
   - そのページには、ユーザーの銀行口座から送金させるコードが埋め込まれている。

4. **ユーザーのセッションを利用して、意図しないリクエストが送信される**
   - ユーザーがそのページを開いた瞬間、ユーザーの意図とは無関係に送金処理が実行される。

例えば、攻撃者のページが以下のようなコードを含んでいた場合、ユーザーは気づかないうちに自分の銀行口座からお金を送金してしまいます。

![img](/mosaic-code.jpg)

このリクエストは **すでにログイン済みのセッションを利用して** 実行されるため、送金が完了してしまうのです。

---

## 3. Node.jsアプリケーションにおけるCSRFの脆弱性

Node.jsでExpressを使用した簡単なWebアプリを考えてみましょう。

以下のように、ユーザーが送金するためのエンドポイントがあったとします。

![img](/mosaic-code.jpg)

このエンドポイントにはCSRFの脆弱性があります。攻撃者がユーザーの知らぬ間に以下のようなHTMLを使って自動送金させることができます。

![img](/mosaic-code.jpg)

このHTMLを攻撃者のWebサイトに埋め込んでおくことで、
**ユーザーがサイトを訪問した瞬間に勝手に送金が実行される** のです。

---

## 4. CSRFの対策

では、どのようにしてCSRF攻撃を防げばよいのでしょうか？

### 4.1 CSRFトークンの導入

最も一般的な対策は **CSRFトークン（CSRF Token）** を使用することです。

このトークンは、フォーム送信時にサーバー側で検証されるため、攻撃者が勝手にリクエストを送ることができなくなります。

#### **実装例（Express + csurf）**

![img](/mosaic-code.jpg)

このようにすると、
1. サーバーがCSRFトークンを生成
2. フォームにCSRFトークンを埋め込む
3. 送信されたトークンを検証

という流れでCSRF攻撃を防ぐことができます。

### 4.2 SameSite属性の設定

最近のブラウザでは、**SameSite属性** を適切に設定することでCSRFを軽減できます。

![img](/mosaic-code.jpg)

これにより、異なるサイトからのリクエストでセッションが送信されなくなり、CSRF攻撃を防げます。

---

## 5. まとめ

- **CSRFは、ユーザーのセッションを悪用して不正なリクエストを送信させる攻撃。**
- **Node.jsでの脆弱な実装では、POSTリクエストを勝手に実行される可能性がある。**
- **CSRFトークンを導入することで、攻撃を防ぐことができる。**
- **SameSite属性を設定することで、追加の保護が可能。**

CSRFは一見すると地味な攻撃ですが、実際に被害を受けると甚大な損害を被る可能性があります。

しっかりとした対策を行い、安全なWebアプリケーションを構築しましょう！


[cv:issue_marketplace]


# クロスサイトリクエストフォージェリ（CSRF）とは？

## 1. はじめに

「気づいたら勝手に送金されていた…」「アカウントが乗っ取られた！」

こんな怖い話、聞いたことありませんか？
それ、もしかすると **クロスサイトリクエストフォージェリ（CSRF）** が原因かもしれません。

CSRFは、攻撃者がユーザーの認証済みセッションを悪用し、意図しないリクエストを送信させる攻撃のことです。
今回は **Node.js** を使った具体例を交えて、CSRFの仕組みと対策をわかりやすく解説します。

---

## 2. CSRFの仕組み

CSRFの基本的な流れは以下のようになります。

1. **ユーザーが正規サイトにログイン**
   - 例えば、ある銀行のウェブサイトにログインしている。

2. **攻撃者が悪意のあるページを作成**
   - 「特別割引キャンペーン！」と見せかけたサイトを作成。

3. **ユーザーが攻撃者のページにアクセス**
   - そのページには、ユーザーの銀行口座から送金させるコードが埋め込まれている。

4. **ユーザーのセッションを利用して、意図しないリクエストが送信される**
   - ユーザーがそのページを開いた瞬間、ユーザーの意図とは無関係に送金処理が実行される。

例えば、攻撃者のページが以下のようなコードを含んでいた場合、ユーザーは気づかないうちに自分の銀行口座からお金を送金してしまいます。

```html
<img src="https://bank.example.com/transfer?amount=10000&to=attacker" />
```

このリクエストは **すでにログイン済みのセッションを利用して** 実行されるため、送金が完了してしまうのです。

---

## 3. Node.jsアプリケーションにおけるCSRFの脆弱性

Node.jsでExpressを使用した簡単なWebアプリを考えてみましょう。

以下のように、ユーザーが送金するためのエンドポイントがあったとします。

```javascript
const express = require("express");
const app = express();
app.use(express.urlencoded({ extended: true }));

app.post("/transfer", (req, res) => {
  const { amount, to } = req.body;
  console.log(`送金：${amount}円を ${to} に送信`);
  res.send("送金完了！");
});

app.listen(3000, () => console.log("サーバー起動中"));
```

このエンドポイントにはCSRFの脆弱性があります。攻撃者がユーザーの知らぬ間に以下のようなHTMLを使って自動送金させることができます。

```html
<form action="http://localhost:3000/transfer" method="POST">
  <input type="hidden" name="amount" value="10000" />
  <input type="hidden" name="to" value="attacker" />
  <input type="submit" value="送金" />
</form>
<script>document.forms[0].submit();</script>
```

このHTMLを攻撃者のWebサイトに埋め込んでおくことで、
**ユーザーがサイトを訪問した瞬間に勝手に送金が実行される** のです。

---

## 4. CSRFの対策

では、どのようにしてCSRF攻撃を防げばよいのでしょうか？

### 4.1 CSRFトークンの導入

最も一般的な対策は **CSRFトークン（CSRF Token）** を使用することです。

このトークンは、フォーム送信時にサーバー側で検証されるため、攻撃者が勝手にリクエストを送ることができなくなります。

#### **実装例（Express + csurf）**

```javascript
const express = require("express");
const csrf = require("csurf");
const cookieParser = require("cookie-parser");

const app = express();
app.use(express.urlencoded({ extended: true }));
app.use(cookieParser());
const csrfProtection = csrf({ cookie: true });

app.get("/form", csrfProtection, (req, res) => {
  res.send(`
    <form action="/transfer" method="POST">
      <input type="hidden" name="_csrf" value="${req.csrfToken()}">
      <input type="text" name="amount" placeholder="金額">
      <input type="text" name="to" placeholder="送金先">
      <button type="submit">送金</button>
    </form>
  `);
});

app.post("/transfer", csrfProtection, (req, res) => {
  res.send("送金完了！");
});

app.listen(3000, () => console.log("サーバー起動中"));
```

このようにすると、
1. サーバーがCSRFトークンを生成
2. フォームにCSRFトークンを埋め込む
3. 送信されたトークンを検証

という流れでCSRF攻撃を防ぐことができます。

### 4.2 SameSite属性の設定

最近のブラウザでは、**SameSite属性** を適切に設定することでCSRFを軽減できます。

```javascript
const session = require("express-session");

app.use(session({
  secret: "your_secret_key",
  resave: false,
  saveUninitialized: true,
  cookie: { sameSite: "Strict" }
}));
```

これにより、異なるサイトからのリクエストでセッションが送信されなくなり、CSRF攻撃を防げます。

---

## 5. まとめ

- **CSRFは、ユーザーのセッションを悪用して不正なリクエストを送信させる攻撃。**
- **Node.jsでの脆弱な実装では、POSTリクエストを勝手に実行される可能性がある。**
- **CSRFトークンを導入することで、攻撃を防ぐことができる。**
- **SameSite属性を設定することで、追加の保護が可能。**

CSRFは一見すると地味な攻撃ですが、実際に被害を受けると甚大な損害を被る可能性があります。

しっかりとした対策を行い、安全なWebアプリケーションを構築しましょう！



---

## エンジニア採用・業務委託を効率化しませんか？

[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F7d110574-a1ad-49ef-b63a-fd400b8ff04a?alt=media&token=626b6196-4f0c-40fa-ac47-27defb4fb8fa)](https://i-ssue.com/lp/marketplace)

エンジニア採用や業務委託の課題を解決するための次世代プラットフォーム **「ISSUE」** をご存知ですか？

- **登録エンジニア数：4,000名以上**  
  厳選されたフリーランスエンジニアが多数登録。スキルや実績に基づき、最適なマッチングを実現します。

- **採用も業務委託も1つのプラットフォームで完結**  
  開発プロジェクトの要件に合ったエンジニアを素早く見つけることが可能です。

- **エンジニア出身の経営陣が開発組織のニーズを深く理解**  
  あなたの会社に最適な提案をお届けします。

---

### **ISSUEで解決できること**
1. **優秀なエンジニアとのマッチング**  
   時間をかけずに即戦力のエンジニアを見つけられます。
2. **業務委託のフレキシブルな運用**  
   プロジェクト単位での契約が可能なので、コスト管理も安心。
3. **採用ブランディング支援**  
   技術者に選ばれる企業になるためのサポートも充実。

---

今すぐ、エンジニア採用・業務委託の課題を解決し、開発プロジェクトを加速させましょう！

➡️ [**詳細はこちらからご覧ください**](https://i-ssue.com/lp/marketplace)  

---

「ISSUE」で、採用と業務委託をもっとシンプルに。  
**成功事例も多数掲載中！**  
まずは詳細をチェックしてみてください。

➡️ [**今すぐチェックする**](https://i-ssue.com/lp/marketplace)


クロスサイトリクエストフォージェリ（CSRF）とは？

1. はじめに

続きを読むには単価診断を受けてください 30秒