PHPで発行したトークンをJavaScriptの変数に代入するとディベロッパーツールのSourcesで見えてしまう

Question

質問失礼します。

ボタンをクリックするとデータベースのあるカラムの数字がインクリメントされていくプログラムを作っています。
下記のように作っています。

index.php

<button id="fini" data-clickcount="<?=$fini?>">クリック回数：<?=$fini?></button>

$finiはデータベースから取得した整数を入れています。

index.phpに記述しているScript

$('#fini').on('click', function(){
    var token = "<?php echo $token;?>";
    $.ajax({
        url: "./count-up.php",
        type: "POST",
        data: {"token":token}	
    }).done(function(){
        var fini = document.getElementById("fini");
        var number = fini.dataset.clickcount;
        newNumber = parseInt(number) + 1;
        fini.setAttribute('data-clickcount', newNumber);
        fini.textContent="クリック回数：" + newNumber;
    })
});

var token = "<?php echo $token;?>";の部分で見えてしまいます。

count-up.php

$token = $_POST['token'];
if($token == "" || $token != $_SESSION['token']){
    header("Location: index.php");
    exit();
}
//以下DBのカラムをインクリメントをするコード

count-up.phpを直接検索された時の為にif($token == "" || $token != $_SESSION['token'])を設定しています。
上記を設置した経緯は、
count-up.phpを直接検索された場合、indexにリダイレクトさせようと思い、POSTが空ならと思いましたが、それだとPOSTに適当な値が入っていてもif文を通過出来てしまうため、ランダムな値をSESSIONに入れそれが一致していなければその場合もリダイレクトが出来ると思って使いました。

しかし上記やり方だとトークンがディベロッパーツールのSourcesで見えてしまいます。
それは見えたトークンと一緒の値をPOST送信出来てしまうのでは？と思いました。

これを見えなくするには何か良い方法はないでしょうか？
または、count-up.phpを直接検索された時の対処法で他に何かあるのでしょうか？

Comments

[m.ts10806]

何のためにトークンを使っているかはきちんと把握されたうえですよね？

[ringoame49]

今回は初めにcount-up.phpを直接検索された場合、indexにリダイレクトさせようと思い、POSTが空ならと思いましたが、それだとPOSTに適当な値が入っていてもif文を通過出来てしまうため、ランダムな値をSESSIONに入れそれが一致していなければその場合もリダイレクトが出来ると思って使いました。

[m.ts10806]

トーク使いたい背景や前提として質問本文に追記された方が良いかと思います。

[ringoame49]

かしこまりました！

Answer 1

これを見えなくするには何か良い方法はないでしょうか？

実質的にはありません。どれだけ隠そうとしても、「Network」で送信しているところを確認すればすぐに確認できます。

または、count-up.phpを直接検索された時の対処法で他に何かあるのでしょうか？

「count-up.phpを直接検索された」だけであれば、トークンはわからないので何も起きません。

どれだけ守りたいかを決めることが先決です。

Comments

[ringoame49]

ご回答ありがとうございます。

確かに直接検索されただけではトークンはわからないので問題ないですね。

ただ今回のプログラムを作っていて思ったのですが、JavaScriptでPOSTされたトークンが分かってしまったら
SESSIONに入れたトークンと簡単に一致させてしまえるのが問題かな？と思いました。

[maisumakun]

それが、どれほどの「問題」なのかが、自分には把握できません。

本文にあるように、「どれだけ守りたいか」によって、取るべき対策は違ってきます。

[ringoame49]

＞それが、どれほどの「問題」なのかが、自分には把握できません。

見えるということは偽装できるということなのかな？と思っています。

守りたい内容はcount-up.phpを直接検索された場合index.phpにリダイレクトし、データベースが更新されないことです。

[maisumakun]

ページを開いて送信すればトークンは判明しますが、それを使って何度も送信する…というようなシチュエーションは対策が必要でしょうか？

[maisumakun]

「count-up.phpを直接検索された場合」はトークンが入らないので、現状で問題ありません。

[ringoame49]

＞「count-up.phpを直接検索された場合」はトークンが入らないので、現状で問題ありません。
でしたら確かに問題ないですね。

何度もコメントありがとうございました。

Answer 2

これを見えなくするには何か良い方法はないでしょうか？

無いです。

または、count-up.phpを直接検索された時の対処法で他に何かあるのでしょうか？

質問中にある

ランダムな値をSESSIONに入れ

という処理を
count-up.php
でトークンの認証が終わったあとに再度実行し(＝トークンは一度しか使えないようにする)、JavaScript側の値も更新すれば、仮に直接POSTされたとしても問題は無いはずです。

フォームのワンタイムトークンはCSRF対策としてよく使われますのでPHP CSRF 対策 ワンタイムトークンあたりで調べると原理が把握できるかと思います。

原理を把握して通常の画面移動を伴うフォームでサンプルを作ってみてから(ライブラリも多くあるので、活用すると楽です)、現在のアプリケーションに組み込む検討をすることをお勧めします。

---

要件をもっと緩くして良いのであれば、サーバサイドで管理している値だけでアクセス制御することは可能です。
この場合はトークンは必要ありません。

例えば、

1. アクセスしたページや時間をセッションに等に全て記録する
2. count-up.phpにアクセスした時の直近のアクセス履歴を調べ、index.phpにアクセス直後、もしくはindex.php→count-up.php(任意の連続した回数)の後にアクセスしている時だけカウントアップを許可する

という様な感じです。

Comments

[ringoame49]

＞count-up.phpでトークンの認証が終わったあとに再度実行し(＝トークンは一度しか使えないようにする)、JavaScript側の値も更新すれば、

上記の方法を試してみます。

この度はご回答ありがとうございました。