[SSL]SSL化を行ったのに、サイト内に http が混在しているため、完全にSSL化できない~Chromeのアドレスバーに「保護されていない通信」と表示されるときの対処方法~<wordpress・保護されていない通信>

[SSL]SSL化を行ったのに、サイト内に http が混在しているため、完全にSSL化できない~Chromeのアドレスバーに「保護されていない通信」と表示されるときの対処方法~<wordpress・保護されていない通信>

SSL化を行ったのにChromeのアドレスバーに「鍵マーク」でなく「保護されていない通信」と表示されることはないだろうか?
今回はそれについての対処を行い、最終的に「この接続は保護されています」とSSL化が正常に表示がされることを目指す。

経緯

SSL非対応であったWordPressサイトのSSL化を行う。
SSLのインストールそのものは問題なく完了した。ところが、サイトを表示させたところ、Google Chrome のURL欄に「鍵」マークではなく「保護されていない通信(i)」のマークが表示されていた。調べたところSSL化が正常に行われていないことが分かった。

◇Google Chromeに「保護されていない通信(i)」のマークが表示された

原因

ウェブサイトのソースを確認したところ http:// ではじまるURLが複数記述されてされており、SSL化が不十分であることが判明した。
※SSLは通信していウェブサイトの内容がすべてセキュリティーで保護されていなくてはならない。つまりサイト内のURLがすべて https:// で記載されている必要がある。

◇サイト内に http:// のURLが混在している

対策

サイト内の http:// を https:// に書き換えることでSSL化が実現できる。 
今回は、WordPressの「ヘッダーテンプレート」へ下記の <meta>タグ を <head>セクションに記述した。

◇「ヘッダーのテンプレート」ファイルの<head>セクションに下記内容を埋め込む。

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

説明

<meta> の宣言により、サイト内にある http:// を https:// と読み替えてブラウザに読み込んでくれる。

参考)
CSP
upgrade-insecure-requests


◇http-equiv=”content-security-policy” とは
コンテンツセキュリティポリシー。クロスサイトスクリプティング やデータインジェクションなど特定の種類の攻撃を検知し、影響を軽減するための属性。

content=”upgrade-insecure-requests”
上記を適用することにより、「サイトの安全でないURL (HTTP経由)」のものを「セキュリティで保護された URL (HTTPS経由) 」に置き換えることができ、ユーザーエージェンでHTTPS通信のようにふるまうことが可能となる。これはURLの書き換えが必要な、安全ではない古いURL(HTTPが記載されている)が多数存在するウェブサイト向けに準備された属性となる。

参考までに

1.
今回の <meta> による対策で http が https に変更されるが、その際に有効なURL のパターンは次の2種類となる。通常リンクタイプと画像リンクタイプだ。

◇リンクを示す URL表記 :
 例)http://www.iotoon.com/hogehogehoge.html

◇画像を表示する URL表記 :
 例)http://www.iotoon.com/hogehoge/image.jpg


2.
画像を表示するURLで https:// で置き換えることが出来ない場合にはリンク切れが発生してしまう。そのため画像が壊れたかたちで表示される。


3.
.mp3 、 mp4 などの拡張子を持つものは http:// のURLが無効になるため https:// と認識されない。
認識されない場合は手動またはソフトウェアの置換機能で http:// から https:// へURLの変更を行う。