クロスドメインで認証の必要な画像を表示したい

4064 PV

たとえば https://a.example.jp/image.jpg を表示するのに認証が必要で Cookie がないとログイン画面に飛ばされるサイトの画像があって、普通にブラウザで開けば見える状態だとします。

この画像を別のサイト https://b.example.com/ で <img src="https://a.example.jp/image.jpg" height="64" width="64" alt="画像"> のように指定すると Google Chrome 31 では問題なく表示できたのですが、 Firefox 26 だと表示できません。
どうすれば Firefox でも問題なく表示できるようになるでしょうか?

現状

状況を調べてみると、Cookie が送信されていなくてログイン画面に飛ばされていて、しかも img タグに指定したサイズが無視されて高さが 0 になってしまいます。

CORS (Cross-Origin Resource Sharing) というのを設定すれば良さそうかと思って、 img に crossorigin="use-credentials" をつけてみたのですが、 Cookie は送信されないままです。

サーバー側での対応も必須なのかと思って、画像の応答には以下のヘッダーを付けるようにしたのですが、それでも変わりませんでした。

    headers['Access-Control-Allow-Origin'] = '*'
    headers['Access-Control-Allow-Methods'] = 'GET, OPTIONS'
    headers['Access-Control-Allow-Headers'] = '*'
    headers['Access-Control-Max-Age'] = "60"

Firefox の開発ツールのネットワークで見た感じだと OPTIONS でのリクエストは送っていないようだったので、とりあえず画像の応答に限定して Rails の after_filter で設定しました。

画像を直接開いてリロードするとちゃんとヘッダーが設定されているのは確認しています。

この問題は開発環境の localhost:3000 と localhost:3001 のようなドメインだと起きなかったので、動作確認方法ももうちょっとなんとかしたいです。

2014-01-12 追記

Firefox 22 から「サードパーティ Cookie の保存」は「常に拒否」がデフォルトだと思っていたのですが、 Firefox 26 ではデフォルトは「常に許可」になっているようで、新しいプロファイルを作って動作確認したところ問題なく Cookie が送られていて表示できました。

表示できないと言われたら設定を変更してもらうのが一番無難なのでしょうか。

さらに追記

簡単に試せるように rack でサンプルを作ってみました。
https://gist.github.com/znz/8385630#file-config-ru
rackup config.ru で起動して http://localhost:9292 を開くと 127.0.0.1.xip.io のサブドメインを使って試せます。
iframe で OK と出てくるのは大丈夫な状態で NG と出てくるのは Cookie が送信されていない状態です。

znz

438

● 3 ● 5

2014/01/10 19:37 投稿

2014/01/13 00:08 編集

履歴 (2)

回答

評価順新着順更新順

少し試してみましたので動作確認の参考までに。
大した情報ではないですがコメントでは書ききれないのでこちらに。

適当なhtmlファイル作って bitbucketのプライベートリポジトリに画像おいて、Firefoxにrawとして表示させてみました。(htmlファイルはローカルマシンのwebサーバー（pythonのSimpleHTTPServer））。

<html lang="ja">
<body>
    <img src="https://bitbucket.org/username/reponame/raw/～" />
</body>
</html>

Firefoxのバージョンは26で、これためす直前にインストールしました。
とりあえずログイン前は画像が表示されないことを確認して、ログイン後に再表示したところ再度表示されています。

ブラウザの画像キャッシュにならないよう、履歴を削除したのちオプションのプライバシーの設定を変更しています（関係ないけどこの状態でも履歴削除のリンクは出ていてほしい・・・）。

履歴
- Firefoxに [ 記憶させる履歴を詳細設定する ]
  - 常にプライベートブラウジング → off
    - 表示したページとファイルのダウンロードの履歴 → off
    - 検索やフォームの入力履歴を記憶させる → off
    - サイトから送られてきたCookieを保存する → チェック
    - ～以下デフォルトのまま～

ログインしてFirefoxを終了、Firefox起動しなおして http://localhostのhtmlファイルを開いてみました。再度画像を取得しに行っているような挙動だったので、このケースでは再現しないようでした。
ただし相手がhttpsなのでそのあたりでも違うのかもしれません。

ちなみにhostsのループバックアドレスに適当な名前追加してlocalhost:3000と追加した名前:3001でやってみた場合も再現はしないんでしょうか？（またはそうすること自体が何かの理由で大変？）

flied_onion

5599

● 1 ● 3 ● 5

2014/01/11 14:17 投稿

編集履歴 (0)

追記に書いた設定がデフォルトだと思っていたのが一番の原因でした。古いニュースに書いた情報を鵜呑みにするだけじゃなくて、自分で確認も必要ということがよくわかりました。 - znz 2014/01/12 16:12
「サードパーティ Cookie の保存」を「常に拒否」にしているときにどうすれば良いのか情報があればよろしくお願いします。 - znz 2014/01/12 16:13
「サードパーティ Cookie の保存」を「常に拒否」にした場合にでも強制的に書き込む技術の公開は無理かと。（脆弱性をついての攻撃になるので） - alice-asahina 2014/01/15 11:31