タイトルはWordPressにしていますが、htmlで作成したサイトでも適用できる方法です。
サイトをSSL化（証明書の割り当て）して、サイト内のページなどをすべてSSL通信に対応させることを常時SSL化と言います。
WordPressで常時SSL化するにはサイトアドレスとWordPressアドレスを変更した後に
- 非SSLサイトからの画像埋め込みやコンテンツ埋め込みをしたページ
- サイトの内部リンクや内部の画像などに非SSLのURLが存在するページ
に書かれているURLを編集してどのページを見てもSSL通信するページにしていきます。
・・・でも全然常時SSL通信にならない・・・となったとき意外に見落としがちなのが、ヘッダーの中の画像やサイドバーに作ったプロフィールなどの画像。デベロッパーツールで
という警告が出るのでよーく見て対象の画像などのURLを変更すれば大抵はクリアできます。
また、プラグインやテーマの中にはhttpから始まる絶対URLがソース内に書かれていて、それが元で警告が出る場合もあります。それも↑の画像のような警告文をよーく見ればここだ！というのは特定でき、ソースを編集すれば解消できます。
でも・・・それでもダメな時があるんですよね、これが。
このサイトの場合最終的に引っかかったのが「CS SHOP」というプラグインで楽天市場の商品をモバイル表示したときだけどうしても非SSL接続されてしまうことでした。
で紹介している通りそれ以外は対処できたのに・・・でたどり着いたのが今回紹介する最終手段？？です。
対策は魔法のコードを１行追加するだけだった
この方法はFixing mixed contentというGoogleの開発者向けサイトの中にあったものです。該当部分を抜粋すると
安全でないリクエストのアップグレード
混合コンテンツを自動的に修正するための最新かつ最良のツールの 1 つは、upgrade-insecure-requests CSP ディレクティブです。 このディレクティブは、ネットワーク リクエストを実行する前に、安全でない URL をアップグレードするようにブラウザに指示します。たとえば、ページに HTTP URL を含むイメージ タグがあるとします。
<img src=”http://example.com/image.jpg”>
ブラウザは代わりに https://example.com/image.jpg に対して安全なリクエストを行い、ユーザーを混合コンテンツから守ります。この動作を有効にするには、このディレクティブを指定して Content-Security-Policy ヘッダーを送信します。
Content-Security-Policy: upgrade-insecure-requests
または、要素を使用して、ドキュメントの セクションにこの同じディレクティブをインラインで埋め込みます。<meta http-equiv=”Content-Security-Policy” content=”upgrade-insecure-requests”>
リソースを HTTPS 経由で使用できない場合は、アップグレードされたリクエストは失敗し、リソースは読み込まれないことに注意してください。 これにより、ページのセキュリティが維持されます。upgrade-insecure-requests ディレクティブはドキュメント内にも適用されるため、ページ全体が保護されます。
と書かれています。一見すると「なんのこっちゃ？」って感じですよね？
簡単に説明すると、ヘッダーの中に
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">というコードを１行追加すると、ブラウザでそのページを読み込む際に安全でない通信（非SSlのサイトからのデータを読み込む）が存在するときには、SSL通信するようにURLを置き換えて通信をしてみてちょーだいという指示を出してくれます。
SSLのページで非SSLのコンテンツを読み込むことで「安全でないサイト」とされてしまうわけですから、勝手に（自動で）SSL接続しなおしてみてくれる＝エラーが回避できるということなんです。
Googleのデベロッパー向けサイトに書かれていた情報ですから、おそらくSEOに関する悪影響はないと思われます（実際のところは不明ですので自己責任でお願いします）。
WordPressならテーマのheader.phpのどこかにこのコードを一行追加すれば、ハイ対策終了！！となるわけです。
へぇ～～これ便利じゃん！！それなら証明書割り当てたら何もしないでこのコード挿入すれば終了じゃん！！と素直に思った方、ちょっと注意事項があります。それをこれから書いていきますので、最終的にどうするか？は自己判断でお願いします。
ちょっと待った！！このメタタグを使用する際の注意点
このメタタグが行うのは「ページの中に安全でない通信リクエストがあったとき、安全に接続できるように試し、大丈夫なら接続すること」です。
言い方を変えれば、安全でない接続（冒頭で書いたような非SSLのサイトから情報を引っ張ってきて表示する）という動作が指示されたときには一度安全な接続（SSL接続＝httpsに置き換える）をしてみて、大丈夫だったら表示してちょ！ということをするんです。
ということは、チェックして安全な接続が確保できない場合（つまり相手がSSL通信できるサイトでない場合）にはデータを引っ張ってくることはしないという動作をするんです。
つまり、非SSLサイトからデータを引っ張ってきて表示するのに安全性が担保できなかったら表示されない！ということになります。
このタグを最終手段として挿入する際にはサイト内の記事などに影響がないかを確認するようにしてください。
また、前述した通り、このコードで行われる動作はブラウザが（訪問者が）そのページを表示しようとしたときにブラウザの機能によってチェックと読み替えをするものなので、少なからずページの表示速度に影響が出る可能性がありますし、うまく動作しないとSSL通信で通常通り表示されるはずの画像でも画像の場所が空白になってしまったりすることがありますので、総合的に判断して使用するかどうかは決めるようにしましょう。
まあそもそもSSL通信にするというのは「保護された通信」と表示されるために行うものではなく、通信中にデータを傍受されて訪問した方が被害を受けないようにすることが目的ですから、本末転倒になってしまいますが、一番いいのは対応できないプラグインやテーマは使わない、外部の画像は使わないということだと思います。
ポチップ
ポチップ
