Q&A
コンソールからdocument.querySelector("#submit").click()によるクリックが行われたか、
ページ内からボタンをクリックしたか判定したく下記コードを書きました
ページ内からボタンをクリックしたかの判定はマウス座標がボタン内にあるかで判定します
私的には完全なロジック（自己満足できた）なつもりですが、
プロの方から見てどうなのでしょうか
穴などあればご意見いただければ幸いです
<script> window.onload=function(){ let submit_button=document.querySelector("#submit"); clientRect = submit_button.getBoundingClientRect() ; x = window.pageXOffset + clientRect.left; y = window.pageYOffset + clientRect.top; xx=x+submit_button.clientWidth; yy=y+submit_button.clientHeight; } function submit_event(){ if(event.clientX>=x&&event.clientX<=xx&&event.clientY>=y&&event.clientY<=yy){ alert("ページ内からクリック"); }else{ alert("コンソールから実行"); } } </script> <input id="submit" type="submit" onclick="submit_event()">
回答2件
#1
総合スコア143011
投稿2023/03/11 04:13
コンソールからdocument.querySelector("#submit").click()によるクリックが行われたか、ページ内からボタンをクリックしたか判定したく
何を目的としてそのようなことをやっているのでしょうか？
少なくとも、本気になった攻撃者に対しては、ブラウザサイドで実行されるJavaScriptで行われる処理を隠蔽・防御することは困難もしくは不可能です。
#2
総合スコア18091
投稿2023/03/12 06:14
判定ロジック上の落とし穴
- Google Chrome 111.0.5563.65でsubmitボタンの下端ぎりぎりをクリックすると「コンソールから実行」がalertされます。
- キーボード操作でsubmitボタンをクリックすると、「コンソールから実行」がalertされます。
- コンソールで下記コードを実行すると「ページ内からクリック」がalertされます。
javascript
1document.querySelector('#submit').dispatchEvent(new MouseEvent('click', { 2 clientX: x, 3 clientY: y 4}));
自由と制約
セキュリティ上の制約を除いて、Web制作側からブラウザに制約を設ける機能は基本的に実装できないと思った方が良いでしょう。
ユーザの自由な行動を阻害しないようブラウザは設計されています。
コンソールから実行できないようにするのではなく、コンソールから実行されても問題がないコードを書くのが正攻法と考えます。
関連した質問
Q&A
asp.net core で input type="file" の選択内容を保持する
Q&A
ハンバーガーメニューの挙動について（transitionが、もとに戻る時には適応されない）
Q&A
spring bootで新規登録機能を作成したい。
Q&A
なぜconstを使っているのかわかりません
Q&A
jQueryで条件を満たしてないように見えるのに発火してしまう。
Q&A
ボタンをクリックした時に、画面いっぱいにグレーのdivを透かして表示させた時、それ以降ボタンが押せなくなる。
Q&A
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。