【ICT】アカウント情報をQRコードで自動入力できるのか

「QRコードでIDとパスワードを自動入力させる？」
「サーバーとかPHPの知識が必要？」
「それって危険ではないの？」

QRコードでアカウント情報の文字列をコピーできますよ、というのが前回でした。

今回はそれさえも飛ばして、サイトにアクセスしたらすでに入力されているというものです。
いろいろ限定的な話ではありますが、やってみました。

前提条件
作り方
※試作公開の検討
WordTOMOからのお知らせ

前提条件

制作サイドには以下の条件が必要です。

難しさ　★★★★

・サーバーの準備

フロントエンド（ブラウザ側）
HTMLとJavaScriptを使用してフォームを構築。
バックエンド（サーバー側）
PHPを使用してフォーム送信を受け取る必要。

先輩

制作には、サーバーが必要でしょうね。

作り方

URLの決定とQRコードの作成

まずイメージしやすいように、アクセスするURLを書いてみます。

例
https://wordtomo.com/????/?username=user123&password=password456

赤い部分は自分のブログやページのアドレスになります。
その横の？以降にIDやパスワードの情報を追加でのっけております。
この文字列の一文をそのままQRコードにしておきます。

しかし、ブログページ（ブラウザ）側に準備がないと、ただアクセスするだけになります。

ブラウザ側でHTMLとJavaScriptの記述。

ブラウザに、投稿フォームを作成するHTMLの記述。
青色マーカー部分は自作PHPの宛先です。

<form action="https://wordtomo.com/????/????/login.php" method="post">
  <label for="username">ID:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="password">パスワード:</label><br>
  <input type="password" id="password" name="password"><br><br>
  <input type="submit" value="ログイン">
</form>

さらに、ブラウザ側で、？以降の文字列を読み込むようにJavaScriptを記述。

<script>
  window.onload = function() {
    // URLパラメータを取得
    const urlParams = new URLSearchParams(window.location.search);
    
    // IDとパスワードの入力フィールドに値を設定
    document.getElementById('username').value = urlParams.get('username');
    document.getElementById('password').value = urlParams.get('password');
  };
</script>

両方とも続けて記述すればOKです。
これでQRコードでアクセスするだけで、すでに入力されるようになります。

サーバー側のPHPの記述

ブラウザのフォームの内容「ログイン」を押すと、記載のURL（青色マーカー）に送られます。
“https://wordtomo.com/????/????/login.php“この部分ですね。
次は、このlogin.phpの処理についてです。

<?php
// 送信元の検証（不正なリクエストを除外）
if (isset($_SERVER['HTTP_REFERER']) && parse_url($_SERVER['HTTP_REFERER'], PHP_URL_HOST) !== '自分のサイトドメイン') {
    die('不正なリクエストです');
}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // POSTリクエストを受けたら無条件で成功を返す
    http_response_code(200); // 成功
    echo "ログイン成功: この画面表示によりパスワード保存ができる場合があります。";
} else {
    // POST以外のリクエストはエラー
    http_response_code(405);
    echo "無効なリクエスト";
}
?>

しむあん和尚

とりあえず「OK！」と返すだけのシステム・・・。

でも、この「OK！」がないと、パスワード保存動作をするシステムが動いてくれません。
　・iPad環境で、キーチェーンに保存できることを確認
　・Chromeでパスワード保存できることを確認
　・FireFoxでパスワード保存できることを確認

企業サイトとアカウントにおいては、自動入力はできないでしょう。
しかし、一度アカウント情報を機器に保存できれば、呼び出すことがカンタンになります。

※試作公開の検討

自動入力の展示用ページまで公開いたしました！

しむあん和尚

ただ完全な公開は、現在リスクを考えて様子を見ています。

・今回もやってみたらできるという話なのですが、安全性についての検証はされていません。
・本物のアカウント情報などを入力した場合、流出の危険があります。
・各自でサーバーを準備して、各自の責任の範囲で秘密裏に行うのが本来の考え方です。

先輩

フォームを作成して、このサイトが仕込めば、みなさんのアカウントを回収できる可能性があります！

ワーとも

AIもなるべくやめようって言ってるよ！

しむあん和尚

このサイトに悪意がなくても、他の第3者による流出の危険があるでしょうか？
詳しい方がいらっしゃいましたらコメントお願いいたします。

アカウント　QRコード　自動入力

お読みいただきありがとうございます！

WordTOMOからのお知らせ

当ブログの記事内容は、作成時点の情報に基づいています。そのため、記事が公開された後に情報が変更される場合があります。最新の情報は各自でご確認ください。
記事の内容は筆者が調査した結果に基づいていますが、必ずしも完全・正確であるとは限りません。参考情報としてご活用いただき、最終的な判断はご自身の責任で行ってください。
記事の内容に具体的な誤りや不足がある場合は、コメント欄またはお問い合わせフォームからお知らせいただければ幸いです。
当ブログをお読みいただいた評価やコメントをお寄せいただけると励みになります。以下の投票ボタンからぜひご感想をお寄せください！

●投票結果●

まだ投票がありません。