Bloggerでhttpsリダイレクトが強制されてからiframeで埋め込んだGoogle Mapsが表示されない問題への対処

問題

今さら気づいたのですが、ブログ(ブロガーです)の記事に埋め込んだGoogle Mapsが表示されなくなっていました。考えられるのは最近httpsリダイレクトが強制されるようになったこと。実際デバッグコンソールを見ると、以下のようなエラーが出ています。以前のGoogle Maps埋め込みはhttpだったからのようですね。

解決方法 - NG!

シンプルな解決方法は、記事のソースを修正すること。HTML編集画面で記事を開いて保存しようとすると、httpをhttpsに修正するかどうか聞いてきます。そこで「修正」を選ぶだけなので簡単です。

唯一最大の問題は、記事一つ一つを修正する必要があること。とてもやる気になりません。やるならアクセス数の多い記事から気長にやるくらいでしょうか。

別の方法として、一発で全記事の文字列を置換するサイトもあるようですが、セキュリティ的に恐ろしくてとてもじゃないができません。

解決方法 - OK!

それら以外に一発で解決する妙手はないものか...? しばし考えて、テンプレートにJavascriptを記述し、表示する記事のHTMLソースをダイナミックに変換するようにしたら、うまくいったようです。(全ページ見たわけではないのでたぶんですが。)

具体的には、以下のソースをテンプレートの</body>直前に記述することで、iframe中のhttp://をhttps://に強制変換します。全http://をhttps://に変換してもいいのですが、影響が不明なので、まずはこじんまりとiframeだけにしています。(※テンプレートへの記述時には、" は &quot; にしてください。)

<script type="text/javascript">
  var targets = document.getElementsByTagName("iframe");
  for (i=0;i<targets.length;i++){
    targets[i].src=targets[i].src.replace("http://","https://")
  }
</script>

本スクリプトの適用前はこんな画面でしたが、


適用後はご覧の通り元通り。


Javaコンソールに相変わらずエラーは出ていますが、埋め込まれたGoogle Mapsは表示されるので、おそらく検出タイミングの問題かな?と思っています。完全な対策かどうかは分かりませんが、少なくとも表示はされるようなので、困っている方は試してみてはいかがでしょうか? ただしGoogleの検索順位に影響するかどうかは不明。そこまで考えるならやっぱり記事のソースを修正するしかないでしょうね。

以上、くれぐれも自己責任でお願いします。テンプレートのバックアップさえ取っておけば、失敗しても戻せるので、テンプレートのバックアップだけはしておきましょう。