[Firefox]一部の接続だけが暗号化されています

Read More

HTTPSの暗号化についてです


--
私が普段使ってるブラウザはFirefoxですがこのブラウザ、
HTTPSで通信を行っていると画面の右下に南京錠のアイコンが表示されます。

HTTP時


HTTPS時



--
でもHTTPSの時にも稀にこんなアイコンになったりすることがあります。



これはページの一部がHTTPSになってないよっていうアラートです。
つまりセキュアが確保できてないって言われてるわけで。


この時ページの詳細を見ると、
技術情報
一部の接続だけが暗号化されています
表示しているページの一部はインターネットに転送される前に暗号化されていません。
暗号化せずにインターネットに送信された情報は他人に傍受される可能性があります。

てメッセージが確認できます。


--
自分が手がけたサイトでもこのアラートアイコンが出る時がありました。
全てのHTTPS対策を行っているページで、です。


そしてやっかいなことに、
再現しようにも滅多に再現できなくて原因がずっと特定できずじまいでした。
だって再読み込みすると直っちゃったりするしさ。
# つまりページのソースを追おうとした時点でもう直っちゃってる


でも今日やっとその原因がわかった。偶然(´・ω・`)


--
まず、画像に対してマウスオーバーしたりすると画像が切り替わるってのを見たことがあるかと思います。


これをロールオーバーと言います。


んでHTTPページからHTTPSページに切り替わる時にこの画像の切替が起ると、
HTTP状態の画像を読み込んでしまうってことがあるみたいです。

狙ってやれば100発100中で再現できます。



気が付いてみればなるほどーって思うけど、



















わかるかこんなの!














さてどうやって対処しよう





--2011/06/07追記--
このページのアクセスがなぜか多いです。
みんな同じような現象に出くわして困っているのかね。


検証編もあるので下にリンクを貼っときます。
http://xirasaya.com/?m=detail&hid=117&guid=ON




Comments(4)

1  びるぱん  2011/02/27 (日) 13:41 ID:XXXXXXXXX
「画像ファイルをプレロードする際のタイミングを再考してみる。」に一票。

まぁ詳しく見てないから何とも^^;

2  シラサヤ  2011/02/28 (月) 13:02 ID:XXXXXXXXX
もう少し詳しい状況を書いておきます。


Aページ)
httpページ。
Aページ内からアンカータグにて
Bページ(httpsページ)を指定している。


Bページ)
httpsページ。


という2つのページがあります。


--
再現手順はこうです。


AページからBページへのリンクを踏むと、
サーバに対してリクエストが行われBページを表示しようとします。

この時Bページが表示される前に、
ささっとAページ内の画像のロールオーバを行うと、
Bページ表示後にアラートアイコンが表示されます。
# このロールオーバーはjavascriptのonmouseoverとonmouseoutを使って行っています


つまりHTTPSページを(Bページ内の全てのファイルをHTTPSとして)取得/示しようとしている最中に、
HTTP通信が発生していることで起る警告と思われます。

実際はAページでのロールオーバーの結果はAページにしか反映されず、
Bページの表示完了にその結果は何も残ってはいないのですけどね。


ちなみにこれは絶対パスで書こうと相対パスで書こうと同じ結果となりました。
# 当然と言えば当然ですが


あとIE、Chromeではこういうこと(アラートアイコン)にはなりません。
Firefoxのみの現象と思われます。


対応策)
このFirefoxのアラートに対応するには
・HTTPSリクエスト後の画像読み込み等のアクションを禁止する

くらいでしょうか。

具体的にはHTTPSページへのリンクを踏んだ時に、ページ全体をプチフリーズさせる、という方法です。
又は、サーバの処理を長々待つのではなく、まずまっさきに白ページをflush表示させて余計なロールオーバを発生しにくい状況を作る。
# 2重サブミット問題の対応方法の一つですね


しかしどちらにしろ根本解決にはなっておらず、
ローカルPCのスペックやサーバーの遅延によって結局同じ状況に成り得ます。


なお、提案して頂いた「preload」を行ったとしても発生状況を考えると(おそらく)無意味なように思われます。


うーん、奥が深い…

3  シラサヤ  2011/02/28 (月) 14:23 ID:XXXXXXXXX
検証)
onloadで対象の画像の先読みを行い、
onmouseover/onmouseout時に予め用意したglobal変数を呼び出すようにしてみました。

結果は同じでした。

4  シラサヤ  2011/02/28 (月) 15:13 ID:XXXXXXXXX
検証2)
ON/OFFを上下1枚に配置した画像を用意して、
ロールオーバ時にpositionをずらす方法を試してみました。
# CSSにてaタグのhoverを利用

こちらはうまくいきました。


なおaタグのhoverを利用していても
positionの代わりにbackground-imageを指定するとやはりダメでした。



結論としては
読み込み処理が発生するものはアウト、と言えると思います。

preloadは先読みとは言え、
マウスオーバアクションの時にURLを指定している為、
ブラウザに画像はキャッシュされていたとしても
結局URLを指定しているのでダメなのでしょう。