伊藤清徳の垂直落下式ムーンサルトプレス

PerlとかPHPとかMySQLとか...がんばっても8割だ。

SSLでLightboxを使うとIEで警告

何かと便利なLightbox。

だが、Lighbox2をSSL通信領域で使うと、

ブラウザ界を代表する困ったちゃんIEでセキュリティ警告が出る。


SSL通信になってない項目がページの中にあるよ。っていう警告なんだけど、

いくら調べてもそんなのページの中にない(>_<)
何が原因なのかさっぱりで、丸二日悩んだ・・・。Lightboxが悪いのか、IEが悪いのか。


で、最終的に、Lightboxディレクトリ中「/css/lightbox.css」に原因があることが判明。
13行目の記述。

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }

「background-image: url(data:image/gif;base64,AAAA);」
↑どうやらこれが問題らしい。。。見慣れない記述だ。
おそらく、BASE64エンコードしたときに値が「AAAA」となる、Content-typeが「image/gif」のデータを背景として読み込んでいる様子。

だったら、こういうファイルを実際につくればいいのでは。
ってことで、そのファイルをまずPerlで作る。

#!/usr/bin/perl -w

use strict;
use MIME::Base64;

my $fh;
open( $fh,'> hover.gif') || die("だめだった...orz\\n");
print $fh decode_base64('AAAA');
close( $fh );

print "できた!\\n";

まあこんな感じ。適当で申し訳ない(^-^;

それで、このスクリプトで作った「hover.gif」を、
lighbox内のディレクトリ「images」へアップロードし、
「/css/lightbox.css」の13行目を

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(../images/hover.gif); /* Trick IE into showing hover */ display: block; }

に変更したら、警告は出なくなった。


今回は、一応CSSに記述されている内容にしたがって改造したけど、
そもそもBASE64にしたとき「AAAA」なGIF画像なんて意味があるわけがないので、
もしかしたら、そんな画像をわざわざ作らなくても、何か適当なGIFを背景に指定してやればよかったのかも。

2 Comments

  1. 私も同じ問題に2日悩みましたので、通りすがりですが思わずコメントです。

    > もしかしたら、そんな画像をわざわざ作らなくても、
    > 何か適当なGIFを背景に指定してやればよかったのかも。
    これは、その通りみたいです。ただのブランクGIFでOKでした。
    私の環境では、prototype.js(1.6.1_rc3)にも若干の細工が必要でした。下記、Googleから辿り着いた他の方の一助になれば。
    var el = document.createElement(‘iframe’),
    isBuggy = false;
    の後に、下記のような1行が必要です、多分。
    el.setAttribute(‘src’, ‘javascript:false’);

  2. admin

    2009/8/26 水曜日 at 12:05:48

    >CogniTomさん
    こんにちは。やはり皆さん「2日間」悩むんですね!笑

    やはり、画像はなんでもいいのですね。単なるダミー。。。

    prototypeも細工が必要ですか!?それは非常に役に立つ情報です。ありがとうございます!

コメントを残す

Your email address will not be published.

*