常連

注目の的

社会貢献

質問力

回答者

ベストアンサー

拍手喝采

プロフェッサー

先生

情報収集家

自己紹介

有名人

VirtualBoxに仮想マシンを作成してサーバーを構築する予定です。
その際仮想マシンの想定HDD容量(1TB)が大きく、PCのHDDディスクが足りないので2TB増設しようと考えていますが、
PCにHDDディスクを取り付けて増設するか、外付けのUSBのHDDを取り付けてUSB上で仮想マシンを作成するかで悩んでいます。

pcの取り付け作業がめんどくさそうなので外付けがいいなと思っているのですが、機能面が心配です。
ディスクのアクセスが非常に遅くなり、動作が重くなったりするのでしょうか。
例えば、OSのインストールに時間がかかりすぎたりするものでしょうか。

現在のpcですが、
・windows11
・ Intel(R) Core(TM) i5-11400
・メモリ16GB
で、OSのインストールなどは短時間でできています。




仮想マシン導入によるHDD増設について

## システム管理者の不正からパスワードの漏洩はどうやって防いでいるのか？

システム管理者を担当しています。
立場上、ユーザのパスワードが見えます。細工すれば分かる。
システム管理者の不正からパスワードの漏洩はどうやって防ぐのでしょうか？
素朴な疑問を持ったので質問しました。


システム管理者ならユーザのパスワードが分かる？

### 実現したいこと

JavascriptでDom XSSの脆弱性対策を行いたい

### 前提

画像、短い動画をアップロード(ファイル)、名前、メッセージを送信できる掲示板を作成していて、名前、メッセージを入力する際にヤフー知恵袋のような入力可能な文字数をカウントする機能を実装するためにHTMLElement.innerHTMLを使っていたのですが、エレメント事作る必要があり＝そこでDOM要素が発生してしまうリスクがありdocument.addEventListenerを使うよう修正いたしました。

既存の文字入力が上限を超えていた場合に送信できないようにする機能とファイルアップロード箇所にデフォルトで表示されているカメラの画像をファイルアップロード時に非表示にするコードもまとめて実装する必要があるため上手くまとめることが出来ず困っております。

カメラ画像をファイルアップロード時に非表示にするコードは、イベント設定以前に要素を取得しているため、HTML解釈後に実行することが必要となっていて、window.addEventListener("load", init);でまとめたのですが、無理やりコードをつなぎ合わせた形になっております。

### 発生している問題・エラーメッセージ

```
文字入力数の条件にあわせて送信ボタンの使用権限を操作する機能を制限する機能とDOMツリー構築完了後にカメラ画像をファイルアップロード時に非表示にするコードを両立したい為、入力中の文字数チェックと、ボタン制御のための文字数チェックが別々になっている。
```

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

```ここに言語名を入力
<script>
    function validation_submit(f) {
        const submit = document.getElementById("submit_button");
        /* 判定は逆なので、逆に渡す */
        submit.disabled = f ? false : true;
    };
    function validation_text(parts) {
        /* このpartsグループの、inputを抽出 */
        let text = parts.getElementsByClassName('input')[0];
        /* 最小チェック */
        if (text.value.length == 0) {
            return false;
        }
        /* 最大チェック */
        if (text.value.length >= text.dataset.length) {
            return false;
        }
        return true;
    };
    /* バリデーション条件判断部分 */
    function validation() {
        let parts = document.getElementsByClassName('parts');
        let submit = true;
        for (let i = 0; i < parts.length; i++) {
            if (validation_text(parts[i]) != true) {
                submit = false;
            }
        }
        validation_submit(submit);
    };
    /* 例えばのチェック */
    function init() {
        /* カメラ画像をファイルアップロード時に非表示にする */
        /* カメラ画像をファイルアップロード時に非表示にする */
        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.readAsDataURL(attach[i].files[0]);
     }
     });
        clear[i].addEventListener('click', () => {
        attach[i].value = "";
        del[i].value = "1";
        viewer[i].innerHTML = "";
        changeImg[i].classList.remove('hideItems');
     });
     }
        /* 文字数表示 */
        document.addEventListener('input', e => {
            if (!['name', 'message'].includes(e.target.id)) return;
            const
                t = e.target,
                m = t.nextElementSibling,
                n = t.value.length - (t.dataset.length | 0),
                c = document.createElement('span');
            c.append(Math.abs(n));
            m.style.color = n > 0 ? 'red' : 'black';
            m.replaceChildren(n > 0 ? '' : '残り', c,
                `文字${n > 0 ? '超過してい' : '入力でき'}ます。`);
            /* 毎回判定によるボタン制御 */
            validation();
        });
        /* 初回判定のボタン制御 */
        validation();
    };
    window.addEventListener("load", init);
</script>

<body>
    <form method="post" enctype="multipart/form-data">
        <div class=parts>
            <h2>名前(name)<span>※必須</span></h2>
            <input class=input type="text" name="name1" id="name" data-length="32" placeholder="未入力の場合は、匿名で表示されます" value="">
            <div></div>
        </div>
        <div class=parts>
            <h2>コメント(comment)<span class="required">※必須</span></h2>
            <input class=input type="text" name="name2" id="message" data-length="40" placeholder="荒らし行為や誹謗中傷や著作権の侵害はご遠慮ください">
            <div></div>
        </div>
        <div class="post-button">
            <button type="submit" id="submit_button" name="mode" value="confirm">表示画面へ進む</button>
        </div>
    </form>
</body>
```

