常連

「[CSRF対策はどんなサイトでも絶対必要なのか](https://teratail.com/questions/lxojp3sk4o3yw9)」を読んでふと思ったので質問します。

ログインを伴うようなサービスで、（Cookieによるセッション管理を悪用した）一般的なCSRFを対策するというのはその必要性が分かりやすいと思います。また、更新系処理を伴わないようなサイトではCSRFを考慮する必要がないこともわかります。

では、ログインせずに使える掲示板の場合はどうでしょうか。あるいは、どこかの企業サイトのお問い合わせフォームでも想像しやすいかもしれません。

これらは、CSRF攻撃を仕掛けることで変なメッセージを被害者のクライアントから送信してしまうことが可能なように思えます。ログインを伴わない更新系処理について、一般的にCSRF対策あるいはそれに類する対策というのは何か考えられるのでしょうか。

ついでに、昨今ではこうした攻撃を仕掛けてしまった場合、不正指令電磁的記録に関する罪に問われるのだろうと想像します。不正指令電磁的記録に関する罪が制定される前は、こうした攻撃を仕掛けた場合、何か罪に問われる可能性があったのでしょうか。この罪に関する質問はおまけなのでもし何かご存知であれば補足程度にご教示ください。

ログイン前でも使える更新系処理にCSRF対策は必要でしょうか

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】作成したメールフォームに脆弱性がないか、アドバイスもらえないでしょうか。

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

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

**CSRF対策についてです。**

一般的にWebアプリケーションにはCSRF対策がされるかと思います。
いろいろ調べた結果、
①ユーザーのログイン時にクッキーにハッシュ値（トークン）を登録する
②hiddenフィールドもしくはリクエストヘッダーにXSRF-TOKENにクッキーのトークン値を設定し、リクエスト（Post）
③サーバー側では、クッキーの値とリクエストのトークン値が一致することを確認する

【質問】
このような流れになるのかと思いますが、
１、ユーザーの新規作成時（つまりログイン前）はクッキーにトークン値がないので、この場合は一般的にどのような実装になっているのでしょうか？
２、②でのhiddenもしくは、リクエストヘッダーのどちらにトークンを付与するのが一般的ですか？また理由も教えていただけると助かります。

また認識間違いがありましたら、教えていただけますと助かります。

CSRF対策のやり方

### 前提・実現したいこと

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対策方法を教えてください

### 前提
WordPressでAjaxを使ったアクションを実装しています

### 知りたいこと
nonceの理解を深めたいです

特に「なぜ複数必要とされるのか？」が理解できないので教えて頂けませんでしょうか

以下に複数必要との記載があるソースを列挙してまいります

### 複数必要との記載があるソース１
まず関数リファレンスですが、

> 一般的に、アクションに対する名前を可能な限りユニークにするのがベストです。
> https://wpdocs.osdn.jp/関数リファレンス/wp_create_nonce

とあり、その理由は明記されていません

### 複数必要との記載があるソース２
そして類似質問がありましたが、

> アクション毎に nonce を別々にするのが望ましいです。
> https://ja.wordpress.org/support/topic/「nonce」の使い方について/

とあり、やはり理由が不明です

### 複数必要との記載があるソース３
またはStackoverflowにも質問がありましたが、

> Each form should have its own nonce
> https://stackoverflow.com/questions/31987963/should-i-use-different-nonces-for-multiple-forms-on-same-page

その理由がここでもわかりません

### 役割を調べました
複数必要であるというその理由を知るために、公式マニュアルで本来の役割を見てみました

この「Why use a nonce?」の項目を見ると、予想通りnonceがCSRF対策だとわかります
> https://codex.wordpress.org/WordPress_Nonces#Why_use_a_nonce.3F

CSRF対策ならば、nonceは「なぜ複数必要とされるのか？」が結局ナゾです。

普通に１つのトークンをフォームに持たせておけば対策は充分に可能だと思うのですが…？

### まとめ
疑問は次の点にまとめられると思います

・nonceにはCSRF対策以外の役割があって、そのときに複数必要なのでしょうか？
・それともCSRF対策のトークンが複数必要なケースというのがあるのでしょうか？

宜しくお願い致します




WordPressのnonceはなぜ複数必要とされるのか？（CSRF対策のトークンはいつ複数必要なのか？）

### 実現したいこと
Google Apps Script を使用してCSRFトークンが使用されているページ（大学のポータルサイト）にログインした後、特定のデータをスクレイピングすることに試みています。

PythonでSeleniumを利用したスクレイピングでは問題なく動きます。ただ、PCを起動していなくても自動的に実行してほしいため、GASを使用しています。

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

```ここに言語名を入力
function gas_login(){
  let login_url = "ログインするページのURL"

  // ログインするページのHTMLを取得
  let html = UrlFetchApp.fetch(login_url)
  // HTMLからCSRFトークンを取得
  let token = Parser.data(html.getContentText()).from('value=').to('/>').build()

  //レスポンスのヘッダーからcookieを取得
  let cookies = html.getHeaders()["Set-Cookie"]
  let headers = { Cookie: cookies }
  
  // ログイン情報(PayLoadデータ)
  let payload_data = {
    "_csrf": token,
    "username": "*****",
    "password": "*****"
  }
  
  //POSTデータ(POSTオプション)
  let post_option = {
    "method": "POST",
    "headers": headers,
    "payload": payload_data,
    "followRedirects": false,
    "muteHttpExceptions" : true
  }

  let response = UrlFetchApp.fetch(login_url, post_option)
  Logger.log(response)
```

### 実行結果

```
{"timestamp":"2022-11-09T09:28:15.128+0000","status":403,"error":"Forbidden","message":"Forbidden","path":"/login"}
```

### 試したこと
私と同じようなことを試している以下のサイトなどをいろいろ調べてみましたが、成功例が見つからないため、もし知っている方がいれば教えていただきたいです。
- [GASを使って図書館のサイトから自分の借りてる本と予約してる本の情報を取得しようとしたけど断念した](https://qiita.com/optimisuke/items/8b355c485b2c56a24bcf)
- [Login to external website using Google Apps Script to perform web scraping](https://stackoverflow.com/questions/68327498/login-to-external-website-using-google-apps-script-to-perform-web-scraping)
- [【GAS】認証が必要なサイト(qiita)へのログイン自動化&スクレイピング](https://teratail.com/questions/81285)


【GAS】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以外のところで弾かれているのかもしれません。
引き続き、どなたかわかる方がおられましたらお願い致します。