目的

Safari で Shopify 埋め込みアプリを開くと、次のエラーが発生して画面が描画されないので、これの原因と解決方法を調べる。

[Error] Unrecognized Content-Security-Policy directive 'worker-src'.

Keisuke Inaba

原因

Safari で Content-Security-Policy (CSP) の worker-src directive がサポートされていないことが直接的な原因。

これは Shopify のウェブサーバーから Shopify 管理画面に iframe でアプリを描画する時に起きている模様。

参照元

I am still trying to wrap my head around the issue, but what I think is happening is this:

When the Shopify admin page is loaded in the browser, Shopify's web server is sending along a Content-Security-Policy header containing the "worker-src" string which is unrecognized / unsupported in Safari.

Because Safari doesn't recognize that string, it defaults to the strictest possible interpretation, which is not to allow loading of iframes from external sources. Thus, the iframe that loads the embedded app does not get rendered.

At the moment of writing this post "worker-src" is still not supported for Safari.

Keisuke Inaba

問題の整理

iframe での埋め込み時に問題発生。
クッキーを利用していないアプリでも同様のエラーが報告されている。（よって認証に session token を使っていても問題発生すると考えられる。）

参照元

Our embedded app doesn't use cookies so I don't think this thread is relevant to our problem - unless I've missed something.

Same here. My app does not use cookies, so solutions like this do not apply.

Keisuke Inaba

解決案

上記スレッドも未解決のままであるように、アプリ側で対応できる問題ではなく、Shopify 側の対応が必要。

根本的な解決ではないが、同エラーが発生する Safari などのブラウザでは埋め込みせず、別ウィンドウで使ってもらうようにする方法が考えられる。

参照元

The problem is, safari doesn't allow iframe to use session, my solution was forcing to open app in new window in safari.