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

公開日: 使い方など
パソコン

タイトルは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. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

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

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

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

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

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

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

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

【WordPress】CSSなどの知識なしでサイトへ簡単にクリスマスの装飾ができるプラグインいろいろ

【Simplicity】カテゴリーアーカイブページを設定する

【WordPress】投稿や固定ページ本文のフォントを変更する


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

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

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

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

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

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

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

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

Wordpressの本

Amazonの人気商品楽天市場の人気商品
【中古】 本格ビジネスサイトを作りながら学ぶWordPressの教科書 2(スマートフォン対応サイト編 / プライム・ストラテジー株 / [大型..

【中古】 本格ビジネスサイトを作りながら学ぶWordPressの教科書 2(スマートフォン対応サイト編 / プライム・ストラテジー株 / [大型..

761 円 (税込)
著者:プライム・ストラテジー株式会社出版社:SBクリエイティブサイズ:大型本ISBN-10:4797370963ISBN-13:9784797370966■こちらの商品もオススメです ● 20歳の自分に受けさせたい文章講義 / 古賀 史健 / 講談社 [新書] ■通常24時間以内に出荷可能です。■メール便は、1冊..
できるWordPress WordPress Ver.5.x対応 本格ホーム [ 星野邦敏 ]

できるWordPress WordPress Ver.5.x対応 本格ホーム [ 星野邦敏 ]

1,628 円 (税込) 送料込
WordPress Ver.5.x対応 本格ホーム 星野邦敏 相澤奏恵 インプレスデキル ワード プレス ホシノ,クニトシ アイザワ,カナエ 発行年月:2019年06月 予約締切日:2019年05月15日 ページ数:272p サイズ:単行本 ISBN:9784295006275 星野邦敏(ホシノクニトシ) WordPressの..
楽天ウェブサービスセンター CS Shop
ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


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

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

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


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報