SSLページでshadowbox.jsを使う場合に注意すること

JavaScript

shadowboxに限らずですが、iframeをJSで差し込むライブラリを使う場合の注意点です。
SSLページに限らず、iframeを新規作成する場合、srcを指定しないと、IE6などでは、「about:blank」というページがデフォルトとして読み込まれます。
このページが曲者で、SSLページで読み込もうとすると、非SSLページの要素があるというダイアログが表示されてしまいます。

このページはセキュリティで保護されている項目と保護されていない項目が含まれています。
保護されていない項目を表示しますか？
[はい(Y)] [いいえ(N)] [詳細情報(M)]

ってダイアログだ。

<html>
<head>
</head>
<body>
test<br>
<iframe></iframe>
</body>
</html>

こんなHTMLをSSL領域におけば同じような結果になる。


Shadowbox.jsをこれに対応させる場合。
mjijackson/shadowbox · GitHub

http://mjijackson.com/shadowbox/download.php?code
こちらから落としたソースを修正する場合、
src/js/shadowbox.js line:1349あたり

case 'iframe':
    // iframes default to full viewport height and width
    var h = obj.height ? parseInt(obj.height, 10) : SL.getViewportHeight();
    var w = obj.width ? parseInt(obj.width, 10) : SL.getViewportWidth();
    var content = {
        tag:            'iframe',
        name:           'shadowbox_content',
        height:         '100%',
        width:          '100%',
        frameborder:    '0',
        marginwidth:    '0',
        marginheight:   '0',
        scrolling:      'auto'
    };

ここに追加することで回避できる。


まず、SSL領域に空のhtmlファイルを置いておく。
例えば、blank.htmlとか。


で、

case 'iframe':
    // iframes default to full viewport height and width
    var h = obj.height ? parseInt(obj.height, 10) : SL.getViewportHeight();
    var w = obj.width ? parseInt(obj.width, 10) : SL.getViewportWidth();
    var content = {
        tag:            'iframe',
        name:           'shadowbox_content',
        height:         '100%',
        width:          '100%',
        frameborder:    '0',
        marginwidth:    '0',
        marginheight:   '0',
        scrolling:      'auto',
        src:            'path/to/blank.html'
    };

とすることで、対応できる。


もうちょっと拡張性を持たせるのならば、先頭の var options にhtmlファイルへのパスを設定値として持たせるのがいいと思う。
また、src指定も、IEの場合のみ動くようにしてもいいかもしれない。


ローカルの開発環境などで、SSLページも非SSLで作成していて、本番のみSSLという場合もありえます。
そういった場合に、反映してから発覚ということが無いように注意が必要ですね。