開発環境やステージング環境でBasic認証を設定することは一般的な practice ですが、外部ファイルの読み込みテストなどで一時的に解除した後、そのまま解除状態になっているケースがあります。このような事態を防ぐため、Basic認証の状態を視覚的に確認できる仕組みを実装してみましょう。

実装のポイント

  1. Basic認証の状態確認
  2. 視覚的なフィードバック
  3. 設置・削除の容易さ
  4. パフォーマンスへの配慮

コード実装

(function () {
  // スタイルの定義と追加
  const STYLE = document.createElement('style');
  STYLE.textContent = `
    .auth-status {
      position: fixed;
      z-index: 100000;
      top: 0px;
      right: 0px;
      border-radius: 0px 0px 0px 8px;
      padding: 4px 1.5pc;
      line-height: 1;
      font-size: 14px;
      white-space: nowrap;
      background: #49B8FD;
      color: #FFF;
      display: none;
    }
  `;
  document.getElementsByTagName('head')[0].appendChild(STYLE);

  // Basic認証の確認関数
  function checkBasicAuth() {
    document.getElementsByTagName('body')[0].insertAdjacentHTML(
      'afterbegin',
      '<div id="authStatus" class="auth-status">Basic認証設定中</div>'
    );

    fetch(window.location.href, {
      method: 'HEAD'
    })
      .then(response => {
        const authHeader = response.headers.get('WWW-Authenticate');
        if (authHeader && authHeader.toLowerCase().startsWith('basic')) {
          document.getElementById('authStatus').style.display = 'block';
        }
      })
      .catch(error => console.error('認証確認エラー:', error));
  }

  // ページ読み込み時に実行
  window.addEventListener('load', checkBasicAuth);
})();

実装の解説

1. コードの構造

  • 即時実行関数でラップすることで、グローバルスコープを汚染しない
  • スタイルを動的に追加することで、別ファイルの読み込みを不要にする
  • insertAdjacentHTML を使用して効率的にDOM要素を追加

2. スタイリングの工夫

  • position: fixed で画面右上に固定表示
  • z-index: 100000 で最前面表示を保証
  • 左下のみ角丸にすることで視認性を向上
  • white-space: nowrap でテキストの折り返しを防止
  • 明るい青色の背景で警告的かつ目に優しい配色

3. Basic認証の検出

  • fetch APIを使用してヘッダー情報を取得
  • WWW-Authenticate ヘッダーの存在とその値を確認
  • エラーハンドリングも実装

使用方法

  1. 上記のコードを auth_status.js として保存
  2. HTMLファイルの head タグ内で以下のように読み込む
<head>
  <!-- Basic認証の状態を表示する -->
  <script src="/auth_status.js"></script>
  <!-- 他のhead要素 -->
</head>

運用上の注意点

  • プロダクション環境にデプロイする前に、このスクリプトを削除することを忘れずに
  • デプロイメントチェックリストに「Basic認証状態確認スクリプトの削除確認」を追加することを推奨
  • 開発チームで認証状態の視覚的な確認を習慣化

メリット

  1. 視覚的な確認: Basic認証の状態が一目で分かる
  2. 簡単な実装: 一つのJavaScriptファイルで完結
  3. 軽量: 必要最小限のコードで実装
  4. 保守性: コードの追加・削除が容易

まとめ

Basic認証の状態を視覚的に確認できる仕組みを導入することで、認証設定の管理が容易になります。特に複数の環境を扱う開発プロジェクトでは、このような視覚的なフィードバックが重要です。

本実装は必要最小限のコードで効果的な機能を提供し、開発環境での運用をより確実にするツールとして活用できます。