### 修正前のソースコード

```ここに言語名を入力
<script>
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.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>

<div class="title-partial">
<h2>名前(name)<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>コメント(comment)<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>
```

### 参考サイト

https://gihyo.jp/dev/serial/01/javascript-security/0006

Javascriptのまとめかたについてアドバイスお願い致します

### 実現したいこと
コマンドからphpを実行しVsCodeでデバッグしたいのですが出来るものなのでしょうか？

### 前提
以下環境にて画面でphpを実行した場合はVscodeでデバッグは出来ております。

WSL環境　
Ubuntu20.04.6 LTS
Docker環境
PHP 7.4.3
Xdebug

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

### 試したこと
・Vscodeで【Listen for Xdebug】を開始
・コマンドで実行するPHPファイルにブレークポイントを置く
・ コンテナ内でphp XXXXX.phpを実行

XXXXX.php実行はされることは確認できたがブレークポイントで止まらない。


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



コマンドからphpを実行した場合のデバッグ方法について

###
CORSを潜り抜けてlocalhost:3000(React)からxammpのphpにリクエストをして
クライアント側にあるJSONの中身を書き換えたい
### 

CORSを潜り抜けてlocalhost:3000(React)からxammpのphp(localhost:80)にリクエストをするphpとき![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-09-21/95a54987-4aa9-4185-82b9-bcf2d6d0f777.png)
上記のエラーが出ます

CORS対策として
PHPファイルに
・header('Access-Control-Allow-Origin: http://localhost:3000/');
・  header('Access-Control-Allow-Methods: GET, POST, PUT');
・  header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type,　Accept');
と記述いたしました。
ですが未解決です。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-09-21/9d0cb833-96bf-408c-9d87-c6c81c90d3bf.png)

また上記の状態(Networkタグ)の意味が分かっていません
プリフライトリクエストが成功したが本番のリクエストではじかれたということでしょうか

よろしくお願いいたします。

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

```PHP

<?php
     header('Access-Control-Allow-Origin: http://localhost:3000/');
     header('Access-Control-Allow-Methods: GET, POST, PUT');
     header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
     
    if($_SERVER['REQUEST_METHOD'] === 'POST') {
        $raw = file_get_contents('php://input');
        file_put_contents('../../../players/players_names/src/components/players_list.json', json_encode($raw));　//JSONの相対パス
    }

  ?>

```

```JavaScript
async function  save(players) {

        const headers = {'Content-Type': 'application/json'};

        players = reobj;
        await axios.post("http://localhost:80/players_backend/index.php",
        players, //playersという値をphpに渡したい
        {heders:headers}
        ).then((res) => {
          console.log(res);
        })
        .catch((error) => {
          console.log(error);
        });
      }
      save();
```



xamppでのInternal Server Error

### 実現したいこと

以下のJavascript と ajax のコードで、一覧から１件の予定を選択して、詳細情報を表示したいと考えています。



### 発生している問題・エラーメッセージ

前段の一覧表示は問題なくできています。
その後一覧内の「選択」をクリックすると、当該行の「ID（scheduleId）」と「タイトル（title）」を別表示しようとしていますが、「タイトル（title）」のところでエラーになります。
引数で２件のデータを渡すのが悪いのかと思いましたが、INTである「ID」と「分類」を渡すとうまく渡すことができました。いろいろやっているうちに、どうやらテキストを渡そうとするとエラーになるようです。

エラーは以下の内容で、「予備練習」（タイトル）が定義されていない、のが原因のようですが、どのように対処したらよいかわかりません。

