読者です 読者をやめる 読者になる 読者になる

ぶるーすくりーん

ぽんこつプログラマ日記

httpsでLiveReloadを使おうとしてちょっとはまった話

httpsSSL)環境でLiveReload使おうとしたら、LiveReloadしてくれなくってちょっとはまった話。

LiveReload は開発時に使用するものだから、https で使うって今までなかった。
けど、Baas 使ってアプリつくろうと思ったら、あれ、LiveReloadきかないじゃんって悪戦苦闘したので、その記録です。

環境

なんで LiveReload できないの?

使っている LiveReload クライアントによって、動作は違うかもしれないけど、Chrome Extension の LiveReload は、https にアクセスしているときでも、 LiveReload 開始すると、今見ているページに script で以下を追加する。

<script src="http://127.0.0.1:35729/livereload.js?ext=Chrome&amp;extver=2.0.9"></script>

でも、https のページから http のスクリプトを呼び出すことになるので、これは危険だと Chrome さんが判断して無効にしてしまう。
このとき、Chrome の Console を見ると、以下のようなエラーメッセージが出力される。

Mixed Content: The page at 'https://xxxx/index.html' was loaded over HTTPS, but requested an insecure script 'http://127.0.0.1:35729/livereload.js?ext=Chrome&extver=2.0.9'. This request has been blocked; the content must be served over HTTPS.

で、LiveReload の script を呼び出せないから、いくら LiveReload に change メッセージを送信してもブラウザがリロードされないという現象になってしまう。

回避方法

自分で作成中のページにアクセスして発生している現象であれば、Chrome さんに、このページについては http の呼び出しを例外的に許可する設定をすることで回避できる。

URL 表示欄の右端にある f:id:tajima0111185:20150128143858p:plain をクリックして、 load unsafe script ボタンをポチッとする。
※セキュリティ的に安全でないことをすることになるので、どんなページでも無条件にポチっていいものではありません。

f:id:tajima0111185:20150128143926p:plain

これで、https 環境でも LiveReload を楽しむことができる。やった。

もしかしたらこんな方法もあるのかな

そもそも、https にアクセスしているのだから、 LiveReload のスクリプトhttps で埋め込めれば、もっとまっとうな解決ができる。
ただ、Chrome Extension の LiveReload を https で埋め込む方法については、調べたけどわかんなかった。

もし、script で https://127.0.0.1:35729/livereload.js を埋め込めるのであれば、あとは LiveReload サーバを https で起動してあげればいい。
https での起動方法や環境設定方法は、以下のページがとてもわかりやすく、参考になりました。

Complete guide to livereload over ssl (https) using grunt watch