常連

### 実現したいこと
会員登録画面からメールアドレスに認証コードを送りたい。

### 発生している問題・分からないこと
以前お問い合わせページを作成した際に CSRF対策として入力画面からワンタイムトークンを作成して、確認画面でそのトークンが一致するかどうかをチェックするという仕組みを作成したのですが、会員登録画面（入力画面）からメールアドレスに送るタイミングでワンタイムトークンを作成してチェックするということは可能でしょうか？



### 該当のソースコード

```HTML
<div class="login-email">
        <form method="post" class="register_form">
            <div class="form_item">

                
                
                
                <input type="hidden" id="input-email" name="csrf_token" maxlength="15" oninput="value=value.replace(/[^\d]/g, '')" placeholder="メールアドレスを入力してください" value="<?= $csrf_token; ?>">

                <div id="error-msg-email" class="error-msg" style="display: none;"></div>

                <div class="login-email_vertical-line"></div>
                <div class="login-email-send clickable disabled">
                    <font style="vertical-align: inherit;">
                        <font style="vertical-align: inherit;">認証コードを取得する</font>
                    </font>
                </div>
            </div>

            <div class="form_separator-line"></div>
            <div class="form_item">
                <div>
                    <font style="vertical-align: inherit;">
                        <font style="vertical-align: inherit;">ハンドルネーム</font>
                    </font>
                </div><input placeholder="ハンドルネームを入力してください" maxlength="6" oninput="value=value.replace(/[^\d]/g, '')">
            </div>

            <div class="form_separator-line"></div>
            <div class="form_item">
                <div>
                    <font style="vertical-align: inherit;">
                        <font style="vertical-align: inherit;">検証コード</font>
                    </font>
                </div><input placeholder="確認コードを入力してください" maxlength="6" oninput="value=value.replace(/[^\d]/g, '')">
            </div>
            <input type="hidden" name="csrf_token" value="<?php echo $csrf_token; ?>" />
            
            
        </form>
    </div>
```

