常時SSL化の設定をしたのに「保護された通信」が表示されない時はパスにHTTPが残っているのかも?

最近このブログを常時SSL化したのですが、ある程度設定を終えてHTTPSでアクセスしてみたのですが「保護された通信」が表示されなくて困ってましたが物凄く初歩的な事を忘れていました。
そもそも常時SSLとは?
SSL(Secure Sockets Layer)は、ネット上のデータの通信を暗号化して、データの盗聴や改ざんを防ぐ仕組みの事です。(特徴として、SSL化したページのURLはhttps://〜〜になります)
よく、ネットで買い物を行ったりする時に「アドレスバーに緑の鍵アイコンが付いてるのを確認してから情報を入力するようにしましょう」という話をよく聞きますよね。あの緑の鍵アイコンが付いているのが、SSLを導入しているページです。もし、SSLを導入していないページで買い物をしたり情報を入力して送信してしまうと、そのサイトの運営者に悪意は無くとも、悪意ある第三者によって情報を抜き取られたり、改ざんされてしまうのです。
今までは何か情報を入力するページのみSSL化するのが一般的だったのですが、最近は全てのページをSSL化する動きがあり、これを「常時SSL化」と言います。何も情報を入力しないならSSLにする必要無いんじゃないの?と思うかもしれませんが、全てのページをSSLにする事でCookieへの不正アクセスを防止する事ができます。
また、GoogleがHTTPSページ(SSL化したページ)を優先的にインデックスに追加すると公式に発表した事によって更に注目されました。やはりGoogleとしても安全なページをユーザーに利用して欲しいんですよね。
サイト内にHTTPのパスが残っていると駄目
さて、SSLの手続きを済ませたのにhttpsで接続しても「このサイトへの接続は完全には保護されていません」と表示されてしまいました。
いわゆる緑色の鍵アイコンが表示されていなかったのです。

ふと、Chromeのディベロッパーツールを開いてみるとコンソールにメッセージが来ていました。

どうやらページ内の画像パスが「HTTP」のままだというのです。という事でこの画像パスを「HTTPS」に置き換えていきます。
Search Regexで一括置換
僕が利用しているCMSはWordPressなので、「Search Regex」というWordPressプラグインを使用しました。このプラグインは記事の本文やコメントの内容を一括で置換する事ができるので画像やリンクのパスを一気に変更してしまうというわけです。
新規プラグインから検索するか、上記リンクからダウンロードしてサーバーにアップして、SearchRegexをインストールしましょう。
インストールし終わったら、WordPressの[ツール]内に[Search Regex]という項目が増えているので、クリックします。
(このプラグインで一度置換してしまうと元に戻す事が出来なくなるので、作業する前にバックアップを必ず取るようにしておきましょう。)

SearchRegexのページが開くので、それぞれ設定していきましょう。
| Source | どの部分から文字の検索を行うのか。デフォルトは「Post content(記事本文)」 |
|---|---|
| Limit to | 一度に置換する上限。デフォルトは「No limit(上限なし)」 |
| Order By | 検索した文字列の並べ替えの方法。Ascending(昇順)かDescending(降順)で選ぶ事ができる。 |
| Search pattern | 検索する文字列 |
| Replace pattern | 置換する文字列 |
ちなみに検索する文字列は「http://」だけにしてしまうと外部リンク等も全て取得してしまうので自分のサイトのリンクを入力するようにしましょう。

「Search」を押すと「Search pattern」に入力した文字列を探してリスト表示してくれます。
「Replace」を押すと、置き換えた際にどのようになるのかリスト表示してくれます。このボタンを押しても置換されるわけでは無いので注意が必要です。
「Replace & Save」を押すと特に何か表示されるわけではありませんが、置換が実行されます。
その他のロゴ等は手動で変更
その他の細かいロゴのパスやヘッダー画像は自分でさっと変更ます。Chromeにどの画像パスがHTTPのままなのか表示されるのでそれを見ながら変更していきました。
全てパスが変更し終わった頃にはちゃんと「保護された通信」になりました。



Nuxt.jsの基本と最初のセットアップ「プロジェクトの作成と起動をするまでの流れ」
Visual Studio CodeでToDoコメントを一覧で表示する拡張機能「Todo Tree」
Visual Studio Codeでコメントを色分けして管理する「Better Comments」
gitignoreで特定ファイルをGitで無視する方法
JetpackでのError during WebSocket handshakeの解決方法
Visual Studio Codeで正規表現にマッチするか確認できる拡張機能「Regex Previewer」
全角スペースを可視化してくれるVisual Studio Codeの拡張機能「zenkaku」
iOS Safariで文章の最後の1文字だけ改行されてしまう現象の対処法
Visual Studio Codeでファイル差分の比較を行う方法
gulpのwatch機能を使って、監視ファイルに変更があった時にタスクを実行する
iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない
Google Chromeのサイト内検索(カスタム検索)機能を別のプロファイルに移行する方法
iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法
iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法
Keynoteで有効にしているはずのフォントが表示されない現象
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
OnyXでターミナルを使わずにmacOSの詳細設定を行う
軽量で高速なターミナルエミュレーター「Ghostty」の設定方法
Eagleで実現するクリエイティブ素材の簡単管理
かゆいところに手が届く「Supercharge」でMac環境を便利にカスタマイズする
超軽量なコードエディタ 「Zed」をサブエディタとして活用する
Bartender 6で追加されたWidgets機能で自作メニューバーアイテムを簡単に作成する
Googleカレンダーを便利に活用するための小技集(祝日だけを表示・月末の繰り返しイベントを追加)
Obsidianを使った「自己流PKM」で行う知識トレーニング
テキストエディタ・ノートアプリ関連のショートカットキーをKeyboard Maestroで統一する
Path Finderを使ってキーボードだけでファイル操作する方法(応用編)