Nuxtでhtaccess, htpasswd作成サービスを作ってみる

はじめに

業務でたまに使うBasic認証ですが、毎回htaccessの構文も、htpasswdのコマンドも忘れるのでまとめて作成出来るオンラインツールを作ってみました。

その時にハマったことや学びの備忘録です。

作っていく

必須要件

• htpasswdを作成できる
  • セキュリティは気にしない。（業務で使うのも、「誰に見られても問題ないけど、積極的に全世界に公開したくない、IDパスワード知ってる人だけ見れればいい情報」にかける程度の用途なので）
  • ランダムなパスワードを生成できる。
    (こっちの記事の方法を使う。)
• htaccessを作成できる
  • 構文を確かめたいだけなので初期値に入れておく。
    (正直入力フォームは飾り)

できたもの

出来上がったもののGitHubソースがこちらにあります。

API等は使っていないので、パンくずコンポーネント(AtomBreadcrumb )を削除すればNuxt環境ならコピペでそのまま動かせると思います。
(レイアウトはtailwind CSSを使用しているので、ライブラリが入ってない場合レイアウト崩れは起きますが利用には問題ないはず。)

解説

javascriptでSHA1ハッシュ化とbase64エンコード

BASIC認証ではパスワードをハッシュ化します。
最初、流石にハッシュ化はAPI経由でgolang側でやるかと思っていたのですが、なんとググったらjavascriptでSHAハッシュ化できます。

さらに、BASIC認証はパスワードをbase64でエンコードするよう定められているので、ハッシュ化したデータをbase64でエンコードしてhtpasswdの中身の作成は完了です。

以下のようなコードで作成できます。

const password = "TEST"; // パスワードにする文字列
const passwordUint8 = new TextEncoder().encode(password) // (utf-8 の) Uint8Array にエンコードする
const hashBuffer = await crypto.subtle.digest('SHA-1', passwordUint8) // パスワードをハッシュ化する

const uint8Array = new Uint8Array(hashBuffer)
const hash = uint8Array.reduce(
    (binaryString, uint8) => binaryString + String.fromCharCode(uint8),
    '',
)
console.log('loginId:{SHA}' + btoa(hash))

※ BASIC認証でSHA1を使うときは、IDと：の後に「{SHA}」を付ける必要あり。

注意点

暗号化にはSHA1を使ってます。(引数を変えればちゃんとSHA256なども使えます。)
これはApacheのBASIC認証がSHA1にしか対応していない？と思われるためです。
(自分のApacheの設定問題かもしれませんが、SHA256にしたら認証通らず。)

自分の用途の場合、セキュリティはあまり意識する必要がないので気にせずSHA1にしましたが、
SHA1には脆弱性がありますので、もしセキュリティ用途でBASIC認証を使おうとしているならSHA1を使うのは非推奨です。

とはいえ、BASIC認証自体、設定をいれないとブルートフォース攻撃で突破しやすい認証方式です。
(モジュールを使えば認証ごとに待ち時間を設けたりも出来るみたいですが、そこまで頑張るならちゃんとフォーム認証作るとかやった方が却って手間がかからない気がします。)

セキュリティを強く意識しない用途でゆるく使う程度がいい気がします。

おわりに

BASIC認証は色々意識しないといけない問題もありますが、簡単かつ短時間で設定できてクローラーを弾いたり、社外秘って程ではない情報を関係者に共有したり(身内のBBQ写真とか)出来るので、業務等でたまに使う人はそこそこいるんじゃないかなと思います。

たまに故に設定方法やコマンドを忘れているので、ツールでサクッと作って工数短縮できればと思い作ってみました。

参考サイト

• SubtleCrypto: digest() メソッド
• JS/TSでバイナリ⇔BASE64はライブラリを使わなくても簡単に出来る