Failed to execute 'postMessage' on 'DOMWindow'

Support
1

I have searched the forum for an answer to this issue and tried a few of the different posted options.

I am running a Ghost publication on a Digital Ocean Droplet, and a Discourse forum on a separate Digital Ocean Droplet, as the forum consensus seemed to be that you should not install two applications on the same server.

forum.mysite dot com
mysite dot com

I would like the discourse comments to appear on every post, and I do not have a mysite.com/blog URL slug. So I followed the documentation to get the current site URL and use that as the embed URL.

Following the documentation here: Official Integration Documentation

I am able to get the frame to appear on any new posts. However, it does not load and provides the following error:
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>').

I have confirmed that my HTTPS settings are correct. My embedded URL mimicks the tutorial, but I tried a few different variations of discourseEmbedUrl: in an attempt to troubleshoot. All of the references to the current article URL are causing the same error.

I also tried adding a wait function, thinking perhaps the frame did not load, but the same error persists.

This is my current embedded code:

<div id='discourse-comments'></div>
<meta name='discourse-username' content='JosephPaul'>

<script type="text/javascript">
  DiscourseEmbed = {
    discourseUrl: 'https://forum.mysite.com/',
    discourseEmbedUrl: '{{url absolute="true"}}',
    // className: 'CLASS_NAME',
  };

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

Any assistance here would be appreciated, as I have exhausted all solutions posted. I believe it may have to do with my forum and articles being on separate machines.

1 Like
2

Hello @Joseph3 :wave: welcome to Discourse Meta :slight_smile:

did you see this topic yet?

2 Likes
3

Hi Lilly, yes I followed that tutorial as well to double-check that the ghost-hosted discourse installation was the same.

I have attempted using their URL reference as below:

discourseEmbedUrl: 'https://mysite.com<%= current_page.url %>'

Is something incorrect there?

As well, but it resulted in the same error. Thank you for your prompt response.

1 Like
4

This is a fairly common error: Search results for 'Failed to execute 'postMessage' on 'DOMWindow'' - Discourse Meta. It’s a long shot, but one possible cause of the error is not having filled out the “Username for topic creation” setting that’s found on the Discourse embedding settings page.

That shouldn’t cause a problem.

Something that can cause issues is if your Discourse site is private: Embed Discourse comments on another website via Javascript.

2 Likes
5

Hi Simon, I originally had the issue of not having the username for topic creation correct within the Discourse admin panel. But I fixed it to show JosephPaul within the panel as well as within:
<meta name='discourse-username' content='JosephPaul'>

So those are correct to my knowledge.

I also had a look at the second link you sent, and I believe everything is correct. I just tried switching my Discourse site to not require sign-in and that did not solve the issue.

The issue persists even with newly generated posts.

Edit:
I have attempted again to follow some of the suggested embed URL changes in the above post. The following code is recreating the error:

<script type="text/javascript">

setTimeout(5000)
  DiscourseEmbed = {
    discourseUrl: 'https://forum.josephpaul.com/',
    discourseEmbedUrl: 'https://josephpaul.com{{page.url}}' };

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

Additional troubleshooting attempt following Simon’s thread:

I have set the embed URL to also include www. as a user suggested. The following error now occurs:

Referer:`https://josephpaul.com/test-post/`

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

josephpaul.com
1 Like
6

Any ideas on this Simon? I am happy to provide any outputs or code examples you need.

7

Send me a PM with a link to a blog post that you have the embed code on and I’ll have a look.

To narrow down the cause of the issue, it would be great if you could try adding the embed code that’s found on your Discourse embedding page without any modifications, other than replacing EMBED_URL with the URL of the blog page.

2 Likes
9

Hi Simon, sure I will happily send you a snippet as well as a link to the live site. How do I DM on discourse? Perhaps my trust level is not high enough.

The documentation said to click on your name and a popup with message will appear, but I do not see that on my end.

Thanks again for the help thus far! I will be sure to update my question with whatever solution is reached.

10

Solution Found - Thanks to @simon and @Lilly for an incredible support experience.

Items that were altered as to Simon’s advice:

Altered the code from the tutorial to not include deprecated terms and include if statement:

<div id='discourse-comments'></div>
<meta name="discourse-username" content="ForumAdminName">

<script type="text/javascript">
  if (window.location.pathname.indexOf('/p/') < 0) {
  DiscourseEmbed = {
    discourseUrl: 'https://forum.test.com/',
    discourseEmbedUrl: '{{url absolute="true"}}',
    // className: 'CLASS_NAME',
  };

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

Additionally, added https://www.test.com & https://test.com
To the Discourse site’s content security policy src setting found withing the Discourse admin > settings tab.

Note - In my experience refreshing the page too rapidly when on a small droplet you may not see the results for about 30 seconds, so give each ghost restart and discourse admin panel edit a few moments to take effect.

Additional Note - There is long latency when checking the comment section of any article for the first time, @simon recommends always checking the article yourself first, so discourse has time to generate the comments sections associated with the forum post.

Again thanks all, very helpful. Many YouTube commenters on the tutorial I watched had the same issues I did, which referenced the discourse/ghost integration instructions. The youtube links may be deprecated, so this help was great.

4 Likes
11

I’m so glad you have it working now. :+1: embedding is a bit tricky because it’s not quite the same for each setup. Thank you for sharing your experience, I learned from this. Also, @simon is amazing and one of the nicest, smartest and most helpful people I have had the pleasure of knowing. And he also happens to be pretty good with Discourse. :slight_smile:

3 Likes
12

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.