WordPressで構築されたWebサイトを 常時SSL（全ページHTTPS）にする理由と方法

1. WordPressとWebサイトの常時SSL化
WordPressで構築されたWebサイトを
常時SSL（全ページHTTPS）にする理由と方法

2. 自己紹介
● 株式会社アーシタン所属
● 静岡県富士宮市在住
● たぬき
● WordBenchしずおかモデレーター
● WordCampTokyo2013〜2016スタッフ
● concrete5japanエヴァンジェリスト
● KUSANAGI静岡ユーザーグループ
● エンジニアやる前は塾講師とか

3. もくじ
1. SSL/TLSとは
2. HTTP/2について
3. WordPressで常時SSL（全ページHTTPS）に変更する方法
4. まとめ

4. 1. SSL/TLSとは

5. SSL/TLSとは
● SSL（Secure Sockets Layer）、TLS（Transport Layer Security）はどちらもインター
ネット上の通信を暗号化するためのプロトコル
● 従来は情報送信が必要なフォーム部分のみ対応するケースが多かったが、現在は
すべてのページをSSL通信化するようになってきている
● SSLは仕様に脆弱性があり、利用がRFC7568によって禁止された
● 一般的にまとめてSSLで呼ばれることが多い

6. SSL/TLSの仕組み
このようにやり取りをして、お互いを認証す
る感じです。
こんちはー
遊びにきーたよ
こんちはー
合言葉をどうぞ
「面白きことは」？
「善き事なり」
はーい。
どうぞー

7. Webサイトにおける、SSL/TLSの役割
1. 暗号化通信
a. Webサイトから送信される情報を暗号化し、悪意のある第三者が情報を取得することを防
止する
b. CMSのログイン情報を保護し、改ざんや乗っ取りなどの危険を軽減する
2. サイト運営者の証明
a. Webサイト運営者が明示化され認証されているため、なりすましやフィッシングなどの防止
に繋がる
b. 認証レベルによって確認されるレベルが変わる

8. 無料SSLの「Let's Encrypt」ってなに？
● 「すべてのWebサイトをHTTPS通信に変更しよう」という目標のもとに作成された、認
証局（CA; Certificate Authority）
● 無料で利用することができるが、有効期限は３ヶ月
● 現在は、ドメイン認証タイプの証明書のみ対応
● Certbotを利用することで、自動取得・更新の自動化を行うことができる
● KUSANAGIでも利用できますよ
● 「暗号化通信」のみの機能提供なので、サイト運営者の証明が欲しい場合は有料の
SSL証明書を利用しましょう

9. 設定項目チェックツール
● SSL Server Test （https://www.ssllabs.com/ssltest/）
SSLの設定状況が安全なものかをチェックし、A〜F（最高はA+）で評価してくれる
● ブラウザの開発者ツール（画像はChrome）

10. ちなみにHTTPSの使用状況は・・・？
Google透明性レポート （https://www.google.com/transparencyreport/https/metrics/ ）
国別で見ると日本は・・・？
Windows： 35％ （2016/10/31）
Android： 21％ （2016/10/31）
統計情報に掲載されている国のなかでダントツの最下位・・・

11. ちょっと休憩タイム

12. 2. HTTP/2について

13. HTTP/1.1とHTTPSとHTTP/2
● HTTP/1.1
○ http:// ではじまるURLで表示されるWebサイトに利用されている
○ データは平文で送信
● HTTPS
○ HTTPをSSL/TLSによって暗号化通信に対応させたもの
● HTTP/2
○ HTTPS + GoogleのSPDYプロトコルをベースに策定
○ 非同期接続の多重化、ヘッダ圧縮など
○ HTTPSのレスポンスの遅さを解消

14. HTTP/2にするメリット・デメリット
メリット
● 表示の高速化・負荷軽減
○ 画像やCSSなどのファイルを並列に読み込むことができる
○ レスポンスヘッダーの圧縮
○ サーバへの接続回数を 1回に
● 通信の暗号化
○ SSL通信になるためすべての通信が暗号化される
デメリット
● SSL必須

15. HTTP/2にする際の注意事項
● 主な対応ブラウザ（未対応の場合、従来のHTTPS通信として処理される）
○ Google Chrome 30 以降
○ Firefox 34 以降
○ Microsoft Edge, Microsoft Windows 10上のInternet Explorer 11
○ Safari 9 以降
● 主な対応Webサーバ
○ IIS （Windows 10）
○ nginx 1.9.5〜
○ Apache 2.4.17〜
○ h2o （HTTP/2対応目的で設計された Webサーバ）
● 共有レンタルサーバだとほとんど未対応（2016/11/13時点）
参考： https://github.com/http2/http2-spec/wiki/Implementations

16. HTTP/2での接続になっているかチェック
● Google Chrome 拡張機能「HTTP/2 and SPDY indicator」
● 開発者ツール NetWork(Protocol)

17. ちょっと休憩…

18. 3. WordPressで常時SSLに変更する方法

19. WordPressで常時SSLに変更する方法
I. WordPress内のURLを書き換える
a. プラグインを使う
b. 「Search Replace DB」を利用してデータベースを書き換え
c. WP-CLIでデータベースを書き換え
II. テーマで読み込んでいるCSSやスクリプトのURLを書き換える
a. 直書きしてある内部ファイルの書き換え
b. 外部ファイルのURLの書き換え
c. SNSなどの読み込み先書き換え

20. Ⅰ. WordPress内のURLを書き換える

21. a. プラグインを使う
「Really Simple SSL」（ https://ja.wordpress.org/plugins/really-simple-ssl ）
I. サーバー側でSSL設定を行う
II. 「Really Simple SSL」をインストールし有効化する
III. 「SSLを有効化する」を押す
➢ 一般設定の サイトURL・ホームURL を https に変更
➢ .htaccess にリダイレクト処理を追記
➢ 記事などのURL部分は JavaScript で置換（データベースの変更は行わない）
※アンインストールするとhttpに戻る
※.htaccess依存なので、Nginxでは設定ファイルの変更が必要

22. b. 「Search Replace DB」でデータベースを書き換え
「Search Replace DB」（ https://github.com/interconnectit/Search-Replace-DB ）
I. サーバー側でSSLの設定を行う
II. 該当URLからプログラムをダウンロード
III. WordPressドキュメントルートにスクリプト設置
IV. ◯◯.com/Search-Replace-DB/にアクセス（ドメイン・ディレクトリ名は自分の環境の）
V. http://◯◯.com → https://◯◯.com に置換
※データベースのバックアップを忘れずに
※作業終わったらプログラムの消去も忘れずに
※正規表現とかも使えます

23. c. WP-CLIでデータベースを書き換え
WP-CLI （ http://wp-cli.org/ ）
I. サーバー側でSSLの設定を行う
II. WP-CLIをサーバーにインストールする（ サーバーの仕様でできない場合もある ）
III. 黒い画面で接続（ SSHクライアント、サーバーのコンソール etc ）
IV. wp search-replace （ http://wp-cli.org/commands/search-replace/ ） で書き換え
○ 例： wp search-replace ‘http://◯◯.com’ ‘https://◯◯.com’
※KUSANAGIはこれ使ってる
※正規表現も使えるよ
※WP-CLIは他にもいろいろ便利

24. Ⅱ. テーマで読み込んでいる
CSSやスクリプトのURLを書き換える

25. a. 直書きしてある内部ファイルの書き換え
テーマに内部ファイルの読み込みが直書きされている場合、データベースの書き換えで
は対応できないため、読み込み先の書き換えが必要
● get_stylesheet_directory_uri() 使っとこう
● それ以外のURLも home_url() や site_url() を使っていない場合、書き換え必須
● テーマが考慮して作られていれば、この作業はいらない

26. b. 外部ファイルのURLの書き換え
CDNやその他外部からファイルを読み込んでいる場合、http://からの配信だと、混合コン
テンツになってしまうので書き換える。
● テーマ内の外部ファイルのURLを http:// から https:// に変更
● 配信先が未対応の場合、代替策を検討

27. c. SNSなどの読み込み先書き換え
SNSや解析コード、広告などの読み込み先も http:// だと混合コンテンツとみなされるため
変更する。
● 主だったSNS（Twitter、 Facebook、 Google+など）は対応済み
● Google Analytics や Google Adsense も対応済み
● その他、広告に関してはASPの対応次第
※回避策はあるが、SNSや広告の利用規約に準じて利用しよう

28. 混合コンテンツチェック
ブラウザを見ればわかる
● Chromeの場合、アドレスバーの右側に盾マークが出る
https://.google.csupportom/chrome/answer/1342714?hl=ja
● Firefoxの場合、アドレスバー左側の鍵マーク
https://support.mozilla.org/ja/kb/mixed-content-blocking-firefox

29. ちょっと休憩・・・

30. まとめ

31. まとめ
● 常時SSL化はこれからの流れが、日本は対応が遅れている
● SEOの観点から考えても、必須事項になる
● できればコーポレートサイトにはサイトシールが利用できるSSL証明書を使おう
● HTTP/2にするといろいろなメリットを得られる
● WordPressだと、切り替える方法がいろいろ用意されている
● チェックツールもいろいろあるので、まずは開発者ツールを使えるように
● わからなかったら、自分でやるよりもできる会社にお金を出して頼んだほうがいいよ

32. ご静聴ありがとうございました