http://からhttps://に切り替えるときに気をつけること #Security

だんだんhttps://でのアクセスがスタンダードになってきました。
SEOで有利だったり、iOS9で通信できなくなっていたり、サービスワーカーが使えなかったりでもうやらなきゃいけない雰囲気・・・

そんなわけで先日https化の対応しました

はじめは証明書入れてリダイレクトかけるだけだろ、
って思っていたのですがいろいろと面倒だったのでまとめました。

httpからhttpsにハードコーディングされていた部分を変える

RSSとかOGPとか内部リンクとかもろもろ

恒久的な移転となるので302ではなく301リダイレクトさせましょう。

CDN、WebFont、画像、API、計測のJS、広告などなどたくさんのリソースを今のWebサイトは読み込んでいます。
外部から読み込んでいるリソースも例外ではないので、httpの接続が含まれているとChromeではこんな三角の表示になってしまいます。

Google Analyticsなど大抵のものは自動で切り替えてくれたりしますが、
WordPressなんかだと絶対パスで持っているので、全部のhttp://をhttps://に変更しなければなりません。

src="//~"と始めるとプロトコルに応じてブラウザが勝手に切り替えてくれるので楽です。

<script src="//cdnjs.cloudflare.com/ajax/libs/riot/2.2.4/riot.min.js"></script>

セキュリティ上、Cookieにはsecure属性を設定しておいたほうが良いです。
指定するとhttpsでの通信でしかCookieを送らないようになります。

java

Cookie cookie = new Cookie(name, value);
cookie.setSecure(true);

localStorageとsessionStorageの中身が取得できなくなります。
WebStorageの仕様上、同一オリジン単位（プロトコル://ドメイン名:ポート番号）での使用しかできないためです。

ちなみにCookieはデフォルトの挙動はホスト名で判別されるため切り替え後も残ります。

localStorageにどうしても引き継ぎしなければならない場合は、Cookieに保存するかサーバーへ送っておく必要があります。

URLが変わるのでシャルボタンのカウントも0になります。

残す方法としては、ogpタグに過去のhttp://のURLを指定することで対応可能です。

html

<meta property="og:url" content="http://example.com/old" />

TwitterなどOAuthログインなどのコールバック先など