```PHP
<?php
$_SESSION = array(); //セッション変数の初期化
session_start(); //セッションの開始

// 変数の宣言
// $error_message = '';
$mail = '';

// エラーが発生している時の処理
/* if (!empty($_SESSION['error_message'])) {
    $error_message = $_SESSION['error_message'];
    unset($_SESSION['error_message']);
} */

// ワンタイムトークン生成
$toke_byte = openssl_random_pseudo_bytes(16);
$csrf_token = bin2hex($toke_byte);

// トークンをセッションに保存
// トークンを保存、次の画面（PHP）に持ち越し
$_SESSION['csrf_token'] = $csrf_token;

// ワンタイムトークンの一致を確認
// name属性「csrf_token」の中身が無い、または name属性「csrf_token」とセッション「csrf_token」が一致しない場合
if (!isset($_POST['csrf_token']) || $_POST['csrf_token'] !== $_SESSION['csrf_token']) {
    // トークンが一致しなかった場合
    die('送信に失敗しました');
}

// それぞれの変数に値を代入
// PHPの値が空であれば
if (!empty($_SESSION['mail'])) {
    $mail = $_SESSION['mail'];
    // セッション変数を削除
    unset($_SESSION['mail']);
}

// ハンドルネームをメールで送信
if (!empty($_SESSION['name'])) {
    $name = $_SESSION['name'];
    // セッション変数を削除
    unset($_SESSION['name']);
}

// 確認コードをメールで送信（6桁）
if (!empty($_SESSION['code'])) {
    $_SESSION['code'] = rand(100000, 999999);
    // セッション変数を削除
    unset($_SESSION['code']);
}
?>
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [x] 知人に聞いた
- [x] その他

##### 上記の詳細・結果
今後サーバーサイドでセキュリティ対策となるコードを書いていく際に確認画面を設けない場合にメールアドレスに直接送信する方法では攻撃を防ぎきれないのではないかと心配しております。

### 補足
※ 参考サイト
https://html-coding.co.jp/knowhow/security/csrf/

https://note.com/kohki/n/na9b4bddfa717

会員登録画面から直接メールアドレスに認証コードを送る場合セキュリティ対策として確認画面を設けるべきでしょうか？

PHPでメールフォームを作成したので、脆弱性がないかアドバイスいただけないでしょうか。
エンジニアでもなければ、PHPもろくに書けない雑魚ですが、「[php メールフォーム 作り方](https://www.google.co.jp/search?q=php+%E3%83%A1%E3%83%BC%E3%83%AB%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0+%E4%BD%9C%E3%82%8A%E6%96%B9&ie=utf-8&oe=utf-8&client=firefox-b-ab&gfe_rd=cr&ei=6NrkWKWOBuzZ8AfguCs)」でググって表示されるサイトを見ると、「んんんんん？？？」と思うところがあります。
これらを参考にしたり、コピペする方は、記述されているコードの良し悪しは判断できないかと思います。
そのような方々が参考にできるメールフォームを作りたいという思いで、調べて作りました。
周りに書いたコードを確認してもらえる人もいないので、皆様からのアドバイスがほしいです((_ _ (´ω｀ )ﾍﾟｺ

このメールフォームは、下記を対象者としています。

- php メールフォーム 作り方 でググってコピペする方
- コピペして動けばいいと考えている方
- if文や関数など基本的な記述はわかるけど、クラスとか理解していない方
- 脆弱性？なにそれ？という方

そのために、このメールフォームは下記の点を意識して作成しました。

- **コピペしたら動く**
- **なるべく難しい記述はしない、記述量を減らす**
- 処理を中断する die を使っていないので、表示したい箇所にコピペすれば動く
- PHP5.2.xまで想定し、環境（magic_quotes_gpc、セーフモード）に依存しない
- 肝心の脆弱性対策はクリックジャッキング、CSRF、XSS、メールヘッダインジェクションを考慮

最終的にはコード＋説明した記事を作成してQittaに投稿する予定です。
問題があれば、詳しい方々からアドバイスやご指摘があるはずなので...

**皆様から見て、脆弱性や気になる点などあれば、アドバイスもらえると嬉しいです((_ _ (´ω｀ )ﾍﾟｺ**
至らないところがあれば、調べますので、ご指摘だけでも頂けると嬉しいです。
お願いします。

入力（`index.php`） → 確認（`confirm.php`） → 送信（`send.php`） と画面を遷移してメールを送ります。

```php
<?php
// 他のサイトでインラインフレーム表示を禁止する（クリックジャッキング対策）
header('X-FRAME-OPTIONS: SAMEORIGIN');

// セッション開始
session_start();

// HTML特殊文字をエスケープする関数
function h($str) {
	return htmlspecialchars($str,ENT_QUOTES,'UTF-8');
}

/* --------------------------------------------------
	トークンの作成（CSRF対策）

	※使用しているPHPのバージョン・環境にあわせて
	 トークンを選んでね。不要なトークは削除してね。
-------------------------------------------------- */

// PHP 7.0 以降
if(!isset($_SESSION['token'])) {
	$_SESSION['token'] = bin2hex(random_bytes(32));
}

// PHP 5.3 ～ 5.x ※OPENSSL導入済
if(!isset($_SESSION['token'])) {
	$_SESSION['token'] = bin2hex(openssl_random_pseudo_bytes(32));
}

// PHP 5.3 未満
if(!isset($_SESSION['token'])) {
	$_SESSION['token'] = hash('sha256', session_id());
}

// トークンを代入
$token = $_SESSION['token'];

?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>入力画面</title>
</head>
<body>

<h1>お問い合わせ（入力画面）</h1>

<form method="post" action="confirm.php">
<table>
	<tr>
		<th>お名前（必須）</th>
		<td><input type="text" name="name"></td>
	</tr>
	<tr>
		<th>ふりがな（必須）</th>
		<td><input type="text" name="ruby"></td>
	</tr>
	<tr>
		<th>メールアドレス（必須）</th>
		<td><input type="text" name="mail"></td>
	</tr>
	<tr>
		<th>内容（必須）</th>
		<td><textarea name="content"></textarea></td>
	</tr>
</table>
<input type="hidden" name="token" value="<?php echo h($token); ?>">
<button>送信内容確認</button>
</form>
</body>
</html>
```

```php
<?php
// 他のサイトでインラインフレーム表示を禁止する（クリックジャッキング対策）
header('X-FRAME-OPTIONS: SAMEORIGIN');

// セッション開始
session_start();

// HTML特殊文字をエスケープする関数
function h($str) {
    return htmlspecialchars($str,ENT_QUOTES,'UTF-8');
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>確認画面</title>
</head>
<body>

<h1>お問い合わせ（確認画面）</h1>

<?php

// セッション変数がなければ、空文字を代入
if(!isset($_SESSION['token'])) {
    $_SESSION['token'] = '';
}

// POSTされたデータを変数に代入（magic_quotes_gpc = On ＋ NULLバイト 対策）
foreach (array('token','name','ruby','mail','content') as $v) {
    $$v = filter_input(INPUT_POST, $v, FILTER_DEFAULT, FILTER_FLAG_STRIP_LOW);
}

// トークンを確認し、確認画面を表示
if($token !== $_SESSION['token']) {

    echo '<p>お問い合わせの手順に誤りがあります。<br>お手数ですが、最初からやり直してください。</p>';

} else {

    $error_flag = 0;

    // 必須項目は未入力をチェック
    if ($name === '') {
        echo '<p>お名前をご入力してください。</p>';
        $error_flag = 1;
    } elseif (mb_strlen($name) > 50) {
        echo '<p>お名前は 50 文字以内で入力してください。</p>';
        $error_flag = 1;
    }

    if ($ruby === '') {
        echo '<p>ふりがなをご入力してください。</p>';
        $error_flag = 1;
    } elseif (mb_strlen($ruby) > 50) {
        echo '<p>ふりがなは 50 文字以内で入力してください。</p>';
        $error_flag = 1;
    }

    if ($mail === '') {
        echo '<p>メールアドレスをご入力してください。</p>';
        $error_flag = 1;
    } elseif (mb_strlen($mail) > 100) {
        echo '<p>メールアドレスは 100 文字以内で入力してください。</p>';
        $error_flag = 1;
    } elseif (!filter_var($mail, FILTER_VALIDATE_EMAIL)) {
        echo '<p>メールアドレスの形式が正しくありません。</p>';
        $error_flag = 1;
    }

    if ($content === '') {
        echo '<p>内容をご入力してください。</p>';
        $error_flag = 1;
    } elseif (mb_strlen($content) > 500) {
        echo '<p>内容は 500 文字以内で入力してください。</p>';
        $error_flag = 1;
    }

    // エラーがある場合は、戻るボタンを表示し、エラーがない場合は、確認画面を表示
    if ($error_flag === 1) {
        echo '<button onClick="history.back(); return false;">戻る</button>';
    } else {
        // セッション変数に代入
        $_SESSION['name'] = $name;
        $_SESSION['ruby'] = $ruby;
        $_SESSION['mail'] = $mail;
        $_SESSION['content'] = $content;

        // 確認用画面の表示
    ?>

        <form method="post" action="send.php">
            <table>
                <tr>
                    <th>お名前</th>
                    <td><?php echo h($name); ?></td>
                </tr>
                <tr>
                    <th>ふりがな</th>
                    <td><?php echo h($ruby); ?></td>
                </tr>
                <tr>
                    <th>メールアドレス</th>
                    <td><?php echo h($mail); ?></td>
                </tr>
                <tr>
                    <th>内容</th>
                    <td><?php echo nl2br(h($content)); ?></td>
                </tr>
            </table>
            <input type="hidden" name="token" value="<?php echo h($token); ?>">
            <button>送信</button>
        </form>

<?php
    }
}
?>
</body>
</html>
```

```php
<?php
// 他のサイトでインラインフレーム表示を禁止する（クリックジャッキング対策）
header('X-FRAME-OPTIONS: SAMEORIGIN');

// セッション開始
session_start();

// mb_send_mail のエンコーディング
mb_language('ja');

// 内部文字エンコーディングを設定
mb_internal_encoding('UTF-8');
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>送信画面</title>
</head>
<body>

<h1>お問い合わせ（送信画面）</h1>

<?php

// セッション変数がなければ、空文字を代入
if(!isset($_SESSION['token'])) {
    $_SESSION['token'] = '';
}

// POST['token']の値をtoken変数に代入
$token = filter_input(INPUT_POST, 'token', FILTER_DEFAULT, FILTER_FLAG_STRIP_LOW);

// 各セッション変数を各変数に代入
$name = isset($_SESSION['name']) && is_string($_SESSION['name']) ? $_SESSION['name'] : '';
$ruby = isset($_SESSION['ruby']) && is_string($_SESSION['ruby']) ? $_SESSION['ruby'] : '';
$mail = isset($_SESSION['mail']) && is_string($_SESSION['mail']) ? $_SESSION['mail'] : '';
$content = isset($_SESSION['content']) && is_string($_SESSION['content']) ? $_SESSION['content'] : '';

// トークンの値が一致しない場合は、エラー文を表示し、一致する場合は送信する
if($token !== $_SESSION['token']) {

    echo '<p>送信後に再度アクセスされたか、お問い合わせの手順に誤りがあります。<br>お手数ですが、最初の画面からご入力ください。<p>';

} else {

    /*  運営側へ送信するメールの設定  */

    // 送信先のメールアドレス
    $to      = 'xxxxxx@xxxxx.xxxx';
    // 件名
    $subject = '【お問い合わせからの送信】○○○○○○○○○○';
    // 本文
    $message = "◆お名前\n$name\n\n◆フリガナ\n$ruby\n\n◆メールアドレス\n$mail\n\n◆内容\n$content";
    // オプション
    $option = '-f'. $to;


    /*  問い合わせされた方へ自動返信するメールの設定  */

    // 件名
    $auto_subject = '【お問い合わせ】○○○○○○○○○○';
    // 送信元のメールアドレス
    $auto_from    = 'From:' . $to;
    // 本文
    $auto_message = "
※このメールは自動返信によるものです。

$name 様

このたびは、お問合せいただき、誠にありがとうございました。

お送りいただきました内容を確認の上、担当者より折り返しご連絡させていただきます。
    ";

    /* セーフモードがONの場合は、mb_send_mailの第5引数が使えないため、処理を分岐して送信 */
    if(ini_get('safe_mode')) {

        /*  運営側と自動返信のメールの送信が完了したら、送信完了の文章を表示する  */
        if(mb_send_mail($to, $subject, $message, "From:$mail") && mb_send_mail($mail, $auto_subject, $auto_message, $auto_from)) {
            echo '<p>このたびは、お問合せいただき、誠にありがとうございました。<br>お送りいただきました内容を確認の上、担当者より折り返しご連絡させていただきます。</p>';
        } else {
            echo '<p>大変申し訳ございませんが、メールの送信に失敗しました。<br>お手数ですが最初からやり直してください。</p>';
        }

    } else {

        /*  運営側と自動返信のメールの送信が完了したら、送信完了の文章を表示する  */
        if(mb_send_mail($to, $subject, $message, "From:$mail", $option) && mb_send_mail($mail, $auto_subject, $auto_message, $auto_from, $option)) {
            echo '<p>このたびは、お問合せいただき、誠にありがとうございました。<br>お送りいただきました内容を確認の上、担当者より折り返しご連絡させていただきます。</p>';
        } else {
            echo '<p>大変申し訳ございませんが、メールの送信に失敗しました。<br>お手数ですが最初からやり直してください。</p>';
        }

    }

}

// セッションの破棄
$_SESSION = array();
session_destroy();

?>
</body>
</html>
```

## **2017.04.11 追記**

徳丸氏による、脆弱性の解説です。

- [teratailに投稿されたメールフォームにCSRF脆弱性が残存した理由 | 徳丸浩の日記](http://blog.tokumaru.org/2017/04/teratailcsrf.html)

ありがとうございます((_ _ (´ω｀ )ﾍﾟｺ

【PHP】作成したメールフォームに脆弱性がないか、アドバイスもらえないでしょうか。

### 前提
CSRF攻撃対策について調べています。

前提として以下を仮定します
* a.com は攻撃者の管理下にあるWebサイト
* b.com は攻撃対象の掲示板Webサイト

攻撃シナリオ
1. 攻撃者が a.com に以下スクリプトを追加する
```js
const formData = new FormData();
formData.append("message", "hello");

await fetch('https://b.com/post', {
  metho: 'post',
  data: formData
})
```

2 ユーザーがa.comにアクセスする
3. (1)のスクリプトが実行される
4. b.comに`hello`が書き込まれる

### 質問
![](https://ddjkaamml8q8x.cloudfront.net/questions/2024-02-12/d132661d-d092-4c56-93c3-011f3cbfea53.jpeg)
画像引用元: https://tech.basicinc.jp/articles/231

上記画像について、「攻撃者はトークンを知ることができない」と書いています。
しかし、攻撃シナリオの1を以下の様に変更した場合、トークンを知ることが可能になり、攻撃が成立するのではないでしょうか？

### 該当のソースコード

```js
// トークンを取得する
const response = await fetch('https://b.com/')
const html = await response.text()
// 正規表現やDOMセレクタを利用してトークンを取得する
const csrfToken = html.getCSRFToken()

const formData = new FormData();
formData.append("message", "hello");
// CSRFトークンを追加する
formData.append("csrfToken ", csrfToken);

await fetch('https://b.com/post', {
  metho: 'post',
  data: formData
})
```

### 試したこと
a.com を localhost:80、b.com を localhost:81 としてローカル環境で試してみました。
しかし、Google ChromeではCORSの問題が発生して実際に攻撃は成功しませんでした。
（こちらはまた別問題な気がするので、質問が複雑にならないように今は問題を保留します。）

本来であれば「単純リクエスト」に該当するので、GETでCSRFトークンが取得できてしまうと思います。
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS#%E5%8D%98%E7%B4%94%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88


### 補足情報（FW/ツールのバージョンなど）
- Google Chrome 121.0.6167.161


CSRF攻撃対策について

自前でPHPでやったCSRF対策
> 入力フォーム画面表示時に、
ランダムなトークンを発行してHTMLのhiddenに埋め込む。
同時に発行したトークンをセッションに保持する。

> 保存ボタンを押したときのアクションで
セッションのトークンとPOSTされたトークンを比較して、
一致していたらOK。不一致だったらエラーとする

上記の対策を入れたら
Chromeの場合だけエラーになってしまいます。
IEだとエラーにならない。

この事象が以前手元の自分の環境で再現したことがありましたが、再現しなくなったので
問題なさそうんだと判断し、リリースしたのですが、
一部のユーザー（全員でない）で事象が発生するようになってしまいました。
自分の環境では再現しないため、原因を追えません。

どういったことが考えられるでしょうか

CSRF対策をやったらChromeでだけエラーになる

### 前提・実現したいこと

Next.jsでStaticGenerationのホームページを作成しています。

ホームページにはContactフォームを設置していて、APIにPOSTすると入力内容をメール送信されるようになっています。機能自体は完成しているのですが、セキュリティ観点でCSRF対策を入れたいと考えています。

方法としては、フォームのページにセッション情報を埋め込んで、POSTリクエスト時にクライアント側のJSからセッション情報を送信して、サーバ側で検証すれば良いのだと思いますが、フォームページにセッション情報を埋め込む方法がわかりません。

Next.jsの公式も読んだのですが、該当箇所がよくわかりませんでした。

全体的な理解が足りていないのかもしれませんが、このあたりの実装方法のヒントや参考文献についてお知恵を拝借できますと助かります。よろしくお願いします。

contact.js
```javascript
import Layout from "../components/layout"
import Tags from "./tags"
import SearchWindow from "./search_window"
import { getUniqTags } from "../lib/posts"
import axios from 'axios'

export async function getStaticProps() {

  const uniqTags = getUniqTags()

  return {
    props:{
      uniqTags
    }
  }
  
}

const submitFormData = (e) => {
  e.preventDefault()

  axios.post('/api/mailSender',
    { 
      'company': company,
      'nickname': nickname,
      'email': email,
      'question': question
    }
  ).then(() => {
    var myModal = new bootstrap.Modal(document.getElementById('myModal'))
    myModal.toggle()
  }).catch((error) => {
    console.log(error)
  })
}

export default function Contact({ uniqTags }) {
  return(
    <Layout>
      <div className="container content">
        <div className="row">
          <div className="col-md-9 mb-5">
            <form onSubmit={submitFormData}>
              <label htmlFor="company" className="form-label fw-bold">会社名　<span className="badge bg-secondary">任意</span></label>
              <input maxLength="30" type="text" className="form-control mb-3" id="company" placeholder="会社名を記入してください"/>
              <label htmlFor="nickname" className="form-label fw-bold">お名前（ニックネーム可）　<span className="badge bg-danger">必須</span></label>
              <input required maxLength="30" type="text" className="form-control mb-3" id="nickname" placeholder="お名前を記入してください"/>
              <label htmlFor="email" className="form-label fw-bold">Eメールアドレス　<span className="badge bg-danger">必須</span></label>
              <input required maxLength="50" type="email" className="form-control mb-3" id="email" placeholder="メールアドレスを記入してください"/>
              <label htmlFor="question" className="form-label fw-bold">お問い合わせ内容　<span className="badge bg-danger">必須</span></label>
              <textarea required maxLength="1000" className="form-control mb-5" id="question" rows="7" placeholder="お問い合わせ、ご相談内容を記入してください"/>
              <div className="d-flex justify-content-center">
                <input id="submitBtn" className="btn btn-success w-50" type="submit" value="この内容で送信する"/>
              </div>
              <div className="modal fade" id="myModal" data-bs-backdrop="static" data-bs-keyboard="false" tabIndex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div className="modal-dialog">
                  <div className="modal-content">
                    <div className="modal-header">
                      <h5 className="modal-title" id="staticBackdropLabel">送信完了</h5>
                      <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div className="modal-body">
                      お問い合わせいただきありがとうございます。
                    </div>
                    <div className="modal-footer">
                      <button type="button" className="btn btn-secondary" data-bs-dismiss="modal" onClick={closeModal}>Close</button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div className="col-md-3">
            <Tags uniqTags={uniqTags}/>
            <SearchWindow />
          </div>
        </div>
      </div>
    </Layout>
  )
}
```
/api/mailSender.js
```javascript
import sgMail from '@sendgrid/mail'
import Cors from 'cors'
import initMiddleware from '../../lib/init-middleware'

const mailto = process.env.NEXT_PUBLIC_MAILTO
const mailkey = process.env.NEXT_PUBLIC_MAILKEY

const cors = initMiddleware(
   Cors({
    methods: ['POST'],
  })
)

export default async function handler(req, res) {
  
  await cors(req, res)

  if (req.method === 'POST') {
    
    const company = req.body.company
    const nickname = req.body.nickname
    const email = req.body.email
    const question = req.body.question

    sgMail.setApiKey(mailkey)
    const msg = {
      to: mailto,
      from: email,
      subject: "フォームからのお問い合わせ",
      html: `<p>お名前：${nickname}</p>
             <p>会社名：${company}</p>
             <p>お問い合わせ内容：${question}</p>`,
    }

    try {
      await sgMail.send(msg)
      console.log('Success to send mail')
      res.status(200).send()
    } catch(error) {
      console.log(error)
      res.status(500).send()
    }
    
  } else {
    res.status(400).send()
  }

};
```

Next.jsでのCSRF対策方法を教えてください

DjangoのtemplateにvuetifyをCDNで使っています。
POSTでAPIにデータを送ると
` Failed: CSRF token missing or incorrect.`
のエラーが帰ってきてmysqlにデータを登録することができません。

CSRFのトークンを同時に送信する必要があることはわかったのですが、どのように取得して送信するのかがわからず困っています。
ご教授いただけないでしょうか。

ちなみにGETは問題なく動作します。
以下、関係なさそうな部分は省いたコードです。

```index
ボタン部分
<button class="btn btn-info" v-on:click="postArticle()">取得</button>

送信データ
newArticle: { 'article': "aaa", 'title': "bbb" },

API部分
postArticle: function() {
　　this.loading = true;
　　this.$http.post('/api/articles/',this.newArticle)
 　.then((response) => {
　　　　this.loading = false;
　　　　this.getArticles();
　　})
   .catch((err) => {
　　　　this.loading = false;
　　　　console.log(err);
    })
},
```

```
url.py

urlpatterns = [

    path('api/', include(router.urls)),

]
```

```
router.py

router = routers.DefaultRouter()
router.register('articles', ArticlesViewSet)
```

```
viewsets.py
class ArticlesViewSet(viewsets.ModelViewSet):
    queryset = Article.objects.all()
    serializer_class = ArticleSerializer
    filter_backends = (filters.SearchFilter,)
    search_fields = ('title', 'article')
```


```
serializer.py
class ArticleSerializer(serializers.ModelSerializer):
    class Meta:
        model = Article
        fields = '__all__'
```

よろしくお願い致します。


追記です。

HTML内に{% csrf_token %}を埋め込みました。
そしてaxiosをincludeしてAPIのPOST部分を
```
 axios.defaults.headers.common = {
　　'X-Requested-With': 'XMLHttpRequest',
   　'X-CSRF-TOKEN' : document.querySelector('input[name="csrfmiddlewaretoken"]').getAttribute('value')
  };
```
として、axiosのヘッダーにCSRFのトークンを入れてPOSTを投げました。
consoleでaxiosの中身を見てみると
```
common:
X-Requested-With: "XMLHttpRequest"
X-CSRF-TOKEN: "qmn8Mh1t1kes7USGG03jVUgIlUwxXkcMuJgdL7HM07ZSxm5P028EWwyM
```
という形で確かにAPIに投げるデータのヘッダーにCSRFのトークンは入っています。
しかし、同じエラーでした。
djangoのsettingの
`'django.middleware.csrf.CsrfViewMiddleware',`
を消してもエラー内容は変わりませんでした。
そのため、django以外のところで弾かれているのかもしれません。
引き続き、どなたかわかる方がおられましたらお願い致します。

Django REST framework API からのPOST時のCSRF Failed: CSRF token missing or incorrect.

### 前提・実現したいこと

CakePHP4を使って、APIを実装したいと考えています。
API実装部分以外はログイン機能のあるシステムで、外部フォームから入力されたデータを
API機能を使ってデータベースに取り込み、システム内でデータを利用するという前提です。

### 発生している問題・エラーメッセージ

API以外の部分はログイン機能を実装しているため、元々はCakePHP全体にCSRF設定の有効化をしていましたが
Cookbookを参考にしつつ、API部分のみCSRFを無効化しようとしても、反映されません。
単純にAPIを提供しているURLを叩くとデータは表示されますが、別サーバーからcURL等でアクセスすると
以下のエラーが表示される、という状態です。

```
Missing or incorrect CSRF cookie type.
```

### 該当のソースコード

```
// routes.php
// API
$routes->scope('/api', ['prefix' => 'Api'], function (RouteBuilder $builder) {
    $builder->registerMiddleware('bodies', new BodyParserMiddleware());
    $builder->applyMiddleware('bodies');

    $builder->setExtensions(['json']);

    // Forms
    $builder->connect('/forms/search', ['controller' => 'Forms', 'action' => 'search'])->setMethods(['GET']);
    $builder->connect('/forms/create', ['controller' => 'Forms', 'action' => 'create'])->setMethods(['POST']);
});
```

```
// Application.php
    public function middleware(MiddlewareQueue $middlewareQueue): MiddlewareQueue
    {
        $middlewareQueue
            // Catch any exceptions in the lower layers,
            // and make an error page/response
            ->add(new ErrorHandlerMiddleware(Configure::read('Error')))

            // Handle plugin/theme assets like CakePHP normally does.
            ->add(new AssetMiddleware([
                'cacheTime' => Configure::read('Asset.cacheTime'),
            ]))

            // Add routing middleware.
            // If you have a large number of routes connected, turning on routes
            // caching in production could improve performance. For that when
            // creating the middleware instance specify the cache config name by
            // using it's second constructor argument:
            // `new RoutingMiddleware($this, '_cake_routes_')`
            ->add(new RoutingMiddleware($this))

            // Parse various types of encoded request bodies so that they are
            // available as array through $request->getData()
            // https://book.cakephp.org/4/en/controllers/middleware.html#body-parser-middleware
            ->add(new BodyParserMiddleware())

            // Cross Site Request Forgery (CSRF) Protection Middleware
            // https://book.cakephp.org/4/en/controllers/middleware.html#cross-site-request-forgery-csrf-middleware
//            ->add(new CsrfProtectionMiddleware([
//                'httponly' => true,
//            ]))
            ->add(new RoutingMiddleware($this))
            // RoutingMiddleware の後に認証を追加
            ->add(new AuthenticationMiddleware($this));

        // CSRFに関する設定
        $csrf = new CsrfProtectionMiddleware([
            'httponly' => true,
        ]);
        // コールバックが `true` を返す場合、トークンのチェックはスキップされます。
        $csrf->skipCheckCallback(function ($request) {
            // Skip token check for API URLs.
            if ($request->getParam('prefix') === 'Api') {
                return true;
            }
        });
        $middlewareQueue->add($csrf);

        return $middlewareQueue;
    }

```

```
// src/Controller/Api/FormsController.php
<?php
declare(strict_types=1);

namespace App\Controller\Api;

use App\Controller\AppController;
use Cake\Cache\Cache;
use Cake\Event\EventInterface;

class FormsController extends AppController {
    public function initialize(): void
    {
        parent::initialize(); // TODO: Change the autogenerated stub
        $this->loadComponent('RequestHandler');
    }

    /**
     * テスト用API（データ取得）
     */
    public function search() {
        $forms = $this->Forms->find('all');
        $this->set(compact('forms'));
        $this->viewBuilder()->setOption('serialize', ['forms']);
    }

    /**
     * データ登録API
     */
    public function create() {
        $result = $this->request->getData();
        $this->set(compact('result'));
        $this->viewBuilder()->setOption('serialize', ['result']);
    }

    public function beforeFilter(EventInterface $event)
    {
        parent::beforeFilter($event);
        $this->Authentication->allowUnauthenticated(['create', 'search']);
    }
}

```

### 試したこと

エラーの内容としてはCSRFが無効化されていない状態のようだったので、
Application.phpの中のif文を`$request->getParam('controller') === 'Forms'`に変更するなど
してみましたが、同様のエラーが出て回避はできませんでした。


### 補足情報（FW/ツールのバージョンなど）

**※各種バージョン情報※**
CakePHPバージョン：4.2.8
PHPバージョン：7.4.16
開発環境：MAMP 6.4

**※参考サイト※**
・[CakePHP 4.x Strawberry Cookbook CMS チュートリアル - 認証](https://book.cakephp.org/4/ja/tutorials-and-examples/cms/authentication.html#id1)
・[CakePHP 4.x Strawberry Cookbook クロスサイトリクエストフォージェリー (CSRF) ミドルウェア](https://book.cakephp.org/4/ja/controllers/middleware.html#csrf)
・[CakePHP4 で簡単な API を作る](https://qiita.com/katsuhiko/items/5fd845351b011fb70eaf)
・[CakePHP 4 で CSRF 保護を一部または完全に無効化（有効化）する方法](https://tt-computing.com/cake4-csrf-disabled#skip-check)

Cakephp4でREST APIを実装するとCSRFエラーが発生

正直、結論の出づらい内容ですが質問させていただきます。

Tokenの保管方法として、

* cookie
* localstrage

が挙げられますが、**localstrageがだめだと言っている情報がかなり多いです**。

自分はJWTを保管しようかと考えています。

localstrageはCSRFに対して脆弱性がない反面、XSSに弱いということだそうです。

しかし、Reactなどのきちんとメンテナンスされているライブラリの場合、XSSに対する脆弱性がないようなものだと思います。きちんとスクリプトをエスケープするはずですし。

入力値をそのまま反映させるdangerous~HTMLを使うなどしなければ、localstrageが優秀に感じますがどうなのでしょうか？

cookieだと、CSRFに対して弱いということが心配なので、localstrageをメンテンナンスサれているJSライブラリで用いて良いでしょうか？