BASIC認証をかいくぐってCORSしたい

Question

以下の質問を読んでて、こうやればできるのでは？と思ってたことを
本当にやったら、できなかったので改めて解決策を質問させてください
元質問

##概要

BASIC認証配下のファイルのテキストデータを外部ドメインから取得したい

---

レスポンス側サーバー：Apache2.x (SSL)

root/

├ testBASIC

   ├ .htaccess
   ├ .htpasswd
   ├ secret.data

リクエスト側サーバー：Apache2.x

root/

├ testFolder

   ├ indexBASIC.html

---

.htaccess

<Files ~ "^.(htaccess|htpasswd)$">
deny from all
</Files>
AuthUserFile /home/users/0/＊＊＊＊/web/testBASIC/.htpasswd
AuthGroupFile /dev/null
AuthName "Please enter your ID and password"
AuthType Basic
require valid-user
Header append Access-Control-Allow-Origin: http://[リクエスト側ドメイン].jp
Header append Access-Control-Allow-Headers: authorization

indexBASIC.html

      $.ajax({
        beforeSend: function (xhr) {
            xhr.overrideMimeType('text/html;charset=UTF-8');
            xhr.setRequestHeader ("Authorization", "Basic " + btoa('myUser:myPass'));
        },
        url: 'https://[レスポンス側ドメイン]/testBASIC/secret.data',
        type: 'GET'
     }).done((data, textStatus, jqXHR) => {
            console.log(data);
     }).fail((jqXHR, textStatus, errorThrown) => {
            console.log('エラーは：' + jqXHR.status);
     })

ブラウザで直に'https://[レスポンス側ドメイン]/testBASIC/secret.data'にアクセスして
ID/Pass入力すれば問題なくデータが表示されます
しかしリクエスト側サーバーのindexBASIC.htmlにアクセスした場合のhttpヘッダの様子は
以下の画像のになります

リクエストヘッダに"Authorization"を追加しているので
preflightが飛んでると思うのですがその時点でアウトになってしまってるようで
ajaxのfailハンドラの出力は”エラーは0”となってて
本リクエストの送信はされていないようです

レスポンス側の.htaccessにヘッダに追加すればいいかもと思って
上記のようにしてみてるのですが401となってしまいます・・・
どのようにすれば無事にデータファイルにアクセスできるでしょうか？

Comments

[otolab]

元記事でwtokunoさんが書いているようにmethods(optionsを追加)、allow-headers(authorizationを追加)などの調整が必要ですね。
> サーバ側でプリフライトリクエストを適切に処理し、
> Access-Control-Allow-Methods、Access-Control-Allow-Headersなどのヘッダを含む
> 適切なレスポンスを返してください。

[Fujiman]

ありがとうございます。
実は上記のhtaccessの記述が「プリフライトを適切に処理」だと思っていたのですが
やはり蹴られてしまいます。この状態で、GoogleChromeでアクセスすると
以下のようなエラーメッセージとなりカスタムのヘッダのことより
Allow-Originのヘッダが返ってきていないというものになってしまってます。
上記の記述方法ではプリフライトの段階でのレスポンスヘッダに含めることが
できていないのでしょうか？
Chromeコンソールのエラーメッセージ
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Answer 1

プリフライトを飛ばしてしまうと、プリフライトリクエストには認証情報は乗らないので、プリフライト自体がBASIC認証で弾かれてしまいます。なので、プリフライトが飛ばないようにリクエストを組む必要があります。
そのためには、Authorizationヘッダを手でつけるのではなく、XMLHttpRequestのオプションでBASIC認証のIDとパスワードを指定します。jQueryの場合は、プロパティusernameおよびpasswordを指定します。
これに加えて、withCredentialsプロパティを指定する必要があります。

 $.ajax({
        beforeSend: function (xhr) {
            xhr.overrideMimeType('text/html;charset=UTF-8');
            // xhr.setRequestHeader ("Authorization", "Basic " + btoa('myUser:myPass'));  // これは不要
        },
        username: 'myUser',   // これと
        password: 'myPass',   // これを追加
        xhrFields: {
           withCredentials: true    // これも追加
        },
        url: 'https://[レスポンス側ドメイン]/testBASIC/secret.data',
        type: 'GET'
     }).done((data, textStatus, jqXHR) => {
            console.log(data);
     }).fail((jqXHR, textStatus, errorThrown) => {
            console.log('エラーは：' + jqXHR.status);
     })

これだけだとうまくいきません。withCredentialsプロパティをtrueにした場合は、下記のようにAccess-Control-Allow-Credentialsとしてtrueを返す必要があります。一方、Access-Control-Allow-Headers: authorization は必要ありません。

## .htaccess  途中から
Header append Access-Control-Allow-Origin: http://[リクエスト側ドメイン].jp
## Header append Access-Control-Allow-Headers: authorization  ## これはなくてもよい
Header append Access-Control-Allow-Credentials: true

Comments

[Fujiman]

ありがとうございます！
ドメイン越しにデータの取得ができました。

PreFlightの時点で蹴られている理由がわからずお手上げ状態でしたが
その時のリクエストには認証情報が乗らないというのにはびっくりしました。
たしかに、まだOKかNGかわからない段階で認証情報も一緒に渡すのは不合理かもしれません。

またあわせて「プリフライトが飛ばないようにリクエストを組む」方法も詳しく教えていただき
たすかりました。おそらくこの件も自分で解決できるかどうかわからないものでした。

[Legged8678]

(Twitterでは失礼いたしました)

「プリフライトを飛ばしてしまうと、プリフライトリクエストには認証情報は乗らないので、プリフライト自体がBASIC認証で弾かれてしまいます。なので、プリフライトが飛ばないようにリクエストを組む必要があります。」と記載がありますが、
ajaxの'username', 'password' を利用したBASIC認証が存在するページへのリクエスト送信の場合でも、`withCredentials`をtrueにする必要はあるのでしょうか？
また、上記前提条件においては資格情報の送信に当たらず、Access-Control-Allow-Credentialsをtrueに設定する必要もないのではないかと考えています。

[ockeghem]

MDNの以下のページには、以下のように記載されています。

> XMLHttpRequest.withCredentials プロパティは論理値で、サイト間の Access-Control リクエストが Cookie、認証ヘッダー、 TLS クライアント証明書などの資格情報を使用して行うべきかどうかを示します。

日本語訳だと「認証ヘッダー」となっていてわかりにくいですが、英語版だと「credentials such as cookies, authorization headers or TLS client certificates」となっていて、Authorizationヘッダの場合もwithCredentialsプロパティが必要となっています。実験してみても、.withCredentials=trueがあればAuthorizationヘッダが送信され、そうでない場合、Authorizationヘッダは送信されません。
また、同様の理由で「Access-Control-Allow-Credentialsをtrueに設定する必要」があります。
信じられないようでしたら、ご自身の環境で試して見られたらと思います。私は、この機会にあらためて試しました。