2018.03.25サイトをhttpからhttpsに常時SSL化したのですが、いざhttps化したサイトを表示すると「この接続は安全ではありません」となってしまいました。サイト自体は問題なく表示されるのですが、https化するとアドレスバーに緑のキーのアイコンが表示されるはずが、黄色い注意マークが付いています。サイト内でhttpとhttpsが混在しているようで、その原因を取り除かないといけないようです。調べてみると意外と簡単に解決できたので、その覚書です。いわゆるSSL対応したウェブサイトは、アドレスバーに緑色の錠前アイコンが表示されます。当サイトではこのように表示されます。このような緑色のキーマークのついているのサイトとの接続は、認証を受けて暗号化されているため、盗聴や中間者攻撃から守られているという事で、安心して利用する事が出来るというしるしです。HTTPで表示されている(安全ではない)サイトとはhttpsではなく、HTTPで配信されているサイトは、アドレスの前にこのようなマークが出るか、カギのマーク自体も表示されません。赤線が引かれた錠前アイコンが表示されている場合、ブラウザは安全でない要素をブロックしておらず、盗聴や攻撃に対して無防備であり、個人データはサイトから盗まれる可能性があります、という事を示しています。HTTPとHTTPSが混在しているサイトとはまた、httpとhttpsが混在している場合、このようなマークになります。当サイトも最初はこのような黄色い注意マークになってしまいました。サイト自体は普通に表示されるものの、これではせっかくhttps化した意味がありません。マークをクリックしてみると、「この接続は安全ではありません」、「このページの一部(画像など)は安全ではありません」と表示されています。クリックし「詳細情報」をクリック。すると、使用しているブラウザ(Firefox)のサポートページ「混在コンテンツのブロック」に飛びました。混在コンテンツのブロックHTTPとHTTPSが混在している状態の原因さくらのプラグインを使って、すべてのデータ(画像を含む)のhttpsへの変換は出来たはずですが、どうやらページ内に「http」で始まる画像などが残っているため、それが原因で緑色のキーが表示されないようです。全てでは無いと思いますが、以下の場合、httpsとhttpsが混在しているコンテンツとみなされるようです。「http」で始まる画像を表示している「iframe」で読み込んでいる内容に「http」の画像を含んでいるまた、文中に外部リンクとして「http」があるのは問題ないようです。問題を解決するには、サイトに残っている「http」のついた何某かを見つけ出さなければなりません。これは大変そうだ、と思ったのですが意外と簡単に原因がわかりました。今のところ、3つのワードプレスのサイトですべて同じ問題が出て、同じ原因と対策で無事に常時SSL化に成功しました。問題の「http」を探す方法を紹介します。Explorerの3つのブラウザとも同じ作業です。「http」と「https」が混在しているウェブページを表示し、「F12」(Windows)を押すと画面の下に開発者ツールが出ので「コンソール」をクリックする。すると、ページ上にある、「http」で始まる問題のURLが見つかります。「http」と「https」が混在しているウェブページを表示し、「F12」(Windows)を押すと画面の右に開発者ツールが出るので「コンソール」をクリックする。すると、ページ上にある、「http」で始まる問題のURLが見つかります。「http」と「https」が混在しているウェブページを表示し、「F12」(Windows)を押すと画面の下に開発者ツールが出ので「コンソール」をクリックする。すると、ページ上にある、「http」で始まる問題のURLが見つかります。3つのサイトで試してみましたが、3つ全部エラーの数が違うのが気になりましたが、検証にはFireFox、Chromeが使いやすいと思います。上記はまだレンタルサーバーでhttps化しただけの状態で、まだワードプレス側でデータのhttp→https書き換えが済んでいません。データの書き換えをした後に出たエラーの画像は、ある特定の部分だったので次にそれを説明します。今回、3つのワードプレスのサイトをhttps化しました。3つのサイト全て、さくらのプラグインを使ってすべてのデータ(画像を含む)のhttp→httpsへの書き換えを済ませたのにもかかわらず、httpのデータが残っていました。それは、3つのサイト全て同じ部分だったので、それぞれ簡単に変更する事が出来ました。それは「サイトのロゴ」と「ファビコン」用の二つの画像でした。当サイトの「サイトのロゴ」はこちら、この部分です。ファビコンはこちら、この部分です。これらを修正していきます。クリックしカスタマイズ画面に入り、「ロゴ画像」をクリックします。今登録しているロゴ画像が出るので、画像の変更をクリック。メディアからロゴ画像を選び直し(同じ画像を選んでも大丈夫でした)、画像のURLがhttpsなのを確認して「画像を選択」。サイトのロゴの修正はこれで完了です。クリックしカスタマイズ画面に入り、「サイト基本情報」をクリックします。サイトアイコンが表示されるので、画像の変更をクリックします。メディアからサイトアイコンを選び直し(同じ画像を選んでも大丈夫でした)、画像のURLなどの情報がhttpsなのを確認して「画像を選択」。まとめさくらのプラグインでhttp→http化した時に、もし常時SSL化したのに「この接続は安全ではありません」が出たらまずここを疑ってみたらいいと思いました。作業後は、無事にサイトが安全な緑色のキーに変わりました。ファビコン(サイトアイコン)を設置するこのブログにもファビコンを設置しました。元のサイズなど忘れないように覚書しておきます。ブログで運営していたブログをWordPressに移行しました。"https://michinari.work/wp-content/plugins/table-of-contents-plus/front.min.js-end");タイトルとURLをコピーしました。