テーマ内アプリと定期配送プラグインのレンダリング順（window.onload）衝突で、商品表示がうまくいかない問題。回避策として商品ページをモーダル内にiframe表示したいが、読み込まれない。
技術的背景: ShopifyはContent-Security-Policy（CSP）のframe-ancestorsで外部からのiframe埋め込みを制限しており、テーマ側でHTTPヘッダー（CSP）を編集して回避するのは実質不可。frame-ancestorsはどのオリジンからiframe埋め込み可能かを制御するヘッダー。
目的: コメントや動画に関連する商品情報・注文ボタンをモーダルで表示し、定期配送プラグインも動作させたい。従来の/products/xxx.jsonでのAJAXレンダリングではプラグインが動作しないため、商品ページ相当の内容を表示したい。
提案された代替案: Section Rendering APIで商品ページ内の特定セクションを取得し、モーダルに表示する方法。プラグインのコード（ソースまたはアプリブロック）がそのセクションに含まれていることが前提。
現状: ヘッダー編集によるiframe許可の具体的解決策は示されず、Section Rendering APIの適用可否が次の検討点。議論は未解決。
shopify themeで開発したアプリがあります。
商品の定期配送プラグインが相性悪く、うまいことレンダリングされません。
(プラグインではwindow.onloadでproduct-fromというクラスの前にレンダリングされるのですが、window.onloadそれより後で商品をレンダリングされるため。)
そこで、htmlの中で商品をiframeで表示しようと考えて、実装してみました。
ここでなぜかiframe内が読み込まれませんでした。
以下のようなhttpヘッダーを設定する必要があるのですが、shopifyではヘッダーの編集ができないと伺いました。
Content-Security-Policy: frame-ancestors 'self';
shopifyでhttpヘッダーは編集できないでしょうか？
編集する方法があればご教示いただけないでしょうか？
ご質問に関する直接の回答ではないですが、おそらくiframeで表示して解決する問題ではないと思います。
どういうことを実現されたいのかわかっていない点があるので、認識違いであればすみません。
ご返信ありがとうございます。
実は、何かコメントや動画を表示して、関連している商品を表示しようとしています。
その中にモーダル(ダイアログの方がイメージ近いかも)の中に商品の画像や情報・注文ボタンを表示しようと考えています。
以前は商品をajax api(/products/商品a.jsonのような感じ)で取得して、レンダリングしていました。もちろん、この方法はプラグインがうまく動作してくれません。
商品ページであれば、このプラグインが作動してくれるため、この方法を取ろうと考えています。ページを表示するならiframeと考えてこの方法を試しました。
ちなみに、ヘッダーとかをうまいこと削除してモーダルの中身のみ表示するようにthemeはいじってあります。
何か参考になる情報があれば、ご連絡いただけると幸いです。
詳細ありがとうございます。
たしかにiframeで表示できたらよさそうですが、Shopifyはiframe内で表示されないように制御していますので難しいと思います。(そのためのContent-Security-Policyヘッダーですので)
モーダル内に商品ページのコンテンツを表示したい場合、Section Rendering APIを使って商品ページ内の特定のセクションを取得し、表示することで対応できるかもしれません。
https://shopify.dev/docs/api/section-rendering
ただし、該当の定期配送プラグインがそのセクション内に含まれている(ソースコードまたはアプリブロックなどがセクション内にある)ことが前提です。