サイトのスクショを信用してはいけない場合があります。
とくに金額を見せられたとき、鵜呑みにするのは注意です。
今回は、本物のサイトを使って表示を変えることができる、という話しです。
開発者ツール(デベロッパーツール)
ブラウザの標準機能に、開発者ツール(デベロッパーツール)があります。
Web開発者がサイトデザインをするときに、テストする確認用のツールです。
・Microsoft Edge では「デバイスエミュレーション」
・Google Chrome では「デバイスツールバー」
と呼んでいます。
開発者ツールでの編集は、操作しているパソコン画面上だけの状態です。
大元のサイトは触っていません。
そのため、不正アクセスでもないし、ハッキングとも無縁です。
でも、このツール、悪用することもできそうなので困ります。
開発者ツール(デベロッパーツール)を使う
では、口座の残高を変えてみます。
Edgeブラウザの「デバイスエミュレーション」で表示を変える
「F12」キーを押します。
「開発者ツール」が開きます。
ツールバーに「Select an element in the page to inspect it」ボタンがあります。
ボタンにマウスポインタを合わせると「Select an element in the page to inspect it」とポップアップが出ます。
「ページ内の要素を選択して検査」の意味ですが、「要素の選択」ボタンと呼んでいます。
そのままクリックします。
このとき「要素の選択」ボタンが青色になります。
そのままサイト上にマウスポインタを合わせると、記載された区画ごとにブルーの網かけで選択されます。
ちなみに口座残高「133,170」に合わせてクリックします。
すると、デベロッパーツールの方でも「133,170」が選択されます。
デベロッパーツールの「133,170」をクリックすると編集できます。
末尾に「,000」を入力、「133,170,000」にして「Enter」を押します。
サイトの口座残高が「133,170,000」になりました。
「F12」キーを押すと「開発者ツール」だけが閉じ、口座残高は「133,170,000」のままです。
「更新」を押すなどして、サイトを再読み込みすれば、元の表示になります。
Chromeブラウザの「デバイスツールバー」で表示を変える
「F12」キーを押してはじめます。
詳細は、Edgeブラウザとほぼ同じなので、Edgeブラウザの「デバイスエミュレーション」で表示を変える、を参照してください。
Webサーバーからページデータを受け取り、ブラウザは表示するだけ
ブラウザの役割とは、端末にWEBページを表示させ、ブラウザ上でおこなった操作の結果を出力することです。
Webサーバーから送られるページデータは、HTMLやCSS、JavaScriptなどのコンピュータ言語です。
この言語で記載された情報を、ブラウザが、テキストや見出し、画像、動画などのソースコードを読み取り、Webページとして表示させます。
ブラウザの開発者ツールでしていることは、Webサーバーから受け取ったあとの情報についての変更して確かめる操作です。
なので、元データへの影響はありません。
スクショしたサイトを見せられても信用してはいけない
ここまで紹介したように、このツールは悪用も可能です。
開発者ツールは有用ですが、悪意をもって利用されると困ります。
Webサイトの画面は編集できるので、そのページ画面やスクショを見せられても、信用してはいけないこともあります。
知っておくといいでしょう。
とくに金銭が絡むことは鵜呑みにしないように注意が必要です。
参考になれば幸いです。