```
Uncaught ReferenceError: 予備練習 is not defined
    at HTMLAnchorElement.onclick (VM197 test.php:1:18)
```

### 該当のソースコード
```
$(document).ready(function(){

        $.ajax({
	　type: "POST",
	　url: "../code/schedule/ScheduleList.php",
	　//data: data, 
	　dataType: "json", 

        })
        // 通信成功時の処理
        .done(function(request) {
            const json = JSON.parse(JSON.stringify(request));
            let res = '';

            for (var i = 0; i < json.length; i++){
                res += '<tr>'
                    + '<td>' + json[i].scheduleId + '</td>'
                    + '<td>' + json[i].title + '</td>'
                    + '<td>' + json[i].category + '</td>'
                    + '<td>' + json[i].startDate + '</td>'
                    + '<td>' + json[i].endDate + '</td>'
                    + '<td><a href="#" onclick="getEventDetail(' + json[i].scheduleId + ',' + json[i].title +');">選択</a></td>';
                     + '</tr>';
            }


            var obj = document.getElementById("datatableScheduleList");
            obj.innerHTML ='<table class="eventList"><tr><th>ID</th><th>タイトル</th><th >分類</th><th>開始日</th><th>終了日</th><th>選択</th></tr>'
                        + res
                        + '</table>';

        // 通信失敗時の処理
        }).fail(function() {
            $('div#jobStatus').text("予定情報を検索できませんでした。");

        });

    });


    // 一覧の「選択」をクリック
    function getScheduleDetail(scheduleId, title){

        $('#result_1').get(0).value = scheduleId;
        $('#result_2').get(0).value = title;
   }
```


### 試したこと
以下のパターンでやってみましたが、「タイトル」（テキスト）だとうまくいきません。
パラメータ１つ　ID　　　　　　　〇
パラメータ１つ　タイトル　　　　×
パラメータ２つ　IDと分類　　　　〇
パラメータ２つ　IDとタイトル　　×


Javascript＆ajaxの初心者です。よろしくお願い致します。


javasvcript で文字列の引数を渡す方法がわかりません

## テーマ、知りたいこと
XSS 対策を実装しているのですが、いつエスケープしたらいいのかいろいろなご意見があるようで疑問です。
使用言語は、HTML、CSS、JavaScript、PHP、MySQLです。

## 背景、状況
掲示板のコメントを例にします。

保存の際は JavaScript の `fetch()` を使い、PHP の `PDO()` を介し、MySQL でデータベースに保存しています。

逆に出力は PHP から `{"id": 1, "comment": "<p>hello</p>"}` のような JSON を `echo` し、 JavaScript で HTML を生成します。

この流れにあたって XSS 対策のタイミングは下記などいくつか考えられそうです。


### タイミング
##### ➀ データベースに保存する際にエスケープした値にしておく
```PHP
<?php
$data = ["comment" => "<p>hello</p>"];
$data["comment"] = htmlspecialchars($data["comment"], ENT_QUOTES, "UTF-8"); // ➀はここでエスケープ
$stmt = $pdo->prepare("INSERT INTO comment_table (comment) VALUES (:comment)");
$stmt->bindParam(":comment", $data["comment"], PDO::PARAM_STR);
$stmt->execute();
```

##### ➁ データベースには素のまま保存し、PHP から `echo` する際にエスケープする
```PHP
$stmt = $pdo->query("SELECT * FROM comment_table WHERE id = 1"); 
$data = $stmt->fetch(PDO::FETCH_ASSOC); // この data は ["id" => 1, "comment" => "<p>hello</p>"] のような値 
$data["comment"] = htmlspecialchars($data["comment"], ENT_QUOTES, "UTF-8"); // ➁はここでエスケープ
echo json_encode($data);
```

##### ③ データベースには素のまま保存し、PHP から `echo` する際も素のまま `echo` し、JSON を HTML として描画する際に JavaScript でエスケープする
```JavaScript
fetch('getComment.php')
    .then(response => response.json())
    .then(data => { // この data は {"id": 1, "comment": "<p>hello</p>"} のような値 
        addNewComment(data);
    })
    .catch(error => {
    });

function addNewComment(data) {
    const ulElement = document.querySelector('.comment-list');
    const liElement = document.createElement('li');
    liElement.className = 'comment';
    liElement.textContent = escapeHtml(data); // ➂はここでエスケープ
    ulElement.appendChild(liElement);
}

function escapeHtml(unsafe) {
    return unsafe
         .replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
}
```

