• このエントリーをはてなブックマークに追加

普段よく使うWebページやサイトはhttp始まりです。しかし、会員登録などの画面ではhttps始まりのページになることがあります。これは他の意図しない誰かに情報が漏れないようにするためのプロトコルで、普段使っているものとは別のものとなります。
見分ける方法としては、アドレスバーにあるhttpsという文字を確認する。もしくは鍵マークが付いているのでそれを確認する。最近は色のつくブラウザもあります。

こういったページは安全に暗号化れているページになっていますが、ときどき構築の仕方が悪いとセキュリティ警告が出たり、https始まりなのに鍵や色がつかないことがあります。なぜか?暗号化されていないところから部品(画像など)を読み込んでいるからです。Webサイト、ページを作成する際は注意が必要です。

画像のフルパス指定

httpからhttpsに変更。

<img src="https://www.example.com/images/sample.png" alt="example" width="100" height="100" />
<img src="https://www.example.com/images/sample.png" alt="example" width="100" height="100" />

画像の相対パス指定

相対パスならば問題ない。

<img src="../images/sample.png" alt="example" width="100" height="100" />

ただ、相対パス指定だと例えばフツーのhttpの領域のヘッダーとSSL側のヘッダーを同じようにコピーしてHTMLソースに張り付けるとサーバーのドメインの関係で参照できなくなってしまうかもしれません。この指定は、原則として同じドメインである必要があります。
フツーのサーバーのドメイン:http://www.example.com/
SSLのドメイン:https://secure.example.com/~example/
と成っているときはコピーしても画像のパスが切れます。こういったときは、共通のヘッダー・レフトナビ・ライトナビ・フッターに使う画像は全てhttps://secure.example.com/~example/始まりのフルパスで指定しましょう。

※初期構築時は良くても、例えばヘッダーの画像を全く別のものに変えたい時などに共通のところから読んでいないと2箇所変えないといけないので面倒。フルパスか相対でできるならそれで構築しておくべきです。httpのページにhttpsの画像を読んでも問題ないので同じにしておいたほうが楽です。(ただし、別サーバーになったり暗号化する処理を通すので表示時間が遅れることもあるようです)

iframe

<iframe>も同様です。画像と同じく相対パスにするか、フルパス指定にします。

例)<iframe src="/iframe/news/example.html">こちらのページが表示されないときはニュース欄を参照してください</iframe>
例)<iframe src="https://www.example.com/iframe/news/example.html">こちらのページが表示されないときはニュース欄を参照してください</iframe>
例)<iframe src="https://secure.example.com/~example/iframe/news/example.html">こちらのページが表示されないときはニュース欄を参照してください</iframe>

<irame>に関しては極力使わないほうが良いかもです。必要な場合は上記のようにしましょう。

JavaScriptの外部参照

<script>も同様。画像と同じく相対パスにするか、フルパス指定にします。

例)<script type="text/javascript" src="/js/example.js"></script>
例)<script type="text/javascript" src="https://www.example.com/js/example.js"></script>
例)<script type="text/javascript" src="https://secure.example.com/~example/js/example.js"></script>

cssの外部参照

cssも同様。画像と同じく相対パスにするか、フルパス指定にします。
例)<link rel="stylesheet" type="text/css" href="com/css/common.css" / >
例)<link rel="stylesheet" type="text/css" href="https://www.example.com/css/common.css" / >
例)<link rel="stylesheet" type="text/css" href="https://secure.example.com/~example/css/common.css" / >

その他にもsrc=””と着くような記述がある場合は注意が必要なので、警告が出たらそこを検索してパスが間違っていないかチェックしましょう。まずは、それでOKです。

しかし、もっと注意しないといけないところがあります。

外部参照しているcssとjavascriptの中身です。
ここの画像の読み込み先などが、https始まりでないと、元もこもありません。

cssのケース

これだと、暗号化されていない画像から参照されてしまいます。警告も出ます。

.example{
	background:url(https://www.example.com/images/common/example.png);
}

こんな感じで解決

.example{
	background:url(https://www.example.com/images/common/example.png);
}

JavaScriptのケース

以下のように画像を表示していたら暗号化されていないところから参照されます。

document.write('<img src="https://example.com/images/common/example.png" />');

次のように、https始まりに直す

document.write('<img src="https://example.com/images/common/example.png" />');

という感じです。セキュリティ警告が出て困っている場合は以上のような感じでチェックしてみてはいかがでしょうか。