WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： JQ
カテゴリー： プログラム >JavaScript

Webサイトを制作するお仕事をしていると、必ず公開前にお客さまに確認をしてもらうというステップがあります。

そのときは、テストサーバにデータをアップロードし、一般の方の目に触れないように「パスワード」を設定することがあるかと思います。

そのとき、「password」や「12345678」など、安易に推測できてしまうパスワードを設定してしまっていたりしませんか？

今回は、ブラウザに登録しておけば、一発でランダムなパスワードを生成できるブックマークレット機能をご紹介します。

「ブックマークレット」とは？

ブックマークレット (Bookmarklet) とは、ユーザーがウェブブラウザのブックマークなどから起動し、ウェブブラウザで簡単な処理を行う簡易的なプログラムのことである。 携帯電話のウェブブラウザで足りない機能を補ったり、ウェブアプリケーションの処理を起動する為に使われることが多い。
参照：ブックマークレットの登録方法 – Qiita

もっと簡単に言うと、「ブラウザのブックマークにJavaScriptを登録しておくことができ、ワンタッチで起動ができる」という機能のことです。

この「ブックマークレット」を使って、どのページにいても、一発でパスワードが生成できるようにします。

登録方法

ここからは実際の登録方法を説明します。（Google Chromeを例に説明します。）

1.任意のサイトのブックマークを登録する

まず最初に、ブックマークレットの起動をするためのボタンを作成するため、どのサイトでも良いのでブックマークバーにブックマークを追加します。

2.URL部分を編集

登録したブックマークのボタンを右クリックし、「編集」メニューをクリックします。

すると、URLを変更することができるので、この部分にパスワードを生成するためのJavaScriptを記述します。

記述する内容は以下のとおりです。

javascript: var l = 8;
var c = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!{}$#&()._-+%,";
var cl = c.length;
var r = "";
for (var i = 0; i < l; i++) {
	r += c[Math.floor(Math.random() * cl)]
}
alert(r);

ですが、ブックマークレットのJavaScript中に改行は入れることができないので、全て改行をなくし1行にします。
それが下記になりますのでこちらをコピーしてください。

javascript:var l=8;var c="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!{}$#&()._-+%,";var cl=c.length;var r="";for(var i=0;i<l;i++){r+=c[Math.floor(Math.random()*cl)]}alert(r);

これだけで、パスワードをランダムに生成するブックマークレットの追加が完了です。

この状態で、ブックマークバーのボタンをクリックすると

このようにアラートの画面にランダムに生成されたパスワードが表示されますので、この部分をコピーして使用すればOKです。

ブックマークの名前も必要に応じて「パスワード生成」などと変更しておくと、クリックしたときの機能がわかりやすくて便利です。

ちなみに、上記のJavaScriptでは8文字の半角英数（大文字・小文字含む）と記号がランダムに含まれたパスワードが生成されますが、はじめに書かれている

var l=8;

こちらの「8」の部分の数字を変更すると生成する文字数を変更することができますので、必要に応じて変更して登録してみてください。

補足：よく利用されるBASIC認証ですが、こちらはパスワードは8文字までしか有効になりません。仮に9文字以上のパスワードをBASIC認証に設定しても、8文字目以降の文字は一切無視されてしまいますので、ご注意下さい。

まとめ

公開前のWebサイトをパスワードをかけずにアップロードしたり、安易に推測できてしまうパスワードで公開をすることは非常に危険です。

最低限のセキュリティは、しっかり考慮してお客さまの大切な情報を守り、サイト構築を進めていきましょう。