たとえば 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 が送信されていない状態です。
