こんにちは。ネットショップコンサルタントの「たぶ」(@yusuke_tanaka34)です。
最近、ネットショップの商品撮影に関する記事を書いていて「カメラ熱」がすごいので、今日は少し方向性を変えてネットショップ運営システム「EC-CUBE3」のSSLについて書こうと思います。
世界一の検索エンジン「Google」さんが「2018年7月にリリースする『Google Chrome68』から、すべての「http://」で始まるサイトに『保護されていません。』という警告を表示しますよ。」という発表があったのはご存知ですか？
以前から、ネットショップはお客様情報を打ち込むので「常時SSL化」することが推奨されてきましたが、今後はより一層「常時SSL化」が必須の時代となってきました。
「常時SSL化」とは、ネットショップのどのページを開いても「https://」から始まるURLで接続し、SSL通信(暗号化通信)が行われている状態のことを指します。
僕の取引先のネットショップはすべて「常時SSL化」の作業が済んだのですが、まだ常時SSL化が済んでいない会社さんからは、
という相談をよくいただいていました。
今回は、「EC-CUBE3系のネットショップにSSLを導入する方法」というテーマで、ネットショップにSSLを導入する方法についてお話していきたいと思います。
スポンサーリンク
「SSL」ってなに？
「SSL」とは「Secure Sockets Layer」の略で、インターネット上で送受信するデータを暗号化する仕組みのことです。
ネットショップに「SSL」を導入すると、お客さんがネットショップ上で打ち込む個人情報やクレジットカード情報などの重要なデータを、暗号化して安全に送受信することができます。
ネットショップに「SSL」が導入されていることによって、ネットショップ側は重要な個人情報を悪意のあるユーザーから守ると同時に、情報が改ざんをされていないことを証明できるんです。
今まで「常時SSL化」されていなかったネットショップは大丈夫だったのか、心配になっちゃいますね…
ネットショップを「常時SSL化」するとどうなるの？
ネットショップを「常時SSL化」すると、URLが「http://」から「https://」になります。
「http」は「Hyper Text Transfer Protocol」、「https」は「Hyper Text Transfer Protocol Secure」の略です。
【SSLが導入されていないネットショップ】
【SSLが導入されているネットショップ】
こんな感じで、SSLが導入されていないネットショップは、丸で囲まれたビックリマークがURLの先頭につきます。
逆に、SSLが導入されているネットショップは鍵のマークがつき、「保護された通信」という文言と共に、URLの先頭が緑色になります。
SSLが導入されていないネットショップは、丸で囲まれたビックリマークをクリックすると、下の画像のような警告文が表示されます。
【SSLが導入されていないネットショップに表示される警告文】
「Google」は、2014年に「常時SSL化を行なっているWebサイトを検索順位で上位に持ってくるよ。」との発表をしました。
もうこりゃあ「常時SSL化」をしないわけにはいかないですよね。
しかも、「Google」は「2018年7月に導入する『Google Chrome68』から、SSLを導入していないWebサイトには警告を出しますよ。」と発表したんです。
この発表を聞いて、SSLを導入していなかった会社やWebサイトは大慌てといった流れがありました。
その「Google」が発表した内容がこちら
ここ数年の間、私たちはWebサイトがhttps暗号化を導入することを強く推奨してきたため、多くのWebサイトが安全な通信を行うようになりました。
昨年、私たちはhttps暗号化を行なっていないWebページに「安全でないマーク」を表示することで、httpのWebサイトが安全ではないことをユーザーに伝えてきました。
「Google Chrome 68」のリリースで2018年7月から、「Google Chrome」はすべての「http://」で始まるWebサイトに「セキュリティで保護されていないマーク」を表示します。
Webサイトの開発者はWebサイトをhttps通信に移行することを推奨します。
というような内容が書かれています。(途中、省略しています。)
これまでは個人情報を入力するフォームがあるWebサイトのみに「常時SSL化」の導入が推奨されてきましたが、今回からすべてのWebサイトに対象が拡大された感じです。
今回は「EC-CUBE3」を使用してネットショップを運営している人に向けて、ネットショップにSSLを導入する方法を解説していきます。
スポンサーリンク
「EC-CUBE3」で作ったネットショップのSSL導入方法
ネットショップを「ショッピングモール型」で運営している人は、すでに4月頃に一斉に「常時SSL化」の作業を行なったかと思います。また、「ASP型」でネットショップを運営している方も、オプションで「常時SSL化」を簡単に導入できるので、オプションを利用してSSLを導入してください。
今回の「常時SSL化」で一番大変なのは「EC-CUBE」を使ってネットショップを構築されている方。
それなりに作業が発生します。
「EC-CUBE」は「ショッピングモール型」や「ASP型」のネットショップにはない自由度がいいところなんですが、こういったプログラムの書き換えやセキュリティ対策なんかを自分でやらないといけないのが大変なんですよね。
ぜひこの記事を参考に、「EC-CUBE」の「常時SSL化」を進めてくださいね。
「EC-CUBE3」にSSLを導入する前の事前準備
それではまず「EC-CUBE3」で作ったネットショップにSSLを導入する前に、バックアップを取りましょう。
バックアップを取らないと、何かミスがあった時に、ネットショップが表示されなくなって、変な汗が出ますからね。
「EC-CUBE3」のファイルをバックアップ
FTPクライアントでサーバーにアクセスして、「EC-CUBE3」に関するファイルをすべてダウンロードしてください。
【EC-CUBE3のファイルをダウンロード】
「FTPクライアント」については、こちらの記事をどうぞ。
「phpmyadmin」でデータベースをバックアップ
次に「phpmyadmin」でデータベースにアクセスして、データベースに入っている情報をすべてダウンロードしてください。
1.「phpmyadmin」にログイン後、「エクスポート」をクリック
2.「詳細」にチェックを入れ「実行」
3.エクスポートしたいデータベースを選択し「実行」
「フォーマット」が「SQL」になっていれば、特に何かをいじる必要はありません。
「phpmyadmin」のバックアップ方法は、DBOnlineさんでも解説されているので、参考にしてみてください。
SSLサーバー証明書の購入
「EC-CUBE3」を使ってネットショップを構築しているということは、どこかのレンタルサーバーを借りているということですよね。(ご自身でサーバーを運用している方は、この記事を見ていないと思います。笑)
ほとんどのレンタルサーバーは「https://」での接続に対応していると思いますが、たまに「https://」での接続に対応していないレンタルサーバーがあります。そういった場合はレンタルサーバーの乗り換えも検討しないといけないので、事前に確認しておきましょう。
次に「EC-CUBE3」の「常時SSL化」をするために、「SSLサーバー証明書」というものを購入しなければなりません。
レンタルサーバーを「ロリポップ」や「さくらのレンタルサーバー」などを使っている方は、すごく簡単に購入→設定できるので、やってみてください。
今回は「ロリポップ」の場合のSSLの購入をご説明しますね。
1.「ロリポップ」にログイン後、「セキュリティ」の「独自SSL証明書導入」をクリック
2.「独自SSL証明書お申し込み・設定」ページで「無料」か「有料」かを選択
ちなみにネットショップは有料の独自SSL証明書がおすすめです。
【有料の独自SSL証明書】
3.「独自SSLを申し込む」ボタンをクリック
※だいぶ前に独自SSLを申し込んだので、「SSL保護有効」になっていますが、まだ申し込みを行なっていない場合は「SSL保護無効」となっています。「独自SSLを申し込む」ボタンをクリックしてください。
「wwwあり」と「wwwなし」のURLが表示されていると思いますので、両方申し込んでください。
すごく簡単ですね！
有料のSSLに申し込む場合も、独自SSLを導入したいURLを選んで、支払い情報(クレジットカード情報など)を打ち込むだけなので、びっくりするほど簡単です！
無料SSLと有料SSLの違い
無料のSSL証明書を発行してくれるのは「Let’s Encrypt」というサービス。アメリカの「電子フロンティア財団」というところがSSL証明書を発行しています。
無料のSSLでもセキュリティレベルは有料のSSLと一緒です。ただ、有料SSLのように別途サービスやサポートがないという違いがあります。
また、「企業認証SSL」や「EV SSL」などの有料SSLに申し込むと、審査や手続きが複雑なぶん、下記のようにURLに会社名が入り、会社が実在していることも証明してくれます。
GMOインターネット株式会社さんのURL部分をお借りしております。
とっても信頼性の高いURLということを証明してくれます。
「EC-CUBE3」で作ったネットショップのSSL導入作業
1.「https」のドキュメントルートに「EC-CUBE3」のファイルを全てコピーする。
もし、「http」と「https」のドキュメントルートが違う場合、ファイルの移動が必要です。
「http」のドキュメントルートに入っているファイルをすべて、「https」のドキュメントルートに移動するだけです。
FTPクライアントで、ひょいっと移動して下さい。
2.「セキュリティ管理」画面で「SSLを強制」にチェック
次に、「EC-CUBE3」の管理画面にログインし、「セキュリティ管理」画面を開きます。
※この時、URLを「https://」でログインしてください。いつものURLの「http://」を「https://」にするだけで大丈夫です。
【EC-CUBE3の「セキュリティ管理」】
設定＞システム情報設定＞セキュリティ管理
次に「SSLを強制」にチェックを入れます。
【EC-CUBE3の「セキュリティ管理」】
サイトセキュリティ設定＞SSL制限＞SSLを強制にチェック
そして、「設定」ボタンを押します。
これで、「セキュリティ設定を完了しました。」とメッセージが表示されたら、管理画面からの設定は終了です。
「http://」でご自身のネットショップにアクセスしても、「https://」に自動的に転送されるようになります。
ちなみに「http://」でも管理画面にアクセスできますが、「サイトセキュリティ設定」の「SSLを強制」は選択できません。
「httpsからの接続でなければSSL制限を設定できません。」と出てしまうんですね。
「http」のドキュメントルートにあるファイルは削除する。
もし「http」と「https」のドキュメントルートが違うレンタルサーバーを使用している場合、ここまでの作業が完了したら、「http」のドキュメントルートに入っているファイルをすべて削除してください。
「え！？消しちゃって大丈夫なの？」と思うかもしれませんが、先ほどバックアップを取ったので大丈夫。
逆に、「http」のドキュメントルートにEC-CUBEのファイルを残しておくと、セキュリティ的にあまりよろしくない為、削除してくださいね。
3.ネットショップ内にある「http://」のリンクを修正
次に、ネットショップ内にある「http://」のリンクを「https://」に修正します。
CSSや画像を絶対パスで指定している場合、絶対パス全てを「https://」に変更しなければいけません。
僕も、SSLを導入する時になって、「相対パスで指定しておけばよかった・・・」と後悔しました。
「絶対パス」とは、「http://〇〇.com/img/△△.jpg」みたいな形でファイルを指定すること。
「相対パス」とは、「../img/△△.jpg」のような形でファイルを指定することです。
「絶対パス」と「相対パス」の違いは、TechAcademyさんの記事を参考にしてみてください。
もしそのページに「http://」の記述がある場合、
といった感じで、「https://」の部分がグレーで表示されます。
例にならって、丸で囲まれたビックリマークをクリックすると、「このサイトへの接続は完全に保護されていません」と警告文が表示されます。
その場合、どのファイルが「http://」で指定されているかを知るために、そのページ上で右クリックをして、「検証」をクリックします。
右クリック＞検証
そうすると、下記のような表記が右側からにょきっと出てきます。そこで、左下にある「Console」をクリックしてください。
「Console」をクリック
すると、下記のような画面に切り替わります。
画像の赤い枠が重なってしまい見づらくてすいません。
この画像を解説すると、
- 1というURLの
- 2という画像が「http://」のままですよ。
ということです。こうやって、黄色い色がついて教えてくれるんですね。(便利！)
この機能を駆使して、ネットショップのすべての「http://」を「https://」に書き換えていきましょう。
4.「http://」へのアクセスを301リダイレクト
次に、「http://」へのアクセスを301リダイレクトします。
「301リダイレクト」とは、WebサイトのURLが変わった場合に、転送前のURLが持っていた被リンク等の評価ごと新しいURLに引き継ぐ転送方法です。
具体的には、「.htaccess」に下記の設定を書き込みます。
「.htaccess」とはApacheを使っているWebサーバーの設定ファイルのこと。
ちなみに「Apache」とは、世界中で使われている「Webサーバーソフトウェア」です。
なんだかどんどん深みにハマっていきそうですね。(笑)あまり深く掘っていくと終わらないので、「Apache」と「.htaccess」の説明はこれくらいにしておきます。
「『.htaccess』って何？」という方は、ad-libraryさんの記事を参考にしてみてください。
【.htaccessへの記述】
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://〇〇.com/$1 [R=301,L]
</IfModule>
といった感じで書き込みます。
「.htaccess」を置く場所は一番上の階層。「app」や「html」ファイルが置いてある場所ですね。
これでEC-CUBE側での変更は完了です。
お疲れ様でした。あと、もう一息！
最後に「Google Search Console」の設定を行いましょう。
5.「Google Search Console」の設定を変更
Googleは「http://」と「https://」、「wwwあり」と「wwwなし」をすべて別のサイトとして認識するため、「同じネットショップだよ！」ということをGoogleに知らせなければいけません。
そこで、「Google Search Console」でその設定をします。
「Google Search Console」にログイン後、「プロパティを追加」ボタンを押して、下記の4つのURLを登録します。
- http://〇〇.com
- http://www.〇〇.com
- https://〇〇.com
- https://www.〇〇.com
1.「Google Search Console」の「プロパティを追加」ボタンでURLを追加
ここからは「たぶろぐ」の「Google Search Console」でご説明します。
その後、少し時間が経つと、「http://〇〇.com/ の検索パフォーマンスを改善できます。」というメッセージが届きます。
そのメッセージの中にある「サイトを追加」で、上記の他の3つのURLも登録します。
2.メッセージの「サイトを追加」から他の3つのURLも登録
4つのURLを追加できたら、登録されたURLを押すと、下の画面に切り替わります。
下の画面になったら、右上の歯車マークにカーソルを合わせ、「サイト設定」をクリックします。
3.各URLの「サイトの設定」をクリック
「サイトの設定」ページに移動すると、下の画面に切り替わります。
下の画面になったら、「URLを〇〇と表示」の表示させたい方のURLのラジオボタンをチェックします。
4.表示させたい方のURLのラジオボタンをチェック
これを各URLで4回やってください。
以上で、「EC-CUBE3」のネットショップにSSLを導入完了です。
長丁場、お疲れ様でした！
スポンサーリンク
まとめ
今回は「EC-CUBE3系のネットショップにSSLを導入する方法」というテーマでお送りしてきました。
「EC-CUBE3」にうまくSSLを導入できましたか？
もし「EC-CUBE3」にうまくSSLを導入できなかったり、分かりづらいところがあったら、お問い合わせまでご連絡ください。
今回のおさらいとして、
- 必ずバックアップを取る。
- SSL証明書を購入する。
- 「EC-CUBE3」の管理画面で「SSLを強制」にチェックを入れる。
- CSSと画像のURLを修正する。
- 「Google Search Console」に全URLを登録する。
という手順で行いました。
まだ「EC-CUBE3」の「常時SSL化」をしていない人は、ぜひ上記の方法で問題を解決してくださいね！
「相談する人がいなくて困ってるんです！」という方も、ぜひお気軽にお問い合わせください！
以上、ネットショップコンサルタントの「たぶ」でした。
EC-CUBE3に関しては、こちらの記事もおすすめです。
【越境ECならShopify】
【無料のネットショップならSTORES】
