YOKOTA’s diary

最近はドローン関連が多いですが…ECやデータ解析、3Dプリンタなども。

既存のHTTPサイトを全ページHTTPS化(SSL対応)する方法

2015年12月18日にGoogleの公式ウェブマスターブログで
HTTPS ページが優先的にインデックスに登録されるように」なるという旨のアナウンスが行われました。

▶HTTPS ページが優先的にインデックスに登録されるようになります f:id:ashyktj:20151230165538p:plain

従来より「HTTPS Everywhere」など、全ページSSL化などを推進されていましたが、明示的にHTTPSページを優先的にインデックスすると公言したのはこれが初めてだと思います。

これを受けて、私の運営するサイトもいくつか全ページSSL対応化することにしましたが、SSL化するに伴い、色々と作業することも多いこともありまとめました。

SSL化することのメリットはSEO

そもそも、なぜSSL化することが「優先的にインデックス」につながっているかですが、上述のブログより引用すると、

今回の取り組みにより、ウェブの安全性がさらに高まることを嬉しく思います。Google 検索結果で HTTPS ページを表示することにより、Google では、セキュアでない接続を介してウェブサイトを閲覧してコンテンツ インジェクション攻撃を受けやすくなるリスクを減らしたい

とあるようにウェブ(全体)の安全性を高めることが狙いです。

f:id:ashyktj:20151230170203j:plain

これは、優先的にHTTPS化されたインデックスされることで、運営者のHTTPS化することに対するインセンティブが働き、結果的にHTTPS化したサイトも多く増え、全体としてウェブの安全性が高まるのだと思います。

最近は、サイトやブログ、ECサイトが独自に簡単に作れるようになったこともあり、インフラ面のリテラシーが低い運営者が多いのも事実であり、多くの新規ECサイトでは、マイページやログインページなどの重要な個人情報すら暗号化されていないページも多くある現状です。

SEOなどの検索上位に出るための施策がきっかけとなり、結果的にそのサイトの安全性が高まり、訪れるユーザーにも安心を与えられるのであればとても良いと思います。

サイトの全ページHTTPS化までのステップ

さて、肝心のHTTPS化するための手順や方法ですが、大きく以下のようになります。
今回は、レンタルサーバー(エックスサーバー)×WordPressを用いた構成でどのようにSSL化するかを念頭においた手順です。(テスト環境などがある場合は、事前にそちらで確認の上、行うことをおすすめします。)

1.SSL証明書の手配と購入先
2.SSL証明書の申請・インストール・サーバー設定
3.HTTPSページ内のHTTPリソースの書き換え
4.CMS(WordPressや利用プラグイン)内の設定変更
5.サイトのHTTPS(SSL)化のテスト確認
6.HTTPからHTTPSへのリダイレクト
7.ウェブマスターツールへの新規登録

これらを順に解説していきます。

1.SSL証明書の手配と購入先

まず、サイトのページをHTTPS化するためには、SSL証明書が必要です。

SSL証明書には数千円~数十万と振れ幅が大きいですが、証明書によって、暗号化強度が異なったり、対応するブラウザ(≒テストされたブラウザ)に違いがあったり、「EV SSL」のように安全性の高さを視覚的にも強調したものなど種類があります。

f:id:ashyktj:20151230155054g:plain

そしてSSL証明書大手のベリサインなどのように信頼性やブランドもある場合や、SSL証明書を発行する審査にかかるコスト(会社が実在するかなど)もあり価格は異なると考えています。

過去に私が大企業のECサイトを構築していた時は、年額10万円~20万円のSSL証明書ベリサインやグローバルサインのものが多かった)を選択するクライアントが多かったですが、必ずしもこのような高い証明書が必要ではありません。むしろ個人サイトや中小企業のサイトではSSLに数十万も掛けられないと思います。

そこで最近は「格安SSL」とうたって数千円で対応ブラウザや手続きを極力簡素化したcoreSSLやrapidSSLのような証明書も出てきています。

www.securecore.co.jp

暗号化規格として一般的な「SHA-2対応」、「最新のブラウザに対応」なんといっても「低価格」ということで今回適用したドローンのサイトには、coreSSLを採用しました。

数万円を出すのに躊躇して導入しないくらいなら、暗号化強度はいくつか弱い部分(脆弱性のある部分も実際ある)はあるけれども、SSL化してhttp接続よりもある程度安全に通信ができる方法を取る方が私は良いと思います。

また、安すぎて不安…という方や、SSL発行元の企業に信頼性が置けないなどの判断をした場合は、少し高めで割とメジャーなrapidSSL(年間1万円前後)か、グローバルサインのクイックSSLなどがおすすめかと思います。

2.SSL証明書の申請・インストール・サーバー設定

SSL証明書はいきなり購入して設定できるわけではなく、
まず申請元の情報を提供して審査にかけてもらい、審査が通った場合に証明書が発行され、サイトの存在するWebサーバー上で設定作業をする必要があります。

そしてこの申請の際に必要なのがCSR(Certificate Signing Request)であり、サーバー上で作成することができます。(作成例参考

申請から設定までの大まかな作業は下記です。

  1. CSRを作成する(組織情報や公開鍵の作成)
  2. CSR情報の入ったファイルをSSL証明書ベンダーに渡して申請
  3. 審査が通ればSSL証明書が発行され情報が送られる
  4. 中間 CA 証明書と SSL サーバ証明書のインストール

この2と3はただの申請のやり取りなのですが、
1と4はコマンドライン上での作業がメインとなり、linuxに慣れていない場合や、SSLや公開鍵などの仕組み自体がわかっていない人が簡単にできる作業ではないです。私はやることはできますが、できることならやりたくないです。面倒なので。

そしてそんなユーザを想定してか、私の利用するレンタルサーバー(エックスサーバー)では、SSLの申請からインストールまですべて対応してくれるという素敵対応です。

申請からわずか3時間でhttps接続ができ大変便利でした♪

www.xserver.ne.jp

最近はこのようなレンタルサーバーも増えていると思いますので、まずはお使いのレンタルサーバーのプランを確認してみるのが良いと思います。

3.HTTPSページ内のHTTPリソースの書き換え

私のようにレンタルサーバーの簡単インストールプランに乗っかっている方なら、ここまでお金を払うだけで大した作業はしていないですが、そうでない方はここまででも結構な作業です。(通常企業でこれらをやる場合は申請からインストールまで2週間以上スケジュールとることも有ります)

しかし、httpsでの通信ができたからと行って終わりではありません。むしろHTTPからHTTPSへの変更するサイトの場合は、ここからのほうが作業が多いです。

まずHTTPS化が正しくできているページと、できていないページの例です。(Chrome

f:id:ashyktj:20151230171030p:plain
f:id:ashyktj:20151230171027p:plain

上は、https部分が緑色で鍵マーク付きで表示されているのに対して、下は黒文字のままです。 ブラウザによっては警告表示が出る場合もあります。

このようにSSL証明書自体が正しくサーバーにインストールされているのにもかかわらず、httpsが正しく反映されていないケースがあります。

この大きな原因が「HTTPSページ内のHTTPリソースの混在」です。

ここでいうリソースとは、jsやcss、各種画像ファイルなどを指しますが、具体的には、ソース内の「src="http://something"」や「srcset="../somthing"」などの部分を指します。

f:id:ashyktj:20151230171647p:plain

これらのリソースのパスに「http」のパスが混じっている場合、ブラウザ上で「HTTPSページ内にHTTPリソースが混在するという警告が出されます。(以下はChromeの警告例)

Mixed Content: The page at 'https://drone.beinto.xyz/knowledge/drone-kentei/' was loaded over HTTPS, but requested an insecure image 'http://capture.heartrails.com/150x130/shadow?https://drone-kentei.com/'. This content should also be served over HTTPS. adsbygoogle.js:6 Uncaught TagError: adsbygoogle.push() error: No slot size for availableWidth=0ib @ adsbygoogle.js:6Kb @ adsbygoogle.js:11Ad @ adsbygoogle.js:51(anonymous function) @ (index):835

投稿本文内のHTTPリソースをHTTPSリソースに変換する

対策としては、このsrcやsrcsetアトリビュートの値を置換してあげれば良いです。

記事本文内に利用している画像などであれば1つずつ修正するのも一つですが面倒ですので、ここは一括置換ツールなどを用いて行いましょう。ミスもヘリますので。

私はWordPressを利用しているサイトには、下記プラグインを用いて一括変換を行いました。

ja.wordpress.org

インストールして設定画面(ツール>Search Regex)で最初は以下のようにドメインのURLを置換しました。

f:id:ashyktj:20151230172413p:plain

これはaタグに指定されているhrefの値などもまとめて変換したいため、まずはドメインのURLをhttpからhttpsに変更しました。


次に、他のsrcやsrcsetなどの値を変換したいのですが、ここには注意が必要です。
例えば、利用している画像が外部サイトで生成されている場合は、単純にhttpsに変えたとしても画像が表示ができない場合があるためです。

f:id:ashyktj:20151230195844p:plain

今回、httpsにsrcパスを変更することで、実際に画像パスが取得できずにimgタグが無効になる例がありました。 私の例では、http://capture.heartrails.comという画像キャプチャを取得してくれるサイトがあるのですが、こちらをsrcパスにしており、かつhttpsが有効ではないので、サイト上でNotFound状態になってしまいました。

これはよくない状態ですので、今回はimgタグまるごと除去することにしました。
先の「Search Regex」は正規表現で複雑なパタンの文字列も検索置換することができます。

下記のように検索することで、該当のimgタグのみを抽出し半角スペースで一括置換しました。

/<img.*src=*[\"|']https:\/\/capture.*?\/>/i

他には、Amazonのインスタントストアをiframeで読み込んでいるのですが、そこで使われているリソースがHTTPであり混在となっていました。
(が、ここはスルーしAmazon対応まち)

テーマ内のHTTPリソースのHTTPS

基本的には、後述のURL変更設定(WordPress>設定>一般>URL)を行うことで、HTMLヘッダ句のCSSやjsなどのパスは一括でhttpからhttpsに切り替わることができます。

しかし、ソーシャルリンクをfunction.phpに自身で記述して設定していたり、テーマ内の設定によってはhttpsではないhttpリソースがベタ書きされているケースが存在します。

これについては、テーマのファイルを一式ダウンロードし、http://から始まるソースパスを抽出し、httpsに変換してあげることで解決できそうです。

以下Linux系OSを使えることが前提での作業ですが簡単ですので参考までにご紹介。

まずは、作業ディレクトリを作成(mkdir -p ~/workssl)しておき、テーマのファイル一式をサーバーからダウンロードしておきます。に配置します。
f:id:ashyktj:20151230173936p:plain

ターミナルなどを用いて該当のディレクトリに移動し、
phpファイルを対象に「src」と「http://」の文字列が同じ行に存在する行を抽出します。

$ cd ~/workssl  
$ find ./hueman-child -type f -name '*php'|xargs grep -e 'src="http://' -e 'srcset="http://'
./hueman-child/header.php:  <script type="text/javascript" src="http://drone.beinto.xyz/wp/wp-content/themes/hueman/js/custom.js"></script>

なぜかjsのパスがベタ書きされていたようで…速やかにbloginfo('template_directory')などの関数に置き換えました。 ちゃんとしたテーマ修正をしている方であればここはあまり問題ではないと思います。

4.CMSの設定(データベース上のhttpリソース)変更

次に、CMSでの設定データです。これには利用テーマの設定も含まれます。
例えばhueman というテーマには専用の管理画面(Theme Options)が存在し、そこでロゴやFaviconなどの画像パスを設定する箇所があります。

f:id:ashyktj:20151230180251p:plain

このように、絶対パスでの登録(DBに保存)がなされている箇所があるため、変更処理をしておく必要があります。 また、WordPressの大本のURL設定もここで切り替えておきます。

f:id:ashyktj:20151230180551p:plain

その他、設定保存系で画像設定などをしているところがあれば変更を行います。

これで、サイトにアクセスすると各種内部リンクなどがHTTPSになっており、HTTPSがある程度正しく見れる状態になっているはずです。

5.サイトのHTTPSSSL)化のテスト確認

この時点で、およそHTTPSページになります。
ただし、検索エンジンでインデックスされているURLやソーシャルリンクなどは旧URLのままのはずですので、サイト内の回遊以外は原則HTTPSでのアクセスはほとんどないはずです。

ここで再度サイト全体のチェックを行います。
1ページずつチェックして見ていくのはさすがにしんどいので、なるべく一括でできる方法がよいのですが、うまい方法が見つかっていません。後日あれば記載します。
再帰的にwgetで標準出力して、grepするなど)

ようやくHTTPS化が完了か

さてようやく、すべてのページでHTTPリソースの混合のないHTTPSページができあがったと思います。
気になる方は、いくつかページを実際に確認してチェックするのが良いと思います。
Chromeなどのブラウザでは、HTTPSページに問題がある場合、コンソール上に警告表示をしていますので、それを参考にできるはずです。

f:id:ashyktj:20151230191935p:plain

6.HTTPからHTTPSへのリダイレクト

HTTPS対応が完了したら、従来までのHTTPでのアクセスのための作業を行います。

たとえば、検索エンジンのインデックスされたURLは当分はHTTPのままですし、TwitterFacebookで共有されているリンクもHTTPです。サイトに訪問するユーザがHTTPSでウェブサイトを見れるように、リダイレクト処理をしてあげるのが良いです。

リダイレクト方法には色々ありますが、ここでは、.htaccessmod_rewrite.cを利用してリダイレクト処理をします。サーバーや利用モジュールによって方法は異なりますがやっていることはほとんど同じです。

<IfModule mod_rewrite.c>
RewriteEngine On
# Something
# …
# HTTP to HTTPS 
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

#で始まるのはコメントアウトです。
RewriteCondは条件で、RewriteRuleは処理内容です。
こちらの処理内容を意訳すると、

  • HTTP(%{HTTPS} off)のアクセスの場合に、
  • すべてhttpsから始まるリクエストのあったURLを引き継いで
  • 301リダイレクト(R=301)し、処理を終了する(L)

です。301リダイレクトは永久リダイレクト、302は一時的リダイレクトで、今回は永久なので301にしました。

7.ウェブマスターツールの新規設定

ウェブマスターツールは、httpとhttpsのURLを区別して管理しているようですので、新しくプロパティを新規追加して登録しました。

また新規登録後なので、インデックス送信・サイトマップ送信を併せてしておきました。

f:id:ashyktj:20151230211954p:plain f:id:ashyktj:20151230212002p:plain


これで、ひとまずHTTPサイトをHTTPS化(SSL対応)することができました!
よろしければこちらHTTPS化したサイトをご覧くださいませ。

BE INTO DRONE