SSL化されたhttpsサイト下でjsが動かない時の問題点と解決法【すぐに解決できます】

がむしゃらワーカーしゅう丸です!

ローカルでjs動いてたのにサーバーにあげたとたんライトボックス動かなくなった・・・。何もわからんけどデベロッパーツールで何かmixされたエラーとか出てるけどこれなんなん?

と言った疑問にお答えします。

SSL化されたhttpsサイトでjsが動かない理由

まず”https”って何かというと暗号通信です。
SSL化されたサイトの確認方法はURLを確認して、httpsから始まっていれば、SSL化されたサイトということです。

SSL化?何それ美味しいの?と思うかもですが、安全のために”http”通信の読み込みをブロックしたりする場合があるってことだけ覚えておけばいいかと。

なのでサイト内で”http”通信をしていると動作しないことがあるんです。

”https”通信下でjsが動かなくなるほとんどの原因は、jsをgoogleのCDNから呼び出している場合です。

ヘッダにこんな記述があるか確認してみましょう。

この記述があってjsが動かない人は見て欲しいのですが、srcの中がhttpになっているかと思います。

ここが”http”になっている場合は、jsがうまく作動しない原因になっています。
https化されたサイトなのに、サイト内でhttp通信してるので、うまく読み込まれないんです。

解決方法

解決方法は3つあります。

その①:CDNをhttpsに変更する

これが一番簡単でおすすめかなと。

CDNが”http”になっているので”https”に変更するだけで問題解決です。

簡単ですね。

その②:jsをダウンロードする

jsをダウンロードしてCDNを使わない方法。

面倒ですが、CDNを通さないので不具合が解消されます。
ローカルでインターネット環境がない場所で作業する方はこちらがいいかと思います。

その③:プロトコルを指定しない

プロトコルを指定しなくてもCDNは読み来れます。

なので、”http”、”https”を記述しないでCDNを設定すれば、jsが動かない問題は生じないです。

とはいえ、”/”を間違って消してしまったりとあまりおすすめの方法ではありません。

まとめ

ローカルでjsが動いてたのにサイトに上げた途端に、ライトボックス動かない。なんてことはよくあるので、まずはCDNをチェックしてみてください。

おすすめの方法はその①のCDNの”http”を”https”に変更する方法ですね。

一番単純でわかりやすいかと思います。