いつエスケープするのがセオリーというか、安全というか、実装しやすいというか…
一体どうしたらいいのでしょうか？



XSS対策のエスケープ、いつする派？

### 実現したいこと

ここに実現したいことを箇条書きで書いてください。
- CSVでインポートしたユーザーパスワードのハッシュ化

### 前提

Wordpressに会員サイトを構築中です。
ユーザーを移行させるためにWordpress以外で作成した他サイトから数千件のユーザー情報をCSVでインポートしました。
インポート後にデータベースを確認すると、パスワードが平文で表示されてしまいます。
どうすればCSVのユーザーパスワード部分のみをハッシュ化してインポートできますか？
もしくは、インポート後にハッシュ化させる方法でもかまいません。
CSVのインポートにはプラグインを使用しています。

### 発生している問題・エラーメッセージ

```
データベースでパスワードが平文で表示されてしまう。
平文のためか、IDとパスワードでWordpressにログインできない。
```

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

```ここに言語名を入力

```

### 試したこと

CSV読み込み時にユーザーパスワードをハッシュ化させるプラグインが他に無いか調べた。
インポート後のユーザーパスワードを一気にハッシュ化する方法が無いか調べた。
いずれも方法が見つからず。

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

WordPress 6.3.1 
PHP 8.0.29
プラグイン名　Import and export users and customers　バージョン 1.22.9　作者：codection



WordpressでユーザーのCSVインポート時にパスワードをハッシュ化させる方法

### 実現したいこと

ブラウザがcookieに保持しているsessionidが既に無効である場合、cookieは無効であるsessionidと判定して、新しいsession idを生成してリクエストを送りますか？
それとも、無効なsession idでリクエストを送ってサーバー側で無効なセッションか否かを判定し、無効である場合は新しいsession idを生成してレスポンスを返す。ブラウザはそれを受け取ってそのsession idにて再度リクエストを送りますか？

知りたいこととしては、無効なセッションのリクエストが来るのであればそのsessionidを取得することが出来るのかということです。

### 補足情報
言語：php
フレームワーク：laravel


セッションタイムアウト時のリクエストについて

### 実現したいこと
laravelにてセッションタイムアウトを判定した段階で、タイムアウトになったsession_idを取得したい。

セッションタイムアウトとなったセッションidを取得し、そのセッションidで登録していたDBのレコードに更新処理をかけたい。

### 試したこと

handler.phpにてセッションタイムアウトを検知した際に、セッションidを出力するログを記載。
結果として、出力されたログはタイムアウトになったセッションidではなく、新しく生成されたセッションidが取得された。

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

無効なセッションを判定する際に
Illuminate\Auth\GuardHelpers.phpのcheck関数にて、リクエストされたセッションからユーザ情報を取得する処理をもって実施していることは確認済み。

一番不明なのは、無効になっているセッションをブラウザ側がリクエストとして投げないのか、リクエストとしては送信されており、サーバー側で無効なセッションかの判定をしてレスポンスで新しいセッションidを渡して、再度リクエストが来ているのかというところ。
後者であれば、無効なセッションがリクエストされた際にセッションidを取得したい。

laravel 9
細かい設定はいじっておらず、デフォルトのまま


セッションタイムアウト時にタイムアウトとなったセッションidを取得したい

### 実現したいこと
レスポンスヘッダーの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に格納したい

### 実現したいこと

セキュリティ上　安全な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の対策が必要なのかアドバイスお願い致します。

## 実現したいこと
Google Cloud FunctionsでPython関数を実行しています。
別のアプリ内のイベント駆動WebhookによるPostリクエストを受信し、処理するための関数となります。

社内の脆弱性診断により、該当の関数において以下の通り診断されました。
> Missing `httpOnly` Cookie Attribute
この内容について知見がなく、調査をしていたところです。
（内容自体については理解できました。）

## 試したこと・質問事項
公式ドキュメントなど色々調べたのですが、
「Google Cloud Functionではcookieが使えない」という旨の記述も見ました。
そもそもクッキーを利用するようなことはしていないのですが、
`httpOnly`の設定は特に不要、または診断結果は無視できるものでしょうか？



Google Cloud Functions Python関数でのクッキー属性 "httpOnly" の設定

### 実現したいこと

owasp zapをローカルプロキシとして使用し、サイトにアクセスした際のsslエラーを解消したい

### 前提

テスト対象サイトはVue.jsアプリケーションをビルドしたものをNginxで構築しています。
AWSのECS上に構築しています。

### 発生している問題・エラーメッセージ
```
SSL peer rejected a handshake message for unacceptable content.

エラーコード: SSL_ERROR_ILLEGAL_PARAMETER_ALERT
```
自社サイトにアクセスした時のみ、上記エラーが発生します。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-08-17/87e5ed28-e742-4c72-9028-d1ae6b91f5a4.png)
Firefoxエラー

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-08-17/ae84f17e-a48b-4861-b6ff-4849ef833a3c.png)
Windowsネットワーク診断結果

### 試したこと
・owasp zap上でSSL証明書を作成、Firefoxに読み込み
・Firefox上でプロキシサーバとしてowasp zapを設定

owasp zapのsslエラーについて

ユーザーが任意の入力したコードを試せるような仕様にしました
evalはなにかと危険だと言われてるよなので
blob形式にしました
下記コードで起こりうる危険性を教えてください
個人的にはブラウザのコンソールと変わらない気がするのですがこういうものは、実装しないほうがいいんでしょうか

```ここに言語を入力
<script>
function a(){
let blob = new Blob([txt.value], {type: 'text/html'});
link.href = URL.createObjectURL(blob);
link.click();
URL.revokeObjectURL(link.href);
}
</script>
<textarea id="txt"><script>window.onload=function a(){alert("");}</script></textarea>
<input type="button" value="" onclick="a()">
<a href='#' id="link"></a>
```

JavaScript 下記コードはどんな危険性を孕んでますか

### 実現したいこと

Next.jsからCloudRunにPOSTしたい

### 前提

CloudRunはNode.jsで構築していて、フレームワークにExpressを使っています。
ECサイトの購入処理をCloudRunで行っています。

### 発生している問題・エラーメッセージ

```
Access to fetch at 'Cloud RunのURL' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
```

### 試したこと

以前Flask(Cloud Functions)で同様の問題に当たったときにPythonでのやり方はわかったのですが、Node.jsでのやり方がわかりません。

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

- Next.js : 13.1.1

Cloud RunでのCORSエラーの解決

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

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

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

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

###

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

Webシステムにおける認証トークンの保存先（LocalStrage・Cookie）と認証方式について

Webシステムにおける認証トークンの保存先（LocalStrage・Cookie）

## テーマ、知りたいこと
スクリーンキーボードをプログラムで操作して間接的にパスワードを入力しようとしている。

うまくいっていない。
https://teratail.com/questions/l33n6qae1s61is

>VBScriptのSendkeyじゃダメなんでしょうか？
善意での発言だろうが、そのvbsファイルが見られたらパスワードだだもれ

操作プログラムをexe化すれば難読

ところで、USBキーボードと本体との間に物理で介するキーロガーは、確かにキーボードを使わなければ剽窃を回避できるだろう

でも、Windowsの場合はキーボード入力がメッセージとしてどのプログラムにも公開されているらしい。実際にフックしてメッセージを書き換えるプログラムがある。
じゃ、「スクリーンキーボードでポチポチ」も読まれてしまうのでは？
それを防止するために「うまくいっていない」現象が発生するようにWindows10は頑張っているのではないの？仕組みは不明だが






ま、タッチキーボードだと成功するけどね


パスワード剽窃防止で

### 実現したいこと
- 自宅サーバ上のNextcloud および PhotoPrism に外出先からでもアクセスできるように、TailScale を利用したいと考えています。

### 質問①
外出先でスマホを TailScale のVPNに接続したうえで、自宅サーバの PhotoPrism とHTTP で通信する場合、どのような危険性がありますか?

※TailScale 公式の説明によると、「エンドツーエンドの通信は暗号化されているため。HTTPSにする必要はない (ブラウザの警告をなくすためにSSL化は可能)」とのことです。
https://tailscale.com/kb/1153/enabling-https/
これを読む限りは、HTTPのままでも問題ないと考えて大丈夫でしょうか…?

### 質問②
もし①のケースでHTTP通信が危険であり、HTTPSが推奨される場合、
1つのマシン上でHTTPS通信を行うアプリを2つ待機しておくことは可能でしょうか?

※現在、ラズパイ上に以下を立ち上げている状況です。
- Nextcloud ポート443 ※SSL対応済み
- PhotoPrism (Docker Composeで構築) ポート2342

⇨PhotoPrism も HTTPS接続が必要となった場合、443は使えないので、444などに割り当てることは可能でしょうか?


### 試したこと

現状として、Nextcloud にHTTPS、PhotoPrism にHTTP でそれぞれ接続できることまでは確認しました。

