LoginSignup
35
19

More than 3 years have passed since last update.

jQueryなどを読み込む時に困った話〜httpとhttpsと省略〜

Last updated at Posted at 2018-04-11

自分のホームページでjQueryを読み込もうとしたらエラーがでた。

普通にjQueryを読み込もうとしました。

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

これだと、ローカルでは普通に動くんですが、サーバーに上げてみるとjQueryが読み込まれていない!コンソールを開いてみたら

Mixed Content: The page at 'https://XXX/index.html' was loaded over HTTPS, 
but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'. 
This request has been blocked; the content must be served over HTTPS.

と怒られてしまいました。
要は何を言っているかというと、「このページは暗号化された安全なhttpsなのにさ、jQueryを外部のhttpのサイトから読み込むの?それはダメ!httpsにしてくれ!」ってことらしいです。

ちょっと調べてみたところ、「http」「https」は省略できるらしい。

「https」を省略したみたけど…

こんなことを防ぐために、こうやって書けるらしいことがわかりました。

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

こうすると、そのページを
httpで開いている→jQueryのサイトにhttpでアクセス
httpsで開いている→jQueryのサイトにhttpsでアクセス
という風に自動で割り振ってくれるんです!
これで一件落着と思ったんですが…

省略するとローカルで動かん!!

そうなんです。当たり前ですけどローカルで動かしてる分には「ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js」って何?って話な訳ですから、jQueryが動きません。
しかもhttpsなどの省略はgoogle的には非推奨とのこと。詳しいことはわかりませんが、とにかくローカルで動かないのは不便ですよね。

結論:httpsを使おう

そうです。最初からhttpsを使用すれば全てが丸く収まります。表にしてみるとこんな感じ

ローカル サーバー
http ×
省略 ×
https

なのでgoogleさんも奨励しているhttpsを使っていくことにしました。

35
19
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
35
19