埋め込みエラー

Hi Support team!
When I try embedding with the provided js snippet, it will stuck at “Loading Discussion” and I get the following error:
Invalid X-Frame-Options: “ALLOWALL” header from ...
How can I resolve this issue?
Thanks!

遅れてしまい申し訳ありませんが、私も同じ問題に遭遇し、ここで回答があれば助かったと思います。私の問題が現れたのは Firefox を使用した場合のみで、Chrome では問題なく動作しました。解決策として、コンテンツを埋め込んでいるサイトを「CORS 元」設定に追加しました。ヒントはこちらから得ました。

「いいね!」 2

私たちのサイトでも、新しい投稿に対してのみこの問題が発生していることに気づきました。すでに companion topic が作成されている既存の投稿では問題ありません。Invalid X-Frame-Options ヘッダーは実際のエラーというよりも Firefox の警告のようですが、埋め込みが成功しても常に表示されます。

(以前は埋め込みが機能していた既存のトピックを含む)動作する例:

一方、こちらのランディングページ:

では、最終的に Discourse インスタンスから 400 Bad Request のレスポンスが返されます。

なぜこのようなことが起こるのか、フォーラムやドキュメントを調べ続けていますが、まだ原因は見つかりませんでした。埋め込みペイロードに Discourse ユーザー名を含めていることが原因かと思いましたが、正しく同期されているユーザーが作成したコンテンツでも同様の現象が発生します(例: https://www.comses.net/events/584/)。

確認した項目:

  1. DISCOURSE_ENABLE_CORS: true が設定されている
  2. Discourse 設定の CORS ホストが https で正しく設定されている
  3. 許可されたホストが正しく設定されている(すでに作成された Discourse 投稿の埋め込みは機能している)

他に確認すべきことはありますか?思い当たるのは、最近当サイトと CloudFlare を連携させたことだけです。正常に動作させるために CloudFlare の設定を追加する必要があるかもしれません。それでも、なぜ既存のトピックは正常に動作するのか、まだ理解できていません。

Cloudflareを一時的に無効にして、それが役立つか試してみてください。簡単です。

「いいね!」 1

いい考えですね。ステージングサイトで試してみましたが、残念ながら問題は解決しませんでした。

Chrome では、以下のようなエラーが表示されます。

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://test-discourse.comses.net') does not match the recipient window's origin ('https://test.comses.net').

(参照元:https://test.comses.net/codebases/f0613922-9cb1-4656-a26c-af57f823fb69/releases/3.2.0/)

他の人々は、DiscourseEmbed.discourseEmbedUrl を参照元 URL と一致させることでこの問題を解決できたようですが、私はそれが正しく設定されていることを確認しました。Discourse のログも調べてみました(/var/discourse/shared/standalone/log/rails/production.log を確認すべきでしょうか?)が、そこにもエラーは見当たりませんでした。他にも問題の切り分けに役立つ場所やアイデアはありますか?

Discourse ログの例:

Started GET "/embed/comments?embed_url=https%3A%2F%2Ftest.comses.net%2Fcodebases%2Ff0613922-9cb1-4656-a26c-af57f823fb69%2Freleases%2F3.2.0%2F" for 72.201.57.141 at 2020-08-05 05:15:40 +0000
Processing by EmbedController#comments as HTML
  Parameters: {"embed_url"=>"https://test.comses.net/codebases/f0613922-9cb1-4656-a26c-af57f823fb69/releases/3.2.0/"}
  Rendering embed/loading.html.erb within layouts/embed
  Rendered embed/loading.html.erb within layouts/embed (Duration: 0.4ms | Allocations: 134)
Completed 200 OK in 91ms (Views: 1.8ms | ActiveRecord: 0.0ms | Allocations: 16308)
Started GET "/service-worker-c8000968830b6f6bd33f1e842dffdd569664119d449f93dc7d428d963a71635d.js" for 72.201.57.141 at 2020-08-05 05:15:42 +0000
Processing by StaticController#service_worker_asset as */*
  Rendering text template
  Rendered text template (Duration: 0.0ms | Allocations: 1)
Completed 200 OK in 27ms (Views: 1.3ms | ActiveRecord: 0.0ms | Allocations: 6617)

私も同じ問題に直面しています。例えば、Making sure you're not a bot! で実際に確認できます。ページ下部には、@mock/mock - Fedora Discussion のディスカッションが埋め込まれています。なお、discussion.fedoraproject.org は有料インスタンスであり、Discourse によってサービスとして提供されています。

私を悩ませているのは、ディスカッションが時々読み込まれるが、そうでない場合もあることです。Firefox(バージョン 80)のプライベートモードでは、ほぼ常に再現可能です。

開発者ツールには以下のように表示されます:

https://discussion.fedoraproject.org/embed/comments?embed_url=https%3A%2F%2Fcopr.fedorainfracloud.org%2Fcoprs%2Fg%2Fmock%2Fmock%2F” の読み込み時に無効な X-Frame-Options ヘッダーが見つかりました:“ALLOWALL” は有効なディレクティブではありません。

実際、ドキュメント X-Frame-Options ヘッダー - HTTP | MDN においても、ALLOWALL を値として認識していません。

あなたがリンクした https://discussion.fedoraproject.org/t/mock-mock/3107 のトピックは保護されたカテゴリにあるようです。匿名ユーザーとしてはアクセスできません。あなたの Discourse フォーラムとウェブサイトが同じルートドメインを共有している限り、フォーラムにログインしているユーザーには埋め込みコメントが読み込まれますが、ログインしていないユーザーには読み込まれないと予想されます。これがあなたの状況と一致するでしょうか?

「いいね!」 1

ログインしているユーザーには埋め込みコメントが読み込まれるが、ログインしていないユーザーには読み込まれないと予想されます。これはあなたが目撃している状況と一致するでしょうか?

確かにそのようです。Google Chrome と Firefox の両方でこの動作を再現できます。ただし、どちらのブラウザのプライベートモードではディスカッションが読み込まれません。これが何かを意味するかどうかはわかりませんが、いずれにせよカテゴリを更新して誰でも見られるようにする必要があることを示唆しています。

「いいね!」 1

ありがとうございます。カテゴリを編集し、セキュリティタブで「すべて」に「作成/返信/表示」を許可すると、埋め込みが再び機能するようになりました。

「いいね!」 2

最新の Discourse アップデート後、埋め込まれたページすべてでエラーが発生するようになりました:sweat_smile:

現在見られる典型的なエラーメッセージは以下の通りです。これは、ブラウザがリファラー情報を削除しており、その結果 Discourse の埋め込みコードがバリデーションチェックに失敗していることを示唆しています。

Referer: `https://www.comses.net/`

リファラーが送信されなかったか、以下のホストのいずれとも一致しませんでした:

* www.comses.net/codebases/.* 

例となるページ: Artificial Anasazi

Chrome では、Privacy Badger やその他の拡張機能を無効にしても、リファラーエラーメッセージが常に表示されます。これはおそらく、A new default Referrer-Policy for Chrome - strict-origin-when-cross-origin  |  Blog  |  Chrome for Developers に起因するものです。更新情報: 送信元サイト(例: https://www.comses.net)に明示的な Referrer-Policy を追加したところ、既存のトピックについては動作するようになりました。HAProxy の設定では、以下のようにします: http-response set-header Referrer-Policy "no-referrer-when-downgrade"

Firefox と Chrome では、既存のトピックを含むページは動作しますが、新しいトピックを作成しようとするページは以下のように失敗します: https://www.comses.net/codebases/dea16fd0-f56b-420e-a4c2-d151ffa3f2a8/releases/1.1.0/。

HAProxy の設定を変更して Content-Security-Policy frame-ancestors のレスポンスヘッダーを設定したところ、Firefox での無効な X-Frame-Options ALLOWALL not recognized エラーは解消されました。しかし、今度はリクエストがタイムアウトし、最終的に Discourse フォーラムから 400 Bad Request が返されるようになりました。

このエラーは postMessage に関連しているようです:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://forum.comses.net') does not match the recipient window's origin ('https://www.comses.net').

今月末に少し時間が取れるようになったら、さらに詳しく調査する予定ですが、その間は少しでも新鮮なうちに頭の中を整理しておきたかったので投稿しました。それまでに誰かが回避策を見つけ出してくれることを願っています! :grin:

私も同じ現象が発生しています。どなたかこのエラーについて少しお手伝いいただけないでしょうか。私の場合、テスト用ブログと公式ブログの2つがあり、どちらもWebflowで作成しています。テスト用ブログでは問題なく動作するのですが、ライブブログではこのエラーが表示されます。

### エラー埋め込み


リファラー: `https://www.pynk.io/blog/what-to-invest-in-look-around-you`

リファラーが送信されなかったか、以下のホストのいずれとも一致しませんでした:

[空白]

返信が遅くなり申し訳ありません。埋め込みコードスニペットで設定されている DiscourseEmbed オブジェクトに discourseReferrerPolicy: 'no-referrer-when-downgrade' を追加してみてください。このプロパティを追加する完全なコードスニペットの例は、こちらにあります:https://meta.discourse.org/t/embedding-discourse-comments-via-javascript/31963/353。

試してみてください。問題が解決するかどうか教えてください。

これはこちらで解決したと思います:https://meta.discourse.org/t/embedding-discourse-comments-via-javascript/31963/365。その場合、問題の原因は、Discourse の埋め込み可能ホストレコードに www サブドメインが不足していたことでした。

編集:この問題は、コアの Discourse コードで修正されました。discourseReferrerPolicy 変数を 'no-referrer-when-downgrade' に設定する必要はもはやありません。Discourse はデフォルトでリファラーポリシーを 'no-referrer-when-downgrade' に設定するようになりました。詳細については、こちらをご覧ください:https://meta.discourse.org/t/embedding-discourse-comments-via-javascript/31963#setting-the-referrer-policy

「いいね!」 3

discourseReferrerPolicy を追加することで問題が解決しました - ありがとう、@simon !! :100:

「いいね!」 1

これは SSO に問題を引き起こしている可能性があります。現在、sso.discourse.example を SSO ホストとして使用している current.discourse.example があります。ログインしている場合は、トピックリストが正しく表示されますが、匿名の場合は表示されず、上記のエラーが表示されます。/embed/topics?... の URL は空白のページを表示します。

これは以下の設定で修正されるはずです(あるいは修正されることを願っています):

Content-Security-Policy: frame-ancestors https://current.discourse.example https://sso.discourse.example;
「いいね!」 1