クロスドメインでBasic認証を自動ログインさせるメモ

あまり無いと思いますが、クロスドメインでベーシック認証をする必要があったので、
忘れないようにメモしておきます。

仕組みとしては以下のイメージ。

クライアント(表示元)にiframeを埋める。
iframeのsrcにベーシック認証先のサーバーに配置したcgiファイルを指定する
cgiでクライアント(表示元)のjsを呼び出す。
クライアント(表示元)のjsでベーシック認証を行う。

※ 手順3のcgiでベーシック認証を行っても良いかも

CGIを追加

/etc/httpd/conf/httpd.confに以下を追加。

ScriptAlias /cgi-bin/ "/var/www/cgi-bin/"

<Directory "/var/www/cgi-bin">
   AllowOverride None
   Options None
   Order allow,deny
   Allow from all
</Directory>

/var/www/cgi-binにcgiファイルを配置。

vi /var/www/cgi-bin/authentication.cgi

中身はこんな感じ。

#!/usr/bin/perl --
print "Content-type: text/html\n\n";
print "<html><head>\n";
print "<script type=\"text/javascript\" src=\"http://hoge.co.jp/authentication.js\"></script>\n";
print "</head></html>\n";
exit;

該当のcgiファイルの権限を変更。

chmod 755 authentication.cgi

クライアント(http://hoge.co.jp)にjsフィアルを用意。ベーシック認証用のスクリプトを用意する。 ※第3引数のasyncはtrue (非同期) or false (同期)は要件によって。

(function () {
  const xhr = new XMLHttpRequest()
  xhr.open("GET", "http://fuga.com",
    false, "user", "password")
  xhr.send(null);
}());

ただし、上記だと通信内容にログイン情報が出てしまうので、リクエストヘッダーのAuthorizationを利用することで少し隠蔽することができます。

(function() {
  const xhr = new XMLHttpRequest()
  const authorizationBasic = window.btoa('user' + ':' + 'password')
  xhr.open('GET', 'http://fuga.com"', false)
  xhr.setRequestHeader('Authorization', 'Basic ' + authorizationBasic)
  xhr.send(null)
})()

なにかお手伝いできることがあればご連絡ください。

お問い合わせはこちらから

※Googleフォームが表示されます

クロスドメインでBasic認証を自動ログインさせるメモ

CGIを追加

関連記事