トップ スタッフ紹介 お問い合わせ コーポレートサイト

お疲れ様です。
市川です。

冬が終わり春がやって来て
寒さから解放されたことを喜びつつ先に見える夏への憂鬱を感じています。
一年は4ヶ月秋、2ヵ月冬を繰り返す感じでいいんじゃないかって思っています。

さて今回の記事は下記のseganaサイト3つを常時SSL化した話になります。

■seganaコーポレートサイト
https://www.segana.co.jp/

■セガナの壺(仮)
https://www.segana.co.jp/blog/

■セガナ女子部
https://www.segana.co.jp/joshibu/

 

SSL(TLS)とは?

“Transport Layer Security(トランスポート・レイヤー・セキュリティ、TLS)は、インターネットなどのコンピュータネットワークにおいてセキュリティを要求される通信を行うためのプロトコルである。主な機能として、通信相手の認証、通信内容の暗号化、改竄の検出を提供する。TLSはIETFによって策定された。

当プロトコルは(特に区別する場合を除いて)SSL (Secure Sockets Layer) と呼ばれることも多い。これは、TLSの元になったプロトコルがSSLであり[1]、そのSSLという名称が広く普及していることによる”

wikipedia Transport Layer Security より抜粋


サイト閲覧したり通販サイトでお買い物したりした際に起きる通信に対して通信相手の認証、通信内容の暗号化、改竄の検出を提供しセキュリティを強化しますということですね。

最近では常時SSL化したサイトも増えて来ていますが、以前はお問い合わせなどの個人情報を扱うページだけ通信を暗号化すれば大丈夫だろうと考えている場合が多かったのではないのでしょうか!(※セガナがまさにそうでした。)

GlobalSignのSSLサーバ証明書を契約していましたが、利用していたのは個人情報を扱うお問い合わせフォームだけでコーポレートサイトの他のページはそのままでしたのでこの機会に3サイトの全てのページを常時SSL化してみました。

 
Googleによる発表
googleの2016年9月の記事にてWebサイトをより安全にするための施策が発表されました。
Google Security Blog
■Moving towards a more secure web
https://security.googleblog.com/2016/09/moving-towards-more-secure-web.html
簡単に言うと、今後Google Chromeのブラウザでは閲覧しているサイトへの接続が安全(HTTPS接続)かどうかを判断してアドレスバーに表示していく表明と、その一環として2017年1月よりパスワードやクレジットカードを使用するページに対して安全性の有無を表示するとのこと。

表示の例としては以下の画像のようになるみたいです。

Google Security Blog Moving towards a more secure webより 

 

Not secure、直訳で「安全でない」
日本のchromeだと下の画像のように「保護されていません」と表示されるようです。
Not secureに比べて具体的かつダメージの少ない仕様になっていますね!



”今のところ”パスワードやクレジットカードを使用するページが対象なので該当ページがHTTPS接続していないページの方が珍しいとは思いますが、表示されてしまっているサイトは早急に対応した方が良さそうですね。

もちろんこの変更はあくまで初期段階でしかなく、今後どんどんセキュリティ警告は厳しくなり、最終的には全てのページが対象となり、更にNot secureの表示も危険度の高い警告のように変わる予定のようです。

Google Security Blog Moving towards a more secure webより

赤い三角の中に!があり、赤い字でNot secure。
日本仕様だとこんな感じでしょうか。


何も知らない人がサイトを訪問した際にこんなのが表示されたら「悪質なサイトじゃないのか?」「ウイルスに感染するんじゃないか?」と思うことでしょう。

いつになるかわかりませんが早めに対応しておくべきですね。

では自分用のメモを兼ねて常時SSLの為に行った修正をご紹介していきます。

 
まずはソース上の属性をSSL用に修正
ますは画像やCSS、JSのリンク先や参照先を修正します。

指定方法が相対パスの場合は関係ないので修正しなくて大丈夫ですが絶対パスで指定している場合は修正が必要です。

例)
【〇相対パスなのでOK】
■画像
<img src=”../images/common/logo.jpg”>
■CSSの指定
background: url(“../images/common/bg.gif”);

【×絶対パスなので修正が必要】
■OGP
<meta property=”og:url” content=”http://www.segana.co.jp” /> ➡ <meta property=”og:url” content=”https://www.segana.co.jp” />
■画像
<img src=”http://www.segana.co.jp/images/common/logo.jpg”> ➡ <img src=”https://www.segana.co.jp/images/common/logo.jpg”>
■CSSの指定
background: url(“http://www.segana.co.jp/images/common/bg.gif”); ➡ background: url(“https://www.segana.co.jp/images/common/bg.gif”)

上記の例はわかりやすいようにhttpsにして書きましたが記述の仕方はプロトコルを省略した記述が簡単ですね。
CDNにホストされているjQueryファイルを読み込む指定と同じ記述の仕方です。

例)
<script src=”//code.jquery.com/jquery-1.11.1.min.js”></script>

この修正を終えていないとSSLの設定をしてもブラウザのアドレスバーには正常に表示されませんので念入りにチェックしてみましょう。



 
いざ、常時SSL化へ!
冒頭で話した通りセガナではお問い合わせフォームのみSSLの設定をしていましたので下記のようにフォルダが分けられていました。


今回は3サイトとも常時SSL化する為に、/ssl/に格納していた/contact/を/www/内へ移行し、SSLのドキュメントルートを/www/に変更します。


zenlogicのカスタマーポータルで見るとドキュメントルートの設定でhttpは/www/のフォルダでSSLは/ssl/のフォルダと分けられていますね。
この設定を修正して/www/のフォルダにSSLのドキュメントルートを設定していきます。

まずはドキュメントルート設定のボタンを押して


SSLドキュメントルートを/sslから/wwwへ変更して保存するだけ。

これだけです。

この設定が終わったらサイトのURLをhttpsに変更してアクセスしてみましょう。
アドレスバーに緑の鍵のマークが表示されれば成功ですね。

 
その他もろもろの修正
■http接続時のリダイレクト設定
現状だとhttp://example.comへ接続するとhttp接続で表示され、https://example.comへ接続するとhttps接続で表示されてしまいますのでhttpでアクセスされたらhttpsへリダイレクトさせてしまいましょう。

■外部ツールの設定
AnalyticsやSearch Consoleなどの外部ツールを使用している場合URLを変更する必要があります。
詳しくは使用している外部ツールの仕様を見てみましょう。

■印刷物やメールの署名などに記載しているサイトのURL
http://からhttps://へURLが変更になったので修正する必要があります。
印刷物に関してはリダイレクトの設定をしていれば今後印刷するものを修正するようにすれば大丈夫ですね。

 

 

 

以上になります。

以前はGoogle検索に関して(少しだけ)優位になるくらいであまり積極的に常時SSL化を検討しなかった人も多いかと思いますが、9月の発表もあり常時SSL化しているサイトも増えてきているようです。

この機会に常時SSL化を試してみるのもいかがでしょうか。

 

ツボ度
枠
pagetop