httpsでホームページにアクセスすると、以下のような警告が出る場合があります。
このページにはセキュリティで保護されている項目と保護されていない項目が含まれます。
保護されていない項目を表示しますか?
これは、呼び出したhtmlの中にhttpのコンテンツが含まれているのが原因です。例えば、htmlはhttpsで呼び出しているのに、htmlの中に含まれる画像がhttpで呼び出されているような場合に起こったりします。
jQueryのライブラリのひとつにthickboxというのがあります。これをhttpsで利用すると、httpのコンテンツを表示しようとしているわけではないのに、IE6で同様の警告が出ます。
いろいろ調べていると、thickbox, https, ie6 and os x firefox compatibility issues | disjoint thoughtsに同じような現象について書かれているのを見つけました。
なるほど!原因がわかりました。thickboxではiframeをsrc属性なしで利用しているからです。IEではSSLの時、iframeのsrc属性がなかったり、値を設定していなかったりするとセキュリティ警告のメッセージが出ることがあるようです。
[PRB] FRAME/IFRAME を含むページを SSL により参照するとセキュリティ警告メッセージが発生する
なので、iframeのsrc属性にブランクのhtmlを設定するようにthickbox.jsを修正します。ん?よく見ると、コメントの方にもっと良いやり方がありました(「UPDATE:」として追記もされています)。
thickbox, https, ie6 and os x firefox compatibility issues | disjoint thoughts
このやり方で直すことにします。
thickbox.jsの場合、38行目の、
$("body").append("<iframe id='TB_HideSelect'></iframe><div id='TB_overlay'></div><div id='TB_window'></div>");
のiframeの部分を
<iframe id='TB_HideSelect' src='javascript:false'>
に直します。
ただ、私の場合、thickbox-compressed.jsを使っていたので、場所を見つけるのが大変です。
thickbox-compressed.jsでは、jsファイルの容量を抑えるため、スペースやタブ、改行を省いてあったり、変数や関数名を短縮したり、ソースの書き方を変えたり、といった圧縮がされているからです。
何とか見つけました。
1行なので、場所を説明しづらいですが、
|iframe|
という場所があります。|iframe|という文字列を検索すると1箇所しかないので、そこを
|iframe src=’javascript:false’|
に修正します。
これで、https環境でthickboxを利用していても、不要なファイル(ブランクのhtml)を用意することなく、警告が出ないよう対応することができました!
関連記事
- SyntaxHighlighter Evolvedとthickbox (0.500)
- WordPressに全文検索エンジンAlgoliaの導入を検討(InstantSearch.js編) (0.079)
- iPhone OS 3.0のSafariでGPS機能を使ったWeb Applicationを作る!(UI編) (0.042)
- iPhone OS 3.0のSafariでGPS機能を使ったWeb Applicationを作る!(history画面作成編) (0.042)
- iPhone OS 3.0のSafariでGPS機能を使ったWeb Applicationを作る!(sqlite保存編) (0.042)