WordPressとwebサイトの常時ssl化

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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では設定ファイルの変更が必要

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 に置換
※データベースのバックアップを忘れずに
※作業終わったらプログラムの消去も忘れずに
※正規表現とかも使えます

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は他にもいろいろ便利

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

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

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

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

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

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

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

WordPressとwebサイトの常時ssl化

WordPressとwebサイトの常時ssl化

Recommended

More Related Content

What's hot

What's hot(20)

Viewers also liked

Viewers also liked(7)

Similar to WordPressとwebサイトの常時ssl化

Similar to WordPressとwebサイトの常時ssl化(20)

More from Endoh Shingo

More from Endoh Shingo(6)

WordPressとwebサイトの常時ssl化