<aside class="msg alert"><span class="msg-symbol">!</span><div class="msg-content">
<p>この記事は自分が社内でまとめていたものを転載しております。<br>
情報が古い恐れがあります。ご了承ください。<br>
投稿日：2020/11/11</p>
</div></aside>
<h1 id="%E7%92%B0%E5%A2%83">
<a class="header-anchor-link" href="#%E7%92%B0%E5%A2%83" aria-hidden="true"></a> 環境</h1>
<ul>
<li>EC-CUBE</li>
<li>WordPress</li>
<li>Apache</li>
</ul>
<p>某サイトのサーバー移管対応、公開後にトラブルが発生<br>
あるページのiframeで取得しているwordpress記事一覧が表示できない不具合が確認できた。</p>
<h1 id="%E5%89%8D%E6%8F%90%E7%9F%A5%E8%AD%98">
<a class="header-anchor-link" href="#%E5%89%8D%E6%8F%90%E7%9F%A5%E8%AD%98" aria-hidden="true"></a> 前提知識</h1>
<p>eccube内にwordpressが組み込まれたサイトのサーバ移管対応。<br>
移管後はeccubeとwordpressは別ドメイン、別サーバーで管理することになった。<br>
表示できなくなったのはeccubeのiframeタグ内。wordpressの記事一覧を取得しようとしている。</p>
<h1 id="%E5%8E%9F%E5%9B%A0%E3%82%92%E7%89%B9%E5%AE%9A%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#%E5%8E%9F%E5%9B%A0%E3%82%92%E7%89%B9%E5%AE%9A%E3%81%99%E3%82%8B" aria-hidden="true"></a> 原因を特定する</h1>
<p>「iframe 接続できない」で検索したら、wordpress側のサーバー設定が原因らしいことがわかった。</p>
<h3 id="%E3%83%88%E3%83%A9%E3%83%96%E3%83%AB%E7%99%BA%E7%94%9F%E5%BD%93%E6%99%82%E3%81%AEwordpress%E3%81%AEhttpd.conf">
<a class="header-anchor-link" href="#%E3%83%88%E3%83%A9%E3%83%96%E3%83%AB%E7%99%BA%E7%94%9F%E5%BD%93%E6%99%82%E3%81%AEwordpress%E3%81%AEhttpd.conf" aria-hidden="true"></a> トラブル発生当時のwordpressのhttpd.conf</h3>
<div class="code-block-container"><pre><code>Header append X-Frame-Options SAMEORIGIN
</code></pre></div><p>この記述がいけなかったらしい<br>
自分自身以外のiframeは不可の設定にしていた。<br>
旧環境ではwordpressはeccube内に存在しており、同一ドメインなのでiframeでのアクセスが可能だったが<br>
別サーバー、別ドメインとなったため、iframeからのアクセスができなくなったようだ。</p>
<h1 id="%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95%E3%82%92%E8%AA%BF%E3%81%B9%E3%82%8B">
<a class="header-anchor-link" href="#%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95%E3%82%92%E8%AA%BF%E3%81%B9%E3%82%8B" aria-hidden="true"></a> 設定方法を調べる</h1>
<p>多分X-Frame-Optionsの設定をいじればどうにかなるだろうと思い調査を進めると下記ページを発見<br>
<a href="https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/X-Frame-Options" target="_blank" rel="nofollow noopener noreferrer">X-Frame-Options - HTTP | MDN</a></p>
<blockquote>
<p>X-Frame-Options には二つの有効なディレクティブがあります。</p>
<p>X-Frame-Options: DENY<br>
X-Frame-Options: SAMEORIGIN<br>
ディレクティブ<br>
DENY を指定した場合は、他のサイトからフレームにページを読み込もうとした時に失敗するだけでなく、同じサイトから読み込もうとした時にも失敗します。一方、 SAMEORIGIN を指定した場合は、フレームの中のページを含むサイトが、ページを提供しているサイトと同じである限り、フレーム内でページを利用することができます。</p>
<p>DENY<br>
サイト側の意図に関わらず、ページをフレーム内に表示することはできません。<br>
SAMEORIGIN<br>
ページは、ページ自体と同じオリジンのフレーム内でのみ表示されます。仕様書ではこのオプションを最上位、親、チェーン全体のどれに適用するかをブラウザーベンダーに任せていますが、すべての生成元が同じオリジンでない限り、利用価値がないと議論されています。 (バグ 725490 を参照)。対応の詳細はブラウザーの互換性もご覧ください。<br>
ALLOW-FROM uri (廃止)<br>
これは廃止されたディレクティブであり、最近のブラウザーでは動作しません。使用しないでください。対応している古いブラウザーでは、ページは指定されたオリジン uri のフレーム内でのみ表示されます。なお、従来の Firefox では SAMEORIGIN と同じ問題がありました。 — フレームの生成元が同じオリジンであるかどうかをチェックしません。 Content-Security-Policy ヘッダーには frame-ancestors ディレクティブがあり、代わりにこれを使用することができます。</p>
</blockquote>
<p>X-Frame-Optionsでは特定サイトからのアクセスを許可するような設定はできず<br>
自分自身のページのみ許可、または、すべて拒否の2つしか設定できない<br>
URIを指定できるALLOW_FROM_uriは使用してはいけない</p>
<p>しかし、ALLOW_FROM_uriの項をみるとContent-Security-Policyならできるとのことなのでそちらを調べる</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__d0bc0bed5c493" src="https://embed.zenn.studio/card#zenn-embedded__d0bc0bed5c493" data-content="https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FHTTP%2FHeaders%2FContent-Security-Policy" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Content-Security-Policy" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Content-Security-Policy</a></p>
<p>このうち、ディレクティブframe-ancestorsあるいはframe-srcを使うといいらしい</p>
<h1 id="%E5%AF%BE%E5%BF%9C%E5%86%85%E5%AE%B9">
<a class="header-anchor-link" href="#%E5%AF%BE%E5%BF%9C%E5%86%85%E5%AE%B9" aria-hidden="true"></a> 対応内容</h1>
<p>wordpres側のhttpd.confを修正することにした</p>
<h3 id="%E4%BF%AE%E6%AD%A3%E5%BE%8C%E3%81%AEhttpd.conf">
<a class="header-anchor-link" href="#%E4%BF%AE%E6%AD%A3%E5%BE%8C%E3%81%AEhttpd.conf" aria-hidden="true"></a> 修正後のhttpd.conf</h3>
<div class="code-block-container"><pre class="language-apache"><code class="language-apache">#Header append X-Frame-Options SAMEORIGIN
Header always set Content-Security-Policy: "frame-ancestors 'self' https://hoge.jp;"
</code></pre></div><p>frame-ancestorsでiframeやobjectタグを許可し、'self'で自分自身を指定し、例外としてhoge.jpは許可している。</p>
<p>…という意味らしい<br>
httpd.serviceを再起動して検証する</p>
<h1 id="%E6%A4%9C%E8%A8%BC">
<a class="header-anchor-link" href="#%E6%A4%9C%E8%A8%BC" aria-hidden="true"></a> 検証</h1>
<p>huge.jpからはアクセスできて、それ以外のサイトからはアクセスできない設定であればよいので<br>
自分の持っていたhoge.jpのローカル環境でiframeのアクセスができるか検証してみた。<br>
検証したところ、ローカル環境からのアクセスは拒否され、hoge.jpからアクセスが確認できた。</p>
<h1 id="%E5%8F%82%E8%80%83">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83" aria-hidden="true"></a> 参考</h1>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__ddb30508f5845" src="https://embed.zenn.studio/card#zenn-embedded__ddb30508f5845" data-content="https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FHTTP%2FHeaders%2FX-Frame-Options" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/X-Frame-Options" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/X-Frame-Options</a></p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__ea1db382af3be" src="https://embed.zenn.studio/card#zenn-embedded__ea1db382af3be" data-content="https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FHTTP%2FHeaders%2FContent-Security-Policy" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Content-Security-Policy" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Content-Security-Policy</a></p>


iframeタグが動作しなかったのでなんとかした

トラブル発生当時のwordpressのhttpd.conf

Discussion