https(SSL)通信の環境下でjavascriptが動かなくなる場合の原因と解決方法

ローカルやデモ環境で問題なく動作確認したファイルを本番環境にアップしたら、javascriptが動かない…こんな経験ないでしょうか?

先輩への質問の返答が、全部「ググレカス」

その本番環境が「https(SSL)」で通信している場合は、スクリプトの記述方法に原因があるかもしれません。今回は、https通信下でjavascriptが動かなくなった場合の原因と対応方法を紹介します。

https通信下でjavascriptが動かない原因

「https」によるSSL暗号通信下では、安全のため「http」通信の読み込みをブロックすることがあります。つまり、Webページ内で「http」通信をしていると上手く動作しないということです。

https通信下でjavascriptが動かなくなる時の原因のほとんどは、jQueryをGoogleなどのCDNから呼び出している場合だと思います。

<script src="http://ajax.googleapis.com/ajax/libs/
jquery/1.9.1/jquery.min.js"></script>

ヘッダなどにこのような記述がされていないでしょうか。

https通信下でjQueryを動かす方法

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

1つ目は、jQuery本体をダウンロードして自分のサーバーで動かす方法。CDNを使う必要性が特にない場合は、この方法でも問題ありません。

2つ目は、呼び出し先のhttpをhttpsに変更する方法

<script src="https://ajax.googleapis.com/ajax/libs/
jquery/1.9.1/jquery.min.js"></script>

3つ目は、プロトコルを指定しない方法

<script src="//ajax.googleapis.com/ajax/libs/
jquery/1.9.1/jquery.min.js"></script>

どのやり方でも大丈夫ですが、3つ目の方法が一番汎用性が高いのでおすすめです。この記述方法はjavascriptに限らず、CSSや画像のパスの指定にも使えるので、覚えておくと便利です。

ただし、プロトコルを指定しない記述だとローカル環境で動かない場合があるので、その点は注意。

近年はSSL対応の有無がSEO対策にもつながることもあり、採用しているWebページもどんどん増えていますね。もし、SSLに移行して動作がおかしくなった場合は、どこかでhttp通信をしていないか確認してみましょう。

関連する記事

この記事が気に入ったら
「いいね!」しよう

この記事が気に入ったら
「いいね!」しよう

最新情報をお届けします

コメント