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”に変更する方法ですね。

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

テックアカデミーのロゴ

TechAcademyは最大手のオンラインプログラミングスクール。コースは24種類と豊富で幅広く学べるのが特徴。完全無料(0円)で1週間無料体験授業が受講可能。無料体験期間中にメンターのオンライン面談を受けるとAmazonギフト券500円がもらえます。

» 公式サイトを見る
TECHEXPERTのロゴ

TECH CAMPは転職に特化したプログラミングスクール。転職成功率は98%で、転職できなければ受講料全額返金の制度あり。無料カウンセリングで受講内容からエンジニア需要まで疑問が全て解決できます。

» 公式サイトを見る
TechBoostのロゴ

TechBoostはBranding Engineerが運営するオンラインプログラミングスクール。フリーランス案件求人midworksも運営しているので、卒業後の進路が転職、フリーランスと選択肢が多いのが特徴です。無料説明会あり。

» 公式サイトを見る