iframeタグが動作しなかったのでなんとかした
環境
- EC-CUBE
- WordPress
- Apache
某サイトのサーバー移管対応、公開後にトラブルが発生
あるページのiframeで取得しているwordpress記事一覧が表示できない不具合が確認できた。
前提知識
eccube内にwordpressが組み込まれたサイトのサーバ移管対応。
移管後はeccubeとwordpressは別ドメイン、別サーバーで管理することになった。
表示できなくなったのはeccubeのiframeタグ内。wordpressの記事一覧を取得しようとしている。
原因を特定する
「iframe 接続できない」で検索したら、wordpress側のサーバー設定が原因らしいことがわかった。
トラブル発生当時のwordpressのhttpd.conf
Header append X-Frame-Options SAMEORIGIN
この記述がいけなかったらしい
自分自身以外のiframeは不可の設定にしていた。
旧環境ではwordpressはeccube内に存在しており、同一ドメインなのでiframeでのアクセスが可能だったが
別サーバー、別ドメインとなったため、iframeからのアクセスができなくなったようだ。
設定方法を調べる
多分X-Frame-Optionsの設定をいじればどうにかなるだろうと思い調査を進めると下記ページを発見
X-Frame-Options - HTTP | MDN
X-Frame-Options には二つの有効なディレクティブがあります。
X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN
ディレクティブ
DENY を指定した場合は、他のサイトからフレームにページを読み込もうとした時に失敗するだけでなく、同じサイトから読み込もうとした時にも失敗します。一方、 SAMEORIGIN を指定した場合は、フレームの中のページを含むサイトが、ページを提供しているサイトと同じである限り、フレーム内でページを利用することができます。DENY
サイト側の意図に関わらず、ページをフレーム内に表示することはできません。
SAMEORIGIN
ページは、ページ自体と同じオリジンのフレーム内でのみ表示されます。仕様書ではこのオプションを最上位、親、チェーン全体のどれに適用するかをブラウザーベンダーに任せていますが、すべての生成元が同じオリジンでない限り、利用価値がないと議論されています。 (バグ 725490 を参照)。対応の詳細はブラウザーの互換性もご覧ください。
ALLOW-FROM uri (廃止)
これは廃止されたディレクティブであり、最近のブラウザーでは動作しません。使用しないでください。対応している古いブラウザーでは、ページは指定されたオリジン uri のフレーム内でのみ表示されます。なお、従来の Firefox では SAMEORIGIN と同じ問題がありました。 — フレームの生成元が同じオリジンであるかどうかをチェックしません。 Content-Security-Policy ヘッダーには frame-ancestors ディレクティブがあり、代わりにこれを使用することができます。
X-Frame-Optionsでは特定サイトからのアクセスを許可するような設定はできず
自分自身のページのみ許可、または、すべて拒否の2つしか設定できない
URIを指定できるALLOW_FROM_uriは使用してはいけない
しかし、ALLOW_FROM_uriの項をみるとContent-Security-Policyならできるとのことなのでそちらを調べる
このうち、ディレクティブframe-ancestorsあるいはframe-srcを使うといいらしい
対応内容
wordpres側のhttpd.confを修正することにした
修正後のhttpd.conf
#Header append X-Frame-Options SAMEORIGIN
Header always set Content-Security-Policy: "frame-ancestors 'self' https://hoge.jp;"
frame-ancestorsでiframeやobjectタグを許可し、'self'で自分自身を指定し、例外としてhoge.jpは許可している。
…という意味らしい
httpd.serviceを再起動して検証する
検証
huge.jpからはアクセスできて、それ以外のサイトからはアクセスできない設定であればよいので
自分の持っていたhoge.jpのローカル環境でiframeのアクセスができるか検証してみた。
検証したところ、ローカル環境からのアクセスは拒否され、hoge.jpからアクセスが確認できた。
参考
Discussion