web-dev-qa-db-ja.com

Safariの外部コンテンツがiframeに読み込まれない

私は外部コンテンツをiframeにロードしようとしています、そしてそれはChromeとFirefoxで働いています、しかしそれはSafariにロードされません。 Safariでは、私はエラーメッセージが表示されます。

X-Frame-Optionsをsameoriginに設定したため、フレーム内にmy_contentを表示することを拒否しました

私の問題は、私のWordPressインストールがサブディレクトリにあることだと思います。

私の外部コンテンツのヘッダには以下が含まれます。

 X-Frame-Options: sameorigin
 Content-Security-Policy: frame-ancestors 'self' https://example.com
 X-Content-Security-Policy: frame-ancestors 'self' https://example.com

この記事では、Safari＆SAMEORIGIN https://halfelf.org/2018/safari-and-sameorigin/ に関連する問題のいくつかの考えられる理由をリストします。私の.htaccessファイルに余分なX-Frame-Optionsがないので、問題が私のWordPressインストールがサブディレクトリにあることに関連しているかどうか疑問に思います。これに対する回避策はありますか？それとも他の原因によるのでしょうか。

htaccessdirectoryiframebrowser-compatibility
1
megseoh

これについてもっと多くの知識を持っている人は私のためにそれを修正しました。私はそれが他の誰かを助けることができる場合に備えてここに答えを投稿しています：

X-Frame-Optionsではなく、Content-Security-Policyディレクティブを使用して[external content]を表示できるようにするため、いくつかの変更を加えて実装しました。 X-Frame-Optionsは以前は非推奨となり、最近では RFC 7034 のように、すべてのX-Frame-Optionディレクティブを置き換えるCSPディレクティブで非推奨になりました。

ただし、Safari iFrameのサポートには、仕様に完全には準拠していないため（多くの問題点があります）。

徹底的な調査の結果、Safariはバージョン10以降（最新は12）のCSFをサポートしています。

  • ただし、サポートはX-Frame-Optionsが未定義の場合にのみ利用可能です。
  • X-Frame-Optionsが定義されている場合は、MDNの仕様に反して、それがCSFを上回ります。
  • SafariおよびWebKitベースのブラウザは、X-Frame-Optionのallow-fromディレクティブをサポートしていないため、特定のサイトにアクセスが許可されません。
  • そしてそれ自体、ホワイトリストのために複数のドメインをサポートしません。

X-Frame-Optionディレクティブを使わずに、Content-Security-Policyディレクティブを使ってiFrameホワイトリストを作成しています。

0
megseoh
X-Frame-Options: sameorigin

それ自体で（そしてより古いブラウザでは）これは確かにアクセスを拒否するでしょう。ただし、準拠しているブラウザでは、Content-Security-Policy:ヘッダーがこれをオーバーライドすると予想されます。

この外部コンテンツを制御できると仮定して、このヘッダーを次のように設定してみましたか。

 X-Frame-Options: allow-from https://example.com

または

 X-Frame-Options: sameorigin, allow-from https://example.com

（Safariはallow-fromディレクティブをサポートしていないかもしれませんが。）

または、このヘッダをすべて削除しますか？

問題がWordPressのインストールがサブディレクトリにあることに関連しているのかどうか疑問に思います。

WordPressをサブディレクトリにインストールしても、これと関係がないのではないでしょうか。

0
MrWhite