QRコード表示案件にjquery-qrcode

1 QRコードを表示したいがセキュリティーに課題あり
2 シンプルが一番
3 Webはオープンソースの連携が良い

QRコードを表示したいがセキュリティーに課題あり

こんにちは、こたかです。

今日は、URLのQRコード表示について。

マニュアル資料にURLを記載する時、QRコードが欲しいことがあります。
一般的なサイトであれば、URLは公開するので、QRコード作成サイトなどを利用して生成することになるかと思いますが、
今回の課題は、「秘密のURLを、QRコード作成サイトに入力しちゃって大丈夫？」という事。

私的にはNGです。せっかく秘密にしているURLなのに、URL変換サービスにわざわざ手で入力して、もしログに取られて販売でもされたら、アタック受けてしまいます。

そこで今回は、QRコードを表示するライブラリを使って、QRコードを表示する仕組みに挑戦してみました。

シンプルが一番

htmlでjavaScriptにより簡単に表示する方法がありました。

jquery-qrcode：「https://github.com/jeromeetienne/jquery-qrcode」：MITライセンス

jquery-3.6.3.min.js：「https://jquery.com/download/」：MITライセンス

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>こたかQR表示ツール</title>
    <script src="js/jquery-3.6.3.min.js"></script>
    <script src="js/jquery.qrcode.min.js"></script>
    <script>
    //日本語は％エンコードすること
    function on_click_btn(){
        let url=$('#qr-url').val();
        let is_enabled_url_enc=$('#is_enc_url').prop('checked');
        if (is_enabled_url_enc)
        {
            url=encodeURI(url);
        }
        $('#qr-image').html('');// 消去
        $('#qr-image').qrcode(url);// QRコード表示
        $('#url-text').text(url);// 表示中のQRコードのURL
    }
    </script>
</head>
<body>
    <input id="qr-url" type="text" maxlength="1024" value='https://cotakaslog.ha-sk.jp' style='width:100%;'> </input><br/>
    <input id="is_enc_url" type="checkbox" >URLに日本語がある</input><br/>
    <button onclick="on_click_btn();">QRコード表示(漢字対応していません)</button>
    <hr />
    <div id="qr-image" style='width:120px; '></div>
    <p id="url-text"></p>
</body>
</html>

上記の内容でhtmlファイルを作成し、そのフォルダに「js」フォルダを作り、そこに「jquery-3.6.3.min.js」と「jquery.qrcode.min.js」を置きます。
あとは作成したhtmlをブラウザーで開けば変換ツールの完成です。

表示された実際のQRコード