常連

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

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

### 実現したいこと

セキュリティ上　安全なQ&A掲示板を作成したい

### 前提

PHPとデータベースを使い名前・コメント・アップロードファイル・スタンプが送信できる、Q&A掲示板を作成しております。
PHP側ではCSRF対策にトークンを実装しております。

single-index.php(インデックス)
single-input.php(入力画面)
single-refication.php(文字列チェック)

### single-index.php
```ここに言語名を入力
<?php
session_start();
header('X-FRAME-OPTIONS: SAMEORIGIN');
class MAX_LENGTH
{
    public const NAME = 50;
    public const MESSAGE = 500;
}
$noindexaccess = true;
$errors = [];
$mode = $_POST['mode'] ?? 'init';
switch ($mode) {
    case 'regist':
        $namae = $_SESSION['namae'];
        $message = $_SESSION['message'];
        $stamp = $_SESSION['stamp'];
        check();
        break;
    case 'confirm':
        $namae = $_POST['namae'];
        $message = $_POST['message'];
        $stamp = $_POST['stamp'];
        check();
        break;
    case 'input':
        $namae = $_SESSION['namae'];
        $message = $_SESSION['message'];
        $stamp = $_SESSION['stamp'];
        break;
    default:
        $namae = '';
        $message = '';
        $stamp = '1';
        $_SESSION = [];
        break;
}
if ('init' !== $mode && empty($errors)) {
    $_SESSION['namae'] = $namae;
    $_SESSION['message'] = $message;
    $_SESSION['stamp'] = $stamp;
} else {
    $mode = '';
}
switch ($mode) {
    case 'regist':
        include 'single-regist.php';
        break;
    case 'confirm':
        include 'single-confirm.php';
        break;
    default:
        include 'single-input.php';
        break;
}
function check()
{
    global $errors;
    global $namae;
    global $message;
    $namae = Chk_StrMode($namae);
    $message = Chk_StrMode($message);
    Chk_InputMode($namae, '・お名前をご記入ください。');
    Chk_InputMode($message, '・お問い合わせ内容をご記入ください。');
    if (!empty($_FILES)) {
        foreach ($_FILES['attach']['tmp_name'] as $i => $tmp_name) {
            if (empty($tmp_name)) {
                if (empty($_POST['attachdel'][$i])) {
                    if (empty($_SESSION['attach']['data'][$i])) {
                        $_SESSION['attach']['data'][$i] = '';
                        $_SESSION['attach']['type'][$i] = '';
                    }
                } else {
                    $_SESSION['attach']['data'][$i] = '';
                    $_SESSION['attach']['type'][$i] = '';
                }
            } else {
                if (false) {
                    $errors[] = 'ファイルエラー'.$i;
                } else {
                    $data = file_get_contents($tmp_name);
                    $_SESSION['attach']['data'][$i] = $data;
                    $_SESSION['attach']['type'][$i] = $_FILES['attach']['type'][$i];
                }
            }
        }
    }
}
function Chk_StrMode($str)
{
    // タグを除去
    $str = strip_tags($str);
    // 空白を除去
    $str = mb_ereg_replace('^(　){0,}', '', $str);
    $str = mb_ereg_replace('(　){0,}$', '', $str);
    $str = trim($str);
    // 特殊文字を HTML エンティティに変換する
    $str = htmlspecialchars($str);

    return $str;
}
/* 未入力チェックファンクション */
function Chk_InputMode($str, $mes)
{
    global $errors;
    if ('' == $str) {
        $errors[] = $mes;
    }
}
?>
```

### single-input.php
```ここに言語名を入力
<?php
if (!$noindexaccess) {
exit('不正アクセス');
}
if (empty($_SESSION['token'])) {// 悪意のある攻撃者があらかじめ作成したコードが実行されてしまうのを防ぐ
$_SESSION['token'] = bin2hex(random_bytes(16));
}
$attach = [];
if (!empty($_SESSION['attach'])) {
foreach ($_SESSION['attach']['data'] as $i => $data) {
if (!empty($data)) {
$base64 = base64_encode($data);
}
$type = $_SESSION['attach']['type'][$i];
switch ($type) {
case 'image/jpeg':
case 'image/png':
$attach[] = '<img style="height: 100px;" src="data:'.$type.';base64,'.$base64.'">';
break;
case 'video/mp4':
$attach[] = '<video style="height: 100px;" controls src="data:'.$type.';base64,'.$base64.'">';
break;
default:
$attach[] = '';
break;
}
}
}
$stamp_checked = [];
$stamp_checked[$stamp] = 'checked';
$upload_dir = wp_upload_dir();
$camera_url = $upload_dir['baseurl'].'/camera.png';
?>
<h2>入力画面</h2>
<?php
foreach ($errors as $error) {
echo "<p>{$error}</p>";
}
?>
<div class="board_form_partial" id="js_board_form_partial">
<form method="post" enctype="multipart/form-data">
<input type="hidden" name="token" value="<?php echo $_SESSION['token']; ?>">
<div class="image-partial">
<h2>動画・画像をアップロード(Upload video・image)<span class="required">※ファイルサイズ15MB以内、JPG/PNG/MP4</span></h2>
<div class="image-selector-button">
<label>
<div class="image-camera-icon">
<img src="<?php echo $camera_url; ?>" class="changeImg">
</div>
<input type="file" class="attach" name="attach[]" accept=".png, .jpg, .jpeg, .mp4" style="display: none;">
</label>
<input type="hidden" class="attachdel" name="attachdel[]">
<div class="viewer"><?php echo $attach[0]; ?></div>
<button type="button" class="attachclear">clear</button>
</div>
<div class="image-selector-button">
<label>
<div class="image-camera-icon">
<img src="<?php echo $camera_url; ?>" class="changeImg">
</div>
<input type="file" class="attach" name="attach[]" accept=".png, .jpg, .jpeg, .mp4" style="display: none;">
</label>
<input type="hidden" class="attachdel" name="attachdel[]">
<div class="viewer"><?php echo $attach[1]; ?></div>
<button type="button" class="attachclear">clear</button>
</div>

<div class="image-selector-button">
<label>
<div class="image-camera-icon">
<img src="<?php echo $camera_url; ?>" class="changeImg">
</div>
<input type="file" class="attach" name="attach[]" accept=".png, .jpg, .jpeg, .mp4" style="display: none;">
</label>
<input type="hidden" class="attachdel" name="attachdel[]">
<div class="viewer"><?php echo $attach[2]; ?></div>
<button type="button" class="attachclear">clear</button>
</div>
</div>
<style>
.hideItems {
display: none;
}
</style>
<div class="title-partial">
<h2>名前<span class="required"></span></h2>
<input class="length_input" data-maxlength="<?php echo MAX_LENGTH::NAME; ?>" type="text" name="namae" id="name" placeholder="未入力の場合は、匿名で表示されます" value="<?php echo $namae; ?>">
<div class="msg_partial"></div>
</div>
<div class="body-partial">
<h2>コメント<span class="required"></span></h2>
<textarea class="length_input" data-maxlength="<?php echo MAX_LENGTH::MESSAGE; ?>" name="message" id="message" placeholder="荒らし行為や誹謗中傷や著作権の侵害はご遠慮ください"><?php echo $message; ?></textarea>
<div class="msg_partial"></div>
</div>
<div class="stamp-partial">
<h2>スタンプを選ぶ(必須)</h2>
<input type="radio" name="stamp" value="1" id="stamp_1" <?php echo $stamp_checked['1']; ?>><label for="stamp_1"></label>
<input type="radio" name="stamp" value="2" id="stamp_2" <?php echo $stamp_checked['2']; ?>><label for="stamp_2"></label>
<input type="radio" name="stamp" value="3" id="stamp_3" <?php echo $stamp_checked['3']; ?>><label for="stamp_3"></label>
<input type="radio" name="stamp" value="4" id="stamp_4" <?php echo $stamp_checked['4']; ?>><label for="stamp_4"></label>
</div>
<div class="post-button">
<button type="submit" id="submit_button" name="mode" value="confirm">表示画面へ進む</button>
</div>
</form>
<script>
/* 名前とメッセージの文字数チェック */
const length_input = document.querySelectorAll('.length_input');
const submit_button = document.getElementById('submit_button');
for (let i = 0; i < length_input.length; i++) {
length_input[i].addEventListener('input', lengthCheck);
let event = new Event("input");
length_input[i].dispatchEvent(event);
}
function lengthCheck() {
const left = this.dataset.maxlength - this.value.length;
if (left >= 0) {
this.nextElementSibling.innerHTML = 'あと<strong>' + left + '</strong>文字';
this.dataset.submit_disabled = this.value.length === 0;
} else {
this.nextElementSibling.innerHTML = '<strong>' + -left + '</strong>文字超過しています';
this.dataset.submit_disabled = true;
}
let disabled = false;
for (let i = 0; i < length_input.length; i++) {
if (length_input[i].dataset.submit_disabled === "true") {
disabled = true;
}
}
submit_button.disabled = disabled;
}
/* カメラ画像をファイルアップロード時に非表示にする */
const attach = document.querySelectorAll('.attach');
const del = document.querySelectorAll('.attachdel');
const clear = document.querySelectorAll('.attachclear');
const viewer = document.querySelectorAll('.viewer');
const changeImg = document.querySelectorAll('.changeImg'); 
for (let i = 0; i < attach.length; i++) {
attach[i].addEventListener('change', () => {
if (attach[i].files[0].size > 15 * 1024 * 1024) {
alert('ファイルサイズが 15MBバイトを超えています');
return;
}
del[i].value = "";
viewer[i].innerHTML = "";
if (attach[i].files.length !== 0) {
const reader = new FileReader();
reader.onload = () => {
var child = null;
if (reader.result.indexOf("data:image/jpeg;base64,") === 0 ||
reader.result.indexOf("data:image/png;base64,") === 0) {
child = document.createElement("img");
} else if (reader.result.indexOf("data:video/mp4;base64,") === 0) {
child = document.createElement("video");
child.setAttribute("controls", null);
} else {
alert("対象外のファイルです");
alert(reader.result);
attach[i].value = "";
}
if (child !== null) {
child.style.height = "350px";
child.style.width = "528px";
child.src = reader.result;
viewer[i].appendChild(child);
changeImg[i].classList.add('hideItems'); // もともとの画像を消す
}
};
reader.readAsDataURL(attach[i].files[0]);
}
});
clear[i].addEventListener('click', () => {
attach[i].value = "";
del[i].value = "1";
viewer[i].innerHTML = "";
changeImg[i].classList.remove('hideItems');
});
}
</script>
```
### single-refication.php
```ここに言語名を入力
<?php
function Chk_StrMode($str)
{

    // タグを除去
    $str = strip_tags($str);
    // 空白を除去
    $str = mb_ereg_replace('^(　){0,}', '', $str);
    $str = mb_ereg_replace('(　){0,}$', '', $str);
    $str = trim($str);
    // 特殊文字を HTML エンティティに変換する
    $str = htmlspecialchars($str);

    return $str;
}

function Chk_InputMode($str, $mes)
{
    $errmes = '';
    if ('' == $str) {
        $errmes .= "{$mes}<br>\n";
    }
    return $errmes;
}
?>
```

### 試したこと

PHPでのトークン実装してCSRF対策

Javascriptを使う際にCSRFの対策が必要なのかアドバイスお願い致します。

### 実現したいこと
レスポンスヘッダーのSet-CookieにあるtokenをCookieに格納したい

### 前提
フロントエンド: React(v18), TypeScript, AWS Amplify
バックエンド: Python(v3.10),FastAPI, AWS app runner
認証ライブラリ: FastAPI JWT Auth
https://indominusbyte.github.io/fastapi-jwt-auth/usage/jwt-in-cookies/

ログインして利用するWebアプリケーションでフロントエンドとバックエンドは別々にデプロイしています。
ログイン後は、各エンドポイントごとでトークンチェックを行い、認証できない場合はトップ画面(ログイン前）へ遷移します。

### 発生している問題・エラーメッセージ
サーバーサイド側からSet-Cookieでクライアントにtokenを渡してもCookieにセットされず、次の画面で弾かれてトップ画面に戻ってしまう
（ログイン自体は成功してレスポンスが帰ってきます。）

ブラウザのデベロッパーツールでは、レスポンスヘッダーのSet-Cookieでトークンは確認できるが、！マークが表示されておりマウスホバーすると下記のメッセージが表示される

```
このSet-Cookie ヘッダーは、「SameSite」属性を指定しておらず、
デフォルトで「SameSite=Lax,」に設定されていましたが、トップレベルナビゲーション
へのレスポンスではないクロスサイト レスポンスが送信元だったため、
ブロックされました。Set-Cookieには「SameSite=None」を設定し、
クロスサイトでの使用を有効にしておく必要があります。
```

### 該当のソースコード
```
@app.exception_handler(HTTPException)
@router.post(
    "/api/v1/user/login",
    summary="ログイン"
)
def user_login(
    data: UserLoginSchema,
    db: Session = Depends(raw_db),
    Authorize: AuthJWT = Depends(),
):
    try:
        
        user_login_res = AuthService.user_login(data, db, Authorize)
        if user_login_res["res"] == True:
            return user_login_res["data"]
        else:
            return JSONResponse(status_code=400, content={"error": user_login_res["message"]})
        
    except HTTPException as e:
        logger.error(e.message)
        return JSONResponse(status_code=400, content={"error": "システムエラーが発生しました。"})
```
```
class AuthService:
    # ログイン
    @staticmethod
    def user_login(
        data: UserLoginSchema,
        raw_db: Session,
        Authorize: AuthJWT,
    ):

        # ~省略~

        # email、パスワードが一致すればトークンを発行
        issue_token(user.id, user.tenant_id, Authorize)

        
        data = {
                "result": True,
                "message": "Successfully login",
                "user_id": user.id,
        }
            return {"res": True, "data": data}
        
        else:
            return {"res": False, "message": "ログイン情報が正しくありません。"}
```

```ここに言語名を入力
def issue_token(
        user_id: int, 
        tenant_id:  int, 
        Authorize: AuthJWT
    ):
    user_claims = {
        "tenant_id": tenant_id,
    }
    access_token = Authorize.create_access_token(
        subject=user_id,
        user_claims=user_claims,
        expires_time=timedelta(hours=1),
    )
    refresh_token = Authorize.create_refresh_token(subject=user_id)

    Authorize.set_access_cookies(access_token)
    Authorize.set_refresh_cookies(refresh_token)
```
```
class UserLoginSchema(BaseModel):
    email: EmailStr
    password: str
```
```
authjwt_secret_key = "secret"
authjwt_token_location = {"cookies"}
authjwt_cookie_secure = True
authjwt_cookie_csrf_protect = True
```

### 試したこと
エラーメッセージに従いsamesiteをnoneにする

①FastAPI JWT Authのオプションを追加
```
authjwt_cookie_samesite = "none"
```
②直接設定を変える
```
def issue_token(
        user_id: int,
        tenant_id:  int,
        Authorize: AuthJWT,
        res: Response = None
    ):
    user_claims = {
        "tenant_id": tenant_id,
    }
    access_token = Authorize.create_access_token(
        subject=user_id,
        user_claims=user_claims,
        expires_time=timedelta(hours=24),
    )
    refresh_token = Authorize.create_refresh_token(subject=user_id)

    res.set_cookie(
        key="access_token_cookie",
        value=access_token,
        httponly=True,
        samesite="None",  # SameSite=None を指定
        secure=True,      # HTTPS 接続でのみクッキーを送信
    )

    res.set_cookie(
        key="refresh_token_cookie",
        value=refresh_token,
        httponly=True,
        samesite="None",  # SameSite=None を指定
        secure=True,      # HTTPS 接続でのみクッキーを送信
    )
```

上記２つのパターンを試したところ、最初の認証はできるようになりログイン後の一番最初の画面は見れるようになりました。
ただブラウザのCookieに格納されない現象は改善できておらず、次のエンドポイントで弾かれてしまいます。

こちらについて、解決策をご存知の方がいらっしゃいましたらお力を貸していただけないでしょうか。

同様にCookieに格納されないにも関わらず上記の設定変更で、一番最初の画面が見れるようになった理由もわかっていません。

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

参考にした記事
https://qiita.com/sotaheavymetal21/items/fb7ae0e5d09c7b16a3c7


レスポンスヘッダーのSet-CookieにあるtokenをCookieに格納したい

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

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.

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

### 前提・実現したいこと
現在、asp.net core 5 と vue3を使ってクロスドメインなSPAの開発を個人で行っております。
※vueとasp.netでドメイン(サーバー)が別
そこでユーザー認証をする際、cookie認証を使用しているのですが、CSRFを懸念しております。
※jwtによる認証も検討しましたが、XSSによるセッションハイジャックの可能性を考慮してやめました。


### 発生している問題
cookieで認証で行う場合、CSRFが懸念されますが、asp.net coreはantiforgerytokenを使うことでhtmlにtokenを埋め込み、サーバーが返したhtmlからのpost通信だと確認することで、CSRF対策としていると思います。

しかし、今回vueとasp.netでサーバーを分けているため、このtokenを埋め込むことができません。

そこでCORSの設定をすることでCSRF対策になるのではと考えております。
しかし、もし送信元のドメインを偽装することが可能であれば、CSRF対策としては不十分であると思います。

この偽装が可能(考慮すべき)かどうかを調べたのですが、私ではどうなのかわかりませんでした。

質問させて頂きたい内容としては、こちらになります。
①asp.net coreにおいてCORS設定をしても、送信元のドメインを偽装してアクセスしてくることは可能でしょうか(考慮すべきか)？
②ほかにベストプラクティスな認証方法はあるでしょうか？

もしお分かりになる方がいらっしゃいましたら教えて頂けないでしょうか。

asp.net core 5とvue3でクロスドメインなspaでcookie認証によるCSRF対策について

Webシステムにおいて、認証トークンをLocalStorageとCookieを併用することで、それぞれのデメリットを補う認証を実現することはできないのでしょうか？

### 背景
時折、認証トークンの保存先として最適な場所はLocalStorageかCookieかという論争を見かけます。
どちらもメリット・デメリットがあるようですが、
両方を併用することでそれぞれのデメリットを補い合うことはできないかと疑問に思いました。

### 併用した場合の認証方式
・ログインが成功したら、サーバー側で2種類の認証トークンを発行
・一方のトークンはCookieに設定し、もう一方はレスポンスで返してJavaScriptによりLocalStorageに保存
・LocalStorageのトークンはリクエスト時にAuthorizationヘッダーに設定
・サーバー側ではAuthorizationヘッダーのトークンとクッキーのトークンをそれぞれ検証

### 期待される挙動
・LocalStorageのトークンが盗まれたとしても、Cookieのトークンは盗めないため認証は通らない
・CSRF攻撃が行われた場合でも、Authorizationヘッダーがないため、認証ではじかれ、成立しない

###

有効な手段であれば既に使われているとは思いますので、セキュリティ対策として無意味であるか、デメリットの方が大きいかと思います。
後学のためにも、皆様のご意見をお聞かせ頂きたく思います。