https化でつまづいたポイント備忘録

WEB / アプリ

とっちゃん@nyanco! です。

webサイトのhttps化についてのメモ・備忘録です。

https化の詳しい手順や、「そもそもhttps化とは?」は下記記事がとっても詳しいです。

レンタルしているサーバーが対応していれば、管理画面からhttpsの設定自体は簡単にできちゃいます。

これから新規で立ち上げるホームページならこれでOKのようですが、すでに稼働中でページ数も多いwebサイトだと、ここからがなかなか大変でした。

サーバーで設定しただけだと、ブラウザでサイトにアクセスするとこんな感じで「https」に打ち消し線が入り、赤字で「保護されていない通信」とまで表示されてしまうのです。
URLの「https」に打ち消し線が入っている画像

なぜこんな表示になるのか調べてみると、「サイト内のCSS・Javascript・画像やサイト内リンク」のURLに「http」が混じっていることが原因とのこと。

Chromeの「デベロッパーツール」で確認すると、「Console」に「Mixed Content」という表記で教えてくれます。

Chromeの「デベロッパーツール」画面
※httpsとは関係のないエラー(間の2つ)も混じってますね ^^;

つまりは、

「https」なのに「http」が混じってるよ!
だから「https」としては認められないよ!

…ということなので、「https」として認定を受けるためには、サイトに関連するリンクを全て「https」に統一させる作業が必要となってくるわけです。

以下、自分的に見落としがちだったチェックポイントをまとめておきます。

スポンサーリンク

バックアップ!

かなりのページを編集することになるので、何かあっても復活できるように何はともあれバックアップ必須です!

稼働中のホームページなら尚更!!

基本的に、一手順作業するごとにホームページがおかしくなってないか確認することをオススメします。

WordPress管理画面の設定変更

こちらはWordPressを使ってる方のみの設定です。

「ダッシュボード」-「設定」-「一般」の下記の設定を変更します。

  • WordPress アドレス (URL) :「http」を「https」に変更
  • サイトアドレス (URL):「http」を「https」に変更

WordPressの管理画面「設定」-「一般」

CDNを利用してたら

jqueryやwebfontなどのソースを自前のサーバに用意しなくてもURLを指定するだけで利用できるとっても便利なサービスCDNを使っていたら、そのURLをチェック!

見事に「http」になっておりました。
ちなみに、「https」に変更してアクセスするとちゃんと同じソースが確認できたので、「https」に変更するだけで「mixed content」の数が減りました!

参考までに、私が修正したのは下記のCDN呼び出しコードのURL。

Jquery

https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

webフォントの「font-awesome」

https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css

サイト内リンク

サイト外リンクは「http」でも良いですが、サイト内リンクはすべて「https」に変更する必要があります。

ページが多いと目視でちくちくやるのは現実的でないので、WordPressならプラグインなどを使って一括置換しちゃいましょう。

CSSの中の画像リンク

見落としがちなのが、CSS内の画像リンクです。
背景画像とか、擬似要素で使う画像とか。

ひと通り直したら

SafariのURLバー
FireFoxのURLバー

ここまでの作業で、FireFoxとSafariではURLの前に「鍵」マークが表示されうまくいきましたが、なぜかGoogle Chromeではまだ「https」に打ち消し線が入ったまま…

なぜだ〜と思い調べてみると、Chromeはサイトの全ページをチェックしているようで、どこかのページに一つでもmixed contentが残ってると駄目なようです。

確かに、safariも他のページに移動すると駄目になりました ^^;

全ページを同じ要領で確認し、修正し終えるとようやくChromeでも「鍵マーク」が表示されるようになりました!

あとは「http」のURLにアクセスしても「https」にリダイレクトさせる設定を施して、完了です!

▼リダイレクトについては、こちらの記事を参考にさせていただきました。
httpからhttpsにリダイレクトする方法と注意点について | キーワードファインダー

今回は以上となります。
最後まで読んでいただきましてありがとうございました!
それではまた〜✧٩(ˊωˋ*)و✧

コメント