Problem Embedding Comments


(Thomas Wilson) #1

I’d like to use discourse comments in my ghost blog (using @eviltrout’s instructions here) – until recently, this has been working smoothly as expected. After re-importing my blog content with slightly different slugs, it started complaining that the X-Frame-Options header on discourse was set to ‘SAMEORIGIN’, preventing any x-site communication.

I followed the instructions here and the error has since disappeared, only to be replaced by another.

In my developer console, I now see a 403 Forbidden error:

GET http://discourse.muselive.com/embed/comments?embed_url=http%3A%2F%2Fghost.muselive.com%2Falbum-number-7-on-its-way-1393155960%2F 403 (Forbidden) 

followed by:

Uncaught TypeError: Cannot read property 'forEach' of undefined
Uncaught TypeError: Cannot read property 'create' of undefined    discourse.muselive.com/assets/vendor-3c0b29078a0c6673dd5ae1991a1fc9a6.js:12

Could this be a problem with my ghost install or with discourse? Has anyone else come across this issue? Example page which doesn’t work here.

Any help would be appreciated - thanks.


Plugin for seamlessly embedding Discourse in a page as comments
Problem embeding topics 403
(Sam Saffron) #2

@eviltrout can you have a look at this?


(Robin Ward) #3

Is your site setting for embeddable_host the same as before? Because forbidden can happen if the host that embeds the blog changes.


(Thomas Wilson) #4

Nope - it’s still set to ghost.muselive.com


(Robin Ward) #5

When you said you re-imported your blog, what did you mean? Did you keep the same ids as before when you inserted the javascript that makes the call to discourse?


(Thomas Wilson) #6

If you’re familiar with Ghost – I cleared out the .db and re-imported my existing site’s JSON blob using Ghost’s import utility. The only thing which would be different are the individual blog posts’ slugs/urls (I applied a slightly different logic to generate them).

I didn’t change anything on the Discourse side (i.e. the ‘old’ imported posts would still have been there). I assumed that, as the newly imported posts had different slugs, that discourse would see them as new items?


(Thomas Wilson) #7

Bit of an update - sidekiq is reporting this as an error (no such file or directory)… probably related. I’ve since deleted all imported topics and will see what happens next…

Jobs::RetrieveTopic	
{"user_id"=>1, "embed_url"=>"http://ghost.muselive.com/new-album-in-2015-1405975740/", "current_site_id"=>"default"}
Jobs::HandledExceptionWrapper: Wrapped Errno::ENOENT: No such file or directory - ghost.muselive.com/rss

I don’t seem to be able to trigger this job in the sidekiq scheduler interface… am I missing something?


(Thomas Wilson) #8

Nevermind… adding http:// to the RSS url seems to have fixed everything. Sigh.

EDIT:

Found a bug. If you have 2 categories defined with the same name (e.g. one as a ‘base’ category, and one somewhere else as a subcategory), the importer doesn’t know where to put the topics. It gets confused and splits them between the two (at least that’s what it did in my case!).


(Neil Lalonde) #9

I’ll add code to make sure that feed_polling_url uses http:// if it’s missing to avoid this in the future.

Yeah that’s a bug… we’ll need to change that setting to handle duplicate category names.


(Chad Pytel) #10

I’m also getting a 403 error from the embedding. I’ve verified that TopicEmbeds and Topics are being created from the feed. But the iframe is resulting in a 403.

I’ve tried to debug this, but I can’t tell where the 403 is coming from within Discourse.


(Chad Pytel) #11

I managed to figure this out. It was due to our site being https and the forum being http. Adding https and using that for the iframe fixed the issue.


(Brian Adams) #12

So I am having trouble getting this to work. Current state is the I see the “Loading Discussion…” text but then nothing. After a few seconds the browser complains about frame permissions. You can repo it by going to And here are all of the older blog posts. I don’t see any recent error on the server logs… but there are some related to blog that happened many hours ago.

I have double checked the embeddable host configuration and it is right. (When it is wrong, nothing renders and I only pull down the embed.js file. When it is right, I do see the “Loading Discussion…” text and the browser also downloads https://forum.openrov.com/embed/comments?embed_url=https%3A%2F%2Fforum.openrov.com%2Flink-to-blog-entry.html.

The system appears to be failing on line 26 of embed.js comments.appendChild(iframe);. (I cannot find what pointed me in a stack trace to this line, so take it with a grain of salt).

The console text error is:

Refused to display 'https://forum.openrov.com/embed/comments?embed_url=https%3A%2F%2Fforum.openrov.com%2Flink-to-blog-entry.html' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

But I have my doubts about the accuracy of that error. It I look at the network traffic in developer tools I see:

and indeed the Response Header for the 403 is set to SAMEORIGIN. However, if I look at the sources I can see the content of the comments page, and if I use Safari I can see that indeed that source file was associated with X-Frame settings to ALLOWALL

Chrome:

Safari:


(Brian Adams) #13

And to clarify, unlike the earlier post, our system is the blog is http and the forum is https which @eviltrout says should not be a problem.


(Robin Ward) #14

It looks like your embedUrl is a forum URL and not blog? It should be something like http://blog.openrov.com/and-here-are-all-of-the-older-blog-posts/


(Brian Adams) #15

Thanks!

I had taken the varialbe verbatim from the instructions and had not swapped it.

discourseEmbedUrl = window.location.href;

took care of it!


(Robin Ward) #16

Great! I don’t recommend doing the window.location.href in case you ever serve up the same content at slightly different URLs. It’s generally a lot safer to put a canonical URL there when you generate the HTML, if you can :smile:


(Brian Adams) #17

Cool. Ghost.io does inject a canonical url link that can be parsed.

For other Ghost users: This is what I added to the settings screen > Code Injection > footer section of the config:

<script type="text/javascript">
  $('<div id="discourse-comments"></div>').insertBefore('.comments'); 

  var discourseUrl = "< < Your Blog URL > >",

	discourseEmbedUrl = $('link[rel="canonical"]')[0].href; 
    if (discourseEmbedUrl.indexOf("/p/") == -1)
    {

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

</script>

(Blackening999) #18

Hi!

Not working for me frowning. I’m trying to embed code into localhost, tried with staging as well - the same outcome.

GET http://45.55.89.238/embed/comments?embed_url=http%3A%2F%2Flocalhost%3A3000%2Farticles%2Fthe-article-name%2F 403 (Forbidden)

http://joxi.ru/BA0abNXsQo3Yry

Loading Discussion…
Then everything disappears from iFrame

Very strange


(Blackening999) #19

Fixed it. Without having a DNS configured it’s better to use raw ip instead :wink: