【WordPress】SSL化後どうしてもアドレスバーが鍵マーク(安全な接続)にならないときの魔法のコード!?

公開日: 更新日: Wordpress
パソコン




タイトルはWordpressにしていますが、htmlで作成したサイトでも適用できる方法です。

サイトをSSL化(証明書の割り当て)して、サイト内のページなどをすべてSSL通信に対応させることを常時SSL化と言います。

WordPressで常時SSL化するにはサイトアドレスとWordpressアドレスを変更した後に

  1. 非SSLサイトからの画像埋め込みやコンテンツ埋め込みをしたページ
  2. サイトの内部リンクや内部の画像などに非SSLのURLが存在するページ

に書かれているURLを編集してどのページを見てもSSL通信するページにしていきます。

・・・でも全然常時SSL通信にならない・・・となったとき意外に見落としがちなのが、ヘッダーの中の画像やサイドバーに作ったプロフィールなどの画像。デベロッパーツールで
【WordPress】SSL化後どうしてもアドレスバーが鍵マーク(安全な接続)にならないときの魔法のコード!?
という警告が出るのでよーく見て対象の画像などのURLを変更すれば大抵はクリアできます。

また、プラグインやテーマの中にはhttpから始まる絶対URLがソース内に書かれていて、それが元で警告が出る場合もあります。それも↑の画像のような警告文をよーく見ればここだ!というのは特定でき、ソースを編集すれば解消できます。

でも・・・それでもダメな時があるんですよね、これが。

このサイトの場合最終的に引っかかったのが「CS SHOP」というプラグインで楽天市場の商品をモバイル表示したときだけどうしても非SSL接続されてしまうことでした。

で紹介している通りそれ以外は対処できたのに・・・でたどり着いたのが今回紹介する最終手段??です。

対策は魔法のコードを1行追加するだけだった

この方法は

という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">
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

というコードを1行追加すると、ブラウザでそのページを読み込む際に安全でない通信(非SSlのサイトからのデータを読み込む)が存在するときには、SSL通信するようにURLを置き換えて通信をしてみてちょーだいという指示を出してくれます。

SSLのページで非SSLのコンテンツを読み込むことで「安全でないサイト」とされてしまうわけですから、勝手に(自動で)SSL接続しなおしてみてくれる=エラーが回避できるということなんです。

Googleのデベロッパー向けサイトに書かれていた情報ですから、おそらくSEOに関する悪影響はないと思われます(実際のところは不明ですので自己責任でお願いします)。

WordPressならテーマのheader.phpのどこかにこのコードを一行追加すれば、ハイ対策終了!!となるわけです。

へぇ~~これ便利じゃん!!それなら証明書割り当てたら何もしないでこのコード挿入すれば終了じゃん!!と素直に思った方、ちょっと注意事項があります。それをこれから書いていきますので、最終的にどうするか?は自己判断でお願いします。

ちょっと待った!!このメタタグを使用する際の注意点

このメタタグが行うのは「ページの中に安全でない通信リクエストがあったとき、安全に接続できるように試し、大丈夫なら接続すること」です。

言い方を変えれば、安全でない接続(冒頭で書いたような非SSLのサイトから情報を引っ張ってきて表示する)という動作が指示されたときには一度安全な接続(SSL接続=httpsに置き換える)をしてみて、大丈夫だったら表示してちょ!ということをするんです。

ということは、チェックして安全な接続が確保できない場合(つまり相手がSSL通信できるサイトでない場合)にはデータを引っ張ってくることはしないという動作をするんです。

つまり、非SSLサイトからデータを引っ張ってきて表示するのに安全性が担保できなかったら表示されない!ということになります。

このタグを最終手段として挿入する際にはサイト内の記事などに影響がないかを確認するようにしてください。

また、前述した通り、このコードで行われる動作はブラウザが(訪問者が)そのページを表示しようとしたときにブラウザの機能によってチェックと読み替えをするものなので、少なからずページの表示速度に影響が出る可能性がありますし、うまく動作しないとSSL通信で通常通り表示されるはずの画像でも画像の場所が空白になってしまったりすることがありますので、総合的に判断して使用するかどうかは決めるようにしましょう。

まあそもそもSSL通信にするというのは「保護された通信」と表示されるために行うものではなく、通信中にデータを傍受されて訪問した方が被害を受けないようにすることが目的ですから、本末転倒になってしまいますが、一番いいのは対応できないプラグインやテーマは使わない、外部の画像は使わないということだと思います。

Wordpressの本

Amazonの人気商品楽天市場の人気商品
CS Shop
たった1日で基本が身に付く! WordPress 超入門【電子書籍】[ 佐々木恵 ]

たった1日で基本が身に付く! WordPress 超入門【電子書籍】[ 佐々木恵 ]

1,944 円 (税込) 送料込
<p>WordPressによるWebサイト作成の基本を一から学べる書籍です。1日8時間の勤務時間内に読むことができる程度に解説内容を絞り込み,初心者・新人が最初の1冊目として読むのにふさわしい内容となっています。本書ではローカル環境にWordPressをインストールしてWebサイト..
サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル【電子書籍】[ 宮内 隆行 ]

サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル【電子書籍】[ 宮内 隆行 ]

3,456 円 (税込) 送料込
<p>プラグインの開発から運用までを網羅</p> <p>※この電子書籍は固定レイアウト型で配信されております。固定レイアウト型は文字だけを拡大することや、文字列のハイライト、検索、辞書の参照、引用などの機能が使用できません。</p> <p>CMSのデファクト・スタン..
楽天ウェブサービスセンター CS Shop

いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】