Google マップのコードをiframeで埋め込むと、httpsでエラーが出るという症状に悩まされて睡眠不足になったお話
どうも。
会社の中で最年長、日々着々と老化する頭脳で、日々刻々と進化していくWEBと格闘しているWEBプランナーの花沢です。
この記事のタイトルを読んで、一般の方的には「なんのこっちゃ」と思われるかと思いますが、ここ最近、これに悩まされているWEBクリエーターの方って結構居るんじゃないでしょうか。
私も少し前から相当悩まされたので「記録」として書いておきます。検索で辿り着いた方の参考になれば幸いです。
の、前にちょっと余談。
ご存じの様に、現在のインターネットでは、我々の様にWEB関連を生業にしている者だけでなく、一般の方も様々なサービスで「Google」さんにお世話になっております。
検索エンジンに始まって、Youtube、Android OS、Gmail、Chrome、マップ、アクセス解析、、、他にもまだまだたくさんあって、それらに完全に依存してるわけです。なんだったら、軽く支配されてると言っちゃってもいいかもしれませんね。
とは言え、そんなGoogleでも、勇んでスタートしたは良いものの、見事にコケてしまったサービスが過去には沢山あります。精力的というかなんというか、トライ＆エラーしまくりなんですよね。ちなみに、Googleの廃止された（される）サービスを一覧できるサイトがありますので、興味のある方はぜひ(笑)。
廃止予定はギロチン、廃止されたものは墓石がアイコン表示されているというシュールなサイトです(笑)。
さて、本題へ。
数週間前、当社でSSL化（サイト暗号化）したクライアント様のWEBサイトをチェックしていたら、通常であればURLの前に鍵アイコン「」が表示されるはずなのに、エクスクラメーション（ビックリマーク）「」が表示されている事に気が付きました。
マークをクリックしてみると
このサイトへの接続は完全には保護されていません
このサイトで目にする画像は、悪意のあるユーザーによって差し替えられたものである可能性があります。
うげっ。これは印象悪い。
エラーの出ていないサイトと比較をしてみると、どうやらGoogle マップをiframeで埋め込むとこの状態になるらしい事が判明。
※当社の「会社案内のページ」にはGoogle マップを埋め込んであるのでアクセスしてURLのマークをチェックしてみて下さい。
原因が解ればこっちのもの、さっそく対策を開始。
しかし、あれやこれやとやってみるも解消せず。
連日、Google ChromeでGoogle マップのエラーが表示されるのを回避する方法をGoogleで検索するという、なんとも空しい作業を繰り返し、唯一得た情報は
<iframe src="https://www.google.com/maps/embed?pb=xxxxx" width="800" height="600" frameborder="0" style="border:0" allowfullscreen></iframe>上記の埋め込みコードの「https」を「#104;ttps」に変えてやるというもの。 しかし、これでは解消せず。むー、、、難しい。
悩み始めて数日目、深夜1時。
デバックで吐き出されたエラーコードをボーっと見つめていると
Mixed Content: The page at 'https://XXXXX.XXX' was loaded over HTTPS, but requested an insecure image 'http://maps.gstatic.cn/mapfiles/embed/images/google4.png'. This content should also be served over HTTPS.、、、え？「maps.gstatic.cn」、、、「.cn」？中国？
Googleのロゴを中国のサイトから読み込んでるの？
ていうか、そもそもGoogleのロゴを読み込む画像のURLがhttpsになってないけど。
http://maps.gstatic.cn/mapfiles/embed/images/google4.pngこの画像のURLにアクセスするとSSLエラーで「」が表示される。
んじゃ、httpをhttpsにしてアクセスしてみると
https://maps.gstatic.cn/mapfiles/embed/images/google4.png、、、エラーが出ない。
つまりGoogleのロゴマークの読み込みURLがSSL化（https記述）されていないっていうのが原因？
( ﾟдﾟ)ﾎﾟｶｰﾝ
という事で、これが原因かどうかは解りませんが、とりあえず Googleさんにフィードバックを送って修正を待ってみたいと思います。
てか、俺の睡眠時間を返してくれ。
では、また。
2019年9月2日 追記
休み明けに出社して確認したところ、
https://maps.gstatic.com/mapfiles/embed/images/google4.pngとなっていました。修正されたようですね。
私のフィードバックが効いたのかどうかは定かでは無いですが、とりあえず一件落着。
