Google Map が ‘X-Frame-Options’ to ‘sameorigin’ エラーを出して表示されない

経緯

遥か過去に Google Map の埋め込みをしていたページでいつの間にかエラーが発生するようになっていました。

Refused to display ‘http://maps.google.co.jp/’ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’.

エラー文を読むと X-Frame-Options: sameorigin が Google Map からのレスポンスヘッダに付いていることが原因のようです。

Google Map埋め込みでのエラー
Google Map埋め込みでのエラー

なお、埋め込みのiframeタグは以下のようなコードです。

<iframe
    src="https://maps.google.co.jp/maps?q=G3VQ%2B655+%E3%82%AA%E3%83%BC%E3%83%A0%E3%82%B9%E3%82%AB%E3%83%BC%E3%82%AF%2C+%E3%82%A4%E3%82%AE%E3%83%AA%E3%82%B9&amp;z=18&amp;iwloc=J&amp;t=m&amp;output=embed"
    width="600"
    height="600"
    frameborder="0"
    scrolling="no"
    marginheight="0"
    marginwidth="0"
></iframe>

原因と対処

直接原因としては Google Map の埋め込みURL が http://maps.google.co.jp/maps?～ だったことが原因でした。対処としては、 https://maps.google.co.jp/maps?～ にすればOKです。

そもそもiframeタグによる埋め込みが存在するページそのものが https://example.com/～ の場合はそもそもHTTPS通信の中にHTTP通信が混在している、ということで別の理由でエラーになってしまいます。

今回はそうではなく、埋め込みがしているページが http://example.com/～ だったのですが、だからこそ X-Frame-Options: sameorigin で制約を設けている(Google Map との通信はHTTPS通信化するか、できない名合は同じオリジンのみ、として通信のセキュリティを担保する)、ということだろうと考えられます(そもそも今どきHTTPSではないって……というところは至極その通りですが……)。

そこで問題を解決するには、 Google MAp との通信をHTTPS通信にする、つまりURLを http://maps.google.co.jp/maps?～ から https://maps.google.co.jp/maps?～ にすればOK、ということです。

検索すると、埋め込み用のパラメータ &output=embed を &output=svembed にすれば良い、という情報もありましたが、今回はその方法ではNGでした。

参考

パラメータ

Google Map iframe

この記事を書いた人

アルム＝バンド

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。

記事一覧