Zenn
🐕

Apacheを導入し、Basic認証を設定した後、3通りの方法で認証する(FetchAPI,cURL,URL直入力)

2024/10/26に公開
Apache
basic認証
tech

Basic認証を試す

Basic認証は、シンプルで手軽な認証方式として、特に開発環境やテスト環境での一時的なセキュリティ対策として広く利用されています。本記事では、Basic認証の導入手順から実際の認証の実施までを解説します。また、筆者の検証中に発生した問題やその解決策についても紹介します。

導入

  1. サーバ作成
    検証時のスペックは基本デフォルトです。
    入力が必要な項目は以下を設定しています。

    名前: test
AMI: (デフォルト)Amazon Linux 2023 AMI 2023.6.20241010.0 x86_64 HVM kernel-6.1
インスタンスタイプ: (デフォルト)t2.micro
キーペア名: 1026test.pem
パブリック IP の自動割り当て: 有効
任意の場所からのSSHトラフィックを許可: checked
インターネットからの HTTP トラフィックを許可: checked

  2. サーバ接続
    ssh -i 1026test.pem ec2-user@<パブリックIP>
    (EC2インスタンスコネクトやセッションマネージャなどなんでもよいです)

  3. Apache導入
    sudo yum install httpd -y

  4. Apache:Basic認証設定

    • sudo vi /etc/httpd/conf/httpd.conf
      (ファイルの末尾に以下を追加します)
      <Directory "/var/www/html/">
AuthUserFile /etc/httpd/conf/.htpasswd
AuthGroupFile /dev/null
AuthName "Basic Auth"
AuthType Basic
Require valid-user
</Directory>
    • Basic認証用ユーザ・パスワード追加
      sudo htpasswd -c -b /etc/httpd/conf/.htpasswd user1 pass
      sudo htpasswd -b /etc/httpd/conf/.htpasswd user2 pass@@
    • HTMLページ作成
      sudo vi /var/www/html/index.html
      <h1>var www html</h1>
    • Apache起動
      sudo systemctl start httpd

  5. 確認

    • ブラウザのURLにhttp://<パブリックIP>を入力すると、認証画面が表示されます
    • 以下の認証情報を入力すると、HTMLページが表示されます
      ユーザ名: user1
      パスワード: pass

      Apache,Basic認証の導入は以上です。

3通りの方法で認証を実施

  1. ブラウザにURL直入力
    http://user1:pass@<パブリックIP>/
    http://user2:pass%40%40@<パブリックIP>/
  2. コンソールでcurlコマンドを実行
    • curl(-u)
      curl -u user1:pass http://<パブリックIP>/
      curl -u user2:pass@@ http://<パブリックIP>/
    • curl(-H)
      curl http://<パブリックIP>/ -H "Authorization: Basic $(echo -n 'user1:pass' | base64)"
      curl http://<パブリックIP>/ -H "Authorization: Basic $(echo -n 'user2:pass@@' | base64)"
  3. ブラウザのコンソールでFetchAPIを実行
    fetch('http://<パブリックIP>/', {
    method: "GET",
    headers: {
        "Authorization": "Basic " + btoa("user1:pass")
    }
});

    fetch('http://54.150.239.232/', {
    method: "GET",
    headers: {
        "Authorization": "Basic " + btoa("user2:pass@@")
    }
});

以上が3通りの認証方法になります。

遭遇したエラーと解決方法

  1. レスポンスが403になる
    Apacheがデフォルトページのレスポンスコードを403にしているためでした。
    /var/html/index.htmlを作成すると、レスポンスコードが正常を表すものになります。
    設定ファイル: /etc/httpd/conf.d/welcome.conf
    <LocationMatch "^/+$">
Options -Indexes
ErrorDocument 403 /.noindex.html
</LocationMatch>
  2. FetchAPIでCORSが返ってくる
    javascriptでブラウザが表示しているURL以外へアクセスしようとすると、chromeなどほぼすべてのブラウザがブロックします。そのため、今回の例でいうと、新しいタブを開いてFetchAPIを実行してもCORSエラーになります。
    このブラウザの仕様下でFetchAPIを動かすには一度ブラウザでBasic認証を行い、その後キャッシュを消して実質ログアウトを行い、その後同じブラウザのコンソールでFetchAPIを実行する必要があります。
    上記手順を踏む必要があるため、基本的にはFetchAPIで認証することはできないのではないかという気がします。
  3. パブリックIPを入力しても、BasicHTMLページが表示できない
    https://<パブリックIP>にアクセスしていたためでした。
    以下のオープンアドレスをクリックすると、httpsにアクセスします。
  4. ブラウザ直入力の場合認証が通らない
    パスワードにURLで特別扱いされる文字が含まれていたためでした。
    URLエンコードを行う必要があります。
    今回の例でいうと、
    http://user2:pass@@@@<パブリックIP>/
    ではアクセスできなくて、
    http://user2:pass%40%40@<パブリックIP>/
    ならアクセスできます。

参考サイト

https://zenn.dev/sway/articles/aws_publish_apache
https://qiita.com/leomaro7/items/15c7be2c3a4f2ac29e4b
https://takagi.blog/fetch-api-with-basic-authentication-in-javascript/

Discussion