"Error Embedding" comments

TL;DR: Discourse gives “Error Embedding” regardless of which hosts I allow in Embedding settings.

I have a published site at foo.com which embeds comments from the Discourse forum at forum.foo.com, which his working fine. When going to e.g. https://foo.com/blog/2019-11-22/foo-0.9.6-released , I see the embedded comments just fine. In this case, the script code for the embedding looks like this in the page’s source:

<div id='discourse-comments'></div>
<script type="text/javascript">
  DiscourseEmbed = { discourseUrl: 'https://forum.foo.com/', discourseEmbedUrl: 'https://foo.com/blog/2019-11-22/foo-0.9.6-released' };

  (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>

I also have a development version of the site running on my local machine at localhost, where I have problems with the embedding - it keeps giving me “Error Embedding” instead of comments inside the HTML produced and returned by the forum. That is, I see the forum’s logo and a link to it in the top-right of the embedding area, but instead of listing comments I just get that error message.

When going to e.g. http://localhost:1313/blog/2019-11-22-foo-0.9.6-released/ , which is the equivalent page to the production site, the script code for the embedding looks like this in the page’s source:

<div id='discourse-comments'></div>
<script type="text/javascript">
  DiscourseEmbed = { discourseUrl: 'https://forum.foo.com/', discourseEmbedUrl: 'http://localhost:1313/blog/2019-11-22-foo-0.9.6-released/' };

  (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>

I tried it both with and without the trailing / in the discourseEmbedUrl setting, it makes no difference.

I do not have direct access to the server on which the forum runs, but I have gone into the admin panel of the forum and tried adding a bunch of host allows in the embedding settings. The current settings, for the production site which works with embedding, are:

"Allowed Hosts", "Class Name", "Path Whitelist", "Post to Category"

foo.com, <empty>, /blog/.*, blog

What I’ve added to make it work for my localhost development version of the site is:

"Allowed Hosts", "Class Name", "Path Whitelist", "Post to Category"

localhost, <empty>, /blog/.*, blog
localhost:1313, <empty>, /blog/.*, blog
<my external/public IP as seen by the forum server>, <empty>, /blog/.*, blog
<my external/public IP as seen by the forum server>:1313, <empty>, /blog/.*, blog

But neither of this makes it work, I just keep getting the same “Error Embedding” message.

I’m reluctant to dig into the source code and try to debug this, I’d rather get some input as to what Discource is checking when it determines that it should generate that error message. Can someone tell me that, and how to fix this? Should be pretty straight forward, but Discourse is acting like a black box here.

I have read all of Embedding Discourse Comments via Javascript but it doesn’t give more useful information.

You might want to use topicID as mentioned at Embedding Discourse Comments via Javascript.

I wouldn’t be surprised if “localhost” is prohibited for various reasons. This would tell your forum server to embed on itself. :dizzy_face:

If you are using Hugo maybe load the comment template conditionally, or pass baseURL explicitly in the template, so even during development you’ll load discourseEmbedUrl: 'https://foo.com/blog/2019-11-22/foo-0.9.6-released'.

@maiki Thanks a lot for taking the time to reply.

Using topicId as described in the guide doesn’t make it work or change any symptoms. The URL requested of course changes to https://forum.foo.com/embed/comments?topic_id=2279 instead, but it gives the exact same error message.

I also tried changing the discourseEmbedUrl to https://foo.com/blog/2019-11-22/foo-0.9.6-released but this too didn’t make anything work better unfortunately.

Even if the case is that this is intentional, it needs to be documented. For example, are requests from a localhost site blocked? Even though it’s explicitly listed in allowed hosts? Is Discourse looking at the referrer field in the HTTP request, or what exactly is it using to trigger this error? This really need to be cleared up, because at this point there’s nothing I have found that explains why it’s not working :slight_smile:

What is the error message? Is there anything in the dev console?

localhost is not a valid domain, it’s a hostname.

I’m not sure it makes sense to explain this in the embed guide, but at least we have this topic for reference! :slight_smile:

No, there’s nothing wrong in the dev console on the localhost client/browser. HTML is successfully returned from the forum server, I can see it just fine in the dev tools.

Here’s what it should look like when it’s working (some text censored):

Here’s what it looks like instead (some text censored):

So, it’s just that the forum server returns 400 and “Error Embedding” instead of the proper contents.

Sure, but as you suggested, perhaps Discourse is blocking this type of request from referrers that are from localhost. I know “localhost” is not a domain name but a hostname. This is in line with the fact that what you configure for “Allowed Hosts” in the Embedded settings in the forum are just that, hosts.

I know perfectly well what localhost is, that’s not a problem.

Explain what localhost is? No, that’s not needed. When I said that we need to come to a conclusion as to why it’s not working for me, and that it has to be documented, I’m talking about in general why this isn’t expected to work, if that is the case. Again, as it is right now, there’s nothing suggesting that this is expected behavior.

Is your Discourse site set to login required?

The setting named “login required” in the “Login” section is unchecked, so no, it is not.

Thinking out loud; What differs between when the request comes from my local development site, and when it comes from the production site, isn’t much. It should be just the HTTP referrer and of course the source of the HTTP request. Other than that I’m using the same browser for both sites.

You can test if it is a host issue by trying to embed it on another, live domain (perhaps a sub-domain for one you have).

Me thinking out loud: if I told Discourse to accept “localhost”, it will look for it at localhost, which is the Discourse server.

Good luck! I don’t know what’s going on. :slight_smile:

1 Like

I see your reasoning. That’s when it becomes interesting to know what it is actually looking at when it determines access and whether or not it should spit out this error message.

On a related note, the thing is that it (Discourse, when replying to the embedded request) gives a 400 HTTP response code, which just means “Bad Request”. If it was anything to do with a non-allowed host or similar, I would expect the code to be 401 (“Unauthorized”) or similar, but that isn’t the case. So this suggests that it does not have to do with authorization or allowed hosts. But it could equally be that the backend code just isn’t spotting out a proper HTTP response code.

Surely someone must know whether or not it should be possible to embed comments from domain forum.foo.com from a localhost development website? I don’t see anything that says it shouldn’t work (by allowing hosts), but since it doesn’t it’s rather unclear.