ねほり.com

何もないから何かみつかる

常時SSL(https)化に苦戦しながらも対応

      2018/11/28

2018年7月にGoogle Chromeの新しいバージョン「Chrome 68」、10月には「Chrome 70」が登場しました。

これより「常時SSL(https)」に対応していないサイトでは、ブラウザ側で警告が表示されるようになりました。

SSL対応していない場合の Chrome 68での表示

上記のようにブラウザ側で「保護されていません」という警告が表示されます。

SSL対応していない場合の Chrome 70での表示

http接続ページでパスワードを入力すると、「保護されていません」ラベルが赤くなる警告機能がされます。
 

 
要するに、自分のサイトが「常時SSL」化できていなければ、ユーザーに何らかの影響を与えるよ。という警告です。

さすがに、ここまでされて対応しないのもあれなので、3連休の土日を使って対応しました。
 

 
実は「2017年はSSL元年」と言われることがあり、WebサイトのSSL化が急速に広まりました(2017年8月時点で約50%がSSL化されたサイト)。

そして、Googleは早くから段階的にSSL化に舵をきってました。

2010年5月 Google(検索サイト)のSSL化
※この時点ではβ版のみ。本格的な対応は2011年10月以降から順次(利用ブラウザなどにより時期が若干異なる)
2014年 SSL暗号化(https://~)実施済のサイトを検索結果の表示で優遇する旨を公言
2017年1月 Google Chrome56から、パスワード・クレジットカード番号を入力するフォームがあり、なおかつSSL暗号化がされないページで、アドレスバーへの警告表示を開始
2017年10月 Google Chrome62から、入力フォームがありなおかつSSLによる暗号化が行なわれていない全てのページで、アドレスバーへの警告表示を開始
※入力フォームへ登録する内容がパスワードやクレジットカードの番号でなくても警告が表示されるようになった
2017年12月 Google Chrome63から、FTP接続の際に警告が表示されるようになった
2018年2月 Chrome 68(2018年7月リリース予定)から、すべてのHTTPサイトで警告を表示すると発表

流石に2018年内に常時SSL化しないと、年越し出来ないです・・・。

SSL化されたページの方が非SSL化ページよりも高速&SEO対策にもなるしね。

HTTPからHTTPSへの移行方法

SSLサーバ証明書には3つの役割があります。

・暗号化
・通信相手が正しいことの保障
・改竄の検出

オレオレ証明書を用いたサイトに接続するとブラウザで証明書の警告が表示されるし、証明書は有料だし・・と思ってましたが、無料で使えるようです。

SSLの申請をする

さくらインターネットはサブドメインであっても2018年8月よりSSLが利用できるようになりました。

世の中の流れに対して金を払ってるのに対応が遅い感じはするけど・・・。

有効にするには、有効化ボタンを押すだけなので簡単です。

ちなみに独自ドメインの無料SSL(Let’s Encrypt)は有効期間3ヶ月ですが満了前に自動で更新を行ってくれるようです。

.htaccessに追記する

HTTPでアクセスしてきたユーザに対して、一時的ではなく、恒久的に転送するという意味で、301リダイレクトを使ってサイトをHTTPSに飛ばします。

これで完了・・・と思ってブラウザを見てみると・・・


 

 

このサイトの接続は完全には保護されていません

 

 
完全ってなんだよ・・・と思って調べたら、サイトの中に「HTTP」アクセスが混じっているとの事です。

ここからが、大変な部分です。

特に私のようなメモ帳でHTMLタグ打ちサイトは特に・・・・。

各ページで対応していない部分を確認する

ある程度までは「http://」で検索して置換することで、対応できます。

でも、外部ファイルで外部サービスを使っている場合は見つけることすら簡単ではありません。

  • 画像を直接 http:// で呼んでしまっている
  • 他サイトの URLがJSなどに書かれている

jqueryや、bootstrapなど、今の時代に外部サービス使ってないサイトないでしょ・・・。

Chromeブラウザを活用する

やり方は簡単です。

F12 を押しながら「Console」に書かれている警告を確認します。

———-
Mixed Content: The page at ‘https://nehori.com/nikki/2018/11/25/post-7523/’ was loaded over HTTPS, but requested an insecure image ‘http://nehori.com/nikki/wp-content/uploads/2017/04/nehori-1.gif’. This content should also be served over HTTPS.
———-

そして、確認できたURLを置換します。

このように、明確に場所が特定される場合は分かりやすいが、wordpressの場合は、カスタマイズしすぎて面倒です。

また、外部サイトがSSL化しておらずサービスを外したものも幾つかありました。「はてな」、お前のことだ!

スマホのSSL化がオカシイ

PC版のChromeでスマホ向けサイトのSSL化も確認できますが、

「スマホの実機でだけ動かない!なぜだ!」

という場合がありました。

その場合は、スマホをPCとUSBで接続し、PC上にChromeに「chrome://inspect/#devices」と入力します。

すると、スマホ側のChromeの動作検証もできます。色々と便利です。

Linuxコマンドを活用する

だんだん面倒になってきたので、AmazonアフィリエイトURLの更新は一括でやりました。

ファイル指定せずに全HTMLに対して一括対応する方法は下記です。

まとめ

サイトのSSL化は完了しましたが、作りかけのページを沢山見つけました・・・。

徐々に対応していきます・・・やれやれ。。

そして、過去記事をパチったアフィリエイトサイトを多々見つけた。

そっちのサイトのGoogleランキングが高いのもどうよ・・と思うが、どうにかならないのかな・・・。

 - 2018年, Web技術, テクノロジー, 調査結果

  関連記事

The Japan News翻訳コンテストで受賞

The Japan News(旧THE DAILY YOMIURI)という英字新 …

アメリカ人に対するステレオタイプと払拭方法

国際コミュニケーション演習課題のレポートをやってみた。 はじめに 現代は「グロー …

段ボールハウスを作って遊ぶ

5才ぐらいの頃から段ボールでハウスを作るのが好きだった。 慣れると簡単だけど、当 …

Which holding a wine glass is better, by stem or by bowl?

Most all of Japanese understand that hol …

サッカー盤(テーブルフットボール)を作って遊ぶ

昔の遊びは、子供にも作りやすく工作にはもってこいである。 すごろく けん玉 輪投 …

炊飯器と麺棒で家庭で餅つき体験

子供の頃、祖母の家には臼(うす)と杵(きね)があり、正月には餅つきをしていた。 …

インターンシップで知るGoogleオフィスの雰囲気

マウンテンビューのGoogleオフィスでは食事(ご飯、飲み物、デザート全て)が無 …

タイドプールでタコ捕り&磯遊び(千葉県・かなや編)

千葉市内に最も近く磯遊びができる場所に「金谷」があります。 と言っても富津市なの …

JSのグラフライブラリ・アニメーションライブラリの現状トレンド

JSライブラリは多種多様に存在する。 グラフィックライブラリのトレンド グラフィ …

賀茂郡黒瀬組十八ヶ村の歴史と特徴

保田家先祖の麓屋良左衛門(1690年~1760年頃)が安芸国 下黒瀬で村役人(庄 …