既存の投稿の埋め込みエラー

サポート
1

こんにちは！「Error Embedding」のエラーが発生しています。iframe には以下のように表示されます。

Error Embedding
Referer: 
The referer was either not sent, or did not match any of the following hosts:

ドメインは同一であるにもかかわらず、コンソールには以下のようなエラーが表示されます。

Uncaught SyntaxError: Failed to execute 'postMessage' on 'Window': Invalid target origin '' in a call to 'postMessage'.
    _embed-application-3723be59920e64ecda9d66b1e7c4c55378fb9dadfa7f422febd4f1b346c1aa05.js:6 Uncaught DOMException: Failed to execute 'postMessage' on 'Window': Invalid target origin '' in a call to 'postMessage'.
        at e (https://sjc1.discourse-cdn.com/business5/brotli_asset/embed-application-3723be59920e64ecda9d66b1e7c4c55378fb9dadfa7f422febd4f1b346c1aa05.js:1:42)
        at window.onload (https://sjc1.discourse-cdn.com/business5/brotli_asset/embed-application-3723be59920e64ecda9d66b1e7c4c55378fb9dadfa7f422febd4f1b346c1aa05.js:1:470)

「Alternate configuration」を使用しているため、解決済みのトピック はあまり参考になりません。

(Alternate Configuration) Linking to existing topics

Some people prefer to not have Discourse create topics for them automatically on their forums. They’d like to create the topics themselves, then simply tell their embedding code what topic they want to associate with. You can do this by slightly changing your embedding code:

<div id='discourse-comments'></div>

<script type="text/javascript">
  DiscourseEmbed = { discourseUrl: 'http://discourse.example.com/',
                     topicId: 12345 };

  (function() {
    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
  })();
</script>

The only difference here is we’ve replaced discourseEmbedUrl with the id of a topic from Discourse. If you do this, no topic will be created and the comments from that topic will automatically be displayed.

出典：Embed Discourse comments on another website via Javascript

この問題を簡単にデバッグする方法はありますか？リファラーはどこから取得され、なぜ空になる可能性があるのでしょうか？
これは既知の一般的な問題ですか？エラー発生時に iframe またはその内容を非表示にする方法はありますか？

エラーが発生するスクリプトを確認すると、#data-embedded 要素内の postMessage に対してリファラーが見つからないようです。

2

ページに埋め込まれた iframe をインスペクターで確認し、正しいリファラーを含む meta タグがあるか確認してください。以下のような形式になります：<meta id='data-embedded' data-referere="YOUR_SITE">

YOUR_SITE は iframe によって自動的に設定されます。

3

<meta id="data-embedded" data-referer="">

空になっています :scream: これはどういう意味ですか？

4

つまり、何らかの理由で埋め込んでいる iframe にリファラーが渡されていないということです。プロキシやリダイレクトなどがそれを除去しているのか、それともブラウザ側の問題なのかは確信が持てません。

6

https://meta.discourse.org/t/embedding-discourse-comments-via-javascript/31963/353?u=falco