こんにちは、Webプログラマの篠田です。
今年のはじめに、Googleが発表した「Chrome 62」からセキュリティのさらなる強化を発表しました。
その影響で、表示ページ内に「input」タグが含まれ、入力するとセキュリティ警告がでるようになります。
今日は、WebサイトをSSL化するためのポイントをまとめてみます。
「Chrome 62」で何が変わる？
「Chrome」は、「http://」でWebサイトを表示するとアドレスバーが下記のようになります。
赤枠で囲った「！」が表示されます。
「Chrome 62」からは、この状態で、Webサイト内に「input」があり、かつ「入力をすると」下記のようにアドレスバーの表示が変わります。
また、「input type=”password”」タグがある場合は、強制的にアドレスバーに「保護されていない通信」と表示されます。
※この設定は「Chrome 62」以前から実装されていました。
このように、「Chrome 62」の自動アップデートが実行されるようになると、これまでセキュリティに関心が薄かった一般ユーザーの危機感を煽るようなメッセージが高頻度で表示されるという状況になります。
SSL化のポイント
ここからは、SSL化するときに気をつけておきたい、Webサイトの修正箇所をまとめていきます。
「img」タグの「src」属性
「img」タグの「src」属性が「http://〜」で始まるような書き方をしている場合は、SSL化対応が必要になります。
同じサーバー内にある画像ファイルであっても「http://〜」で記述する「絶対パス」で書かれている場合は「セキュリティの確保がされていないページを読みに行く」という解釈になるため、変更が必要になります。
「link」タグの「src」属性
「link」タグの「src」属性が「http://〜」で始まるような書き方をしている場合は、SSL化対応が必要になります。
これも「img」タグと同様に、「http://〜」で記述されていると「セキュリティの確保がされていないページを読みに行く」という解釈になるため、変更が必要になります。
CSSの「background-image」
盲点になりがちなのが、CSSに書かれている「background-image」が「http://〜」で書かれている場合です。
このパターンも「セキュリティの確保がされていないページを読みに行く」という解釈になるため、変更が必要になります。
同様に、フォントなどを外部から読み込んでいる場合も「http://〜」で呼び出している場合は、変更します。
「a」タグの「href」属性は変更不要な場合もあり
「a」タグの「href」属性は、条件によっては変更が不要になります。
不要なパターンは、「外部へのリンク」になる場合は、SSL化する必要はありません。
あくまでも、SSL化はWebサイト内部の話なので、外部へ移動するリンクに関しては、対応がいりません。
逆に内部リンクの場合は、SSL化の対応が必要になります。
ただし、.htaccess等でリダイレクト設定を行っている場合は、この限りではありません。
外部ファイルを読み込むときのポイント
「jQuery」などの外部ファイルを読み込む場合、多くのサービスではSSLでの接続ができるようになっています。
ですが、製作中のWebサイトがSSL化をするかどうかわからないという場合があります。
そういったときに「http://」と記述するのは、後に対応コストが増える可能性があります。
そういった場合は「http://」を「//」と書き換えることで、対応が可能です。
「//」とすることで、接続先の対応状況に応じて、接続方法を最適にしてくれるという機能があります。
外部ファイルがSSL対応している場合は「https://」と同じ効果を出してくれますので、積極的に活用するとよいです。
内部のリンクの記述方法
Webサイトの作成中に利用する「img」タグなどに「http://」と記述してしまうと、SSL化対応を迫られた時に、作業コストを多く必要とする場合があります。
そのため、制作の段階からファイルの読み込みはすべて「ルートパス」で記述するとSSL化対応が非常に楽になります。
「ルートパス」とは「/img/test.png」といったように「/」はじまりのパスになります。
まとめ
この１年程度でSSL化の波は大きくWeb界隈に広がっています。
現状では、SSL化は「推奨」ですが、近い将来に「必須」になることは十分に想像できる状態となっています。
ALAKIのサイトやこのブログも常時SSL化対応を行っています。
SSL化でお困りの際は、お問い合わせください！
