Embedding does not work with Firefox 46


#1

I have successfully embedded Discourse with my Ghost blog. On Chrome and IE Edge the feature works without problems. However, with Firefox 46 the embedded iframe is empty. The JS console shows no erros. This appears to be a general problem with Discourse, as the embedding does not work on the Coding Horror blog either (e.g. when one opens the page They Have To Be Monsters and scrolls to the bottom of the page, the discussion is visible with Chrome, but not in Firefox).

I’m using Discourse version 1.6.0.beta3. Any advice how to fix this, create a bug report or otherwise help in solving this issue?

Update: there were two errors in Firefox (403 + “Load denied by X-Frame-Options”), which were only visible after several reloads.


#2

When I load the page in FF46 I see warnings in the console, because the blog loaded via https and the embedding is hardcoded http:// instead of //, but discourse.codinghorror.com is not available via https so it wouldn’t work anyway:

Blocked loading mixed active content "http://discourse.codinghorror.com/javascripts/embed.js" [Learn More]

When I disable the protection (click on the info-sign in the address-line then the right arrow and then “Disable protection for now”) another error is logged:
Load denied by X-Frame-Options: http://discourse.codinghorror.com/embed/comments?embed_url=http%3A%2F%2Fblog.codinghorror.com%2Fthey-have-to-be-monsters%2F does not permit cross-origin framing.

In conclusion: for your blog I suggest checking for mixed content and X-Frame-Options.


(Jeff Atwood) #3

You can’t mix http and https. discourse.codinghorror.com is not really https.


#4

Apparently embedding for Jeff Atwood’s blog works today on Firefox. How did you solve the issue, Jeff (or was it just a glitch with my Firefox that your Discourse embedding did not work yesterday)? Unfortunately, I still have the same problem. In my case, both the Discourse site and the Blog site are on https, so that’s not the problem.

But I think the problem is the X-Frame-Options, as frictionel pointed out. When reading the HTTP headers with curl from my Discourse domain, I get

X-Frame-Options: SAMEORIGIN

I have my blog on subdomain, let’s call it blog.example.com and my Discourse site on disc.example.com. For the X-Frame-Options to be allowed, I would have to have my blog site on a domain name one level higher, e.g. example.com or alternatively the X-Frame-Options should return “blog.example.com”. Shouldn’t Discourse set these headers automatically correctly? There is already the setting under Administration - Customize - Emnbedding - Allowed Hosts. What does this setting do, if it does not set the X-Frame-Options correctly?

Can I somehow modify the Discourse Nginx settings directly, or should I run Discourse behind a proxy if I want to modify the X-Frame-Settings? Or is there some other option to fix the problem?


#5

Also something, which is curious: embedding works with Firefox on OS X, but not with Firefox on Windows 10.

Meanwhile, I have tried e.g. using the plugin at GitHub - TheBunyip/discourse-allow-same-origin (based on the discussion at Discourse Meta), but this does nothing. Even the headers were not changed.

After that I just used the brute method, namely replacing all the SAMEORIGIN entries with ALLOWALL in the Docker container with

grep -rlI "SAMEORIGIN" /var/lib/docker/aufs/mnt/b61e6ae66cd105227ba032b83eeeb7fe28fef447d0a550d62bd2907fc8808bb3/ | xargs sed -i "s/'X-Frame-Options' => 'SAMEORIGIN'/'X-Frame-Options' => 'ALLOWALL'/g"

and restarted the app. This brought a marginal improvment: there is no X-FRAME error message anymore (and the X-Frame-Options is ALLOWALL, as verified by curl) , but the 403 error message is still there, along with some new JavaScript errors.

With Chrome, Safari and IE the embedding works.

In the Discourse Nginx access log the successful request from Chrome looks like this: [07/May/2016:13:43:44 +0000] 178.203.235.11 "GET /embed/comments?embed_url=https%3A%2F%2Fwww.blaubeerbasilikum.de%2Ftortillas-mit-guacamole-und-hackfleischsosse%2F HTTP/2.0" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36" "embed/comments" 200 1730 "https://www.blaubeerbasilikum.de/" 0.036 0.036 "blogadmin"

And the request from Firefox (403 error):
[07/May/2016:13:44:15 +0000] 178.203.235.11 "GET /embed/comments?embed_url=https%3A%2F%2Fwww.blaubeerbasilikum.de%2Ftortillas-mit-guacamole-und-hackfleischsosse%2F HTTP/2.0" "Mozilla/5.0 (Windows NT 10.0; WOW64; rv:46.0) Gecko/20100101 Firefox/46.0" "embed/comments" 403 5179 "-" 0.040 0.040 "-"


(Jeff Atwood) #6

The above evidence points to a mixed http / https problem. Did you ever resolve this? The simplest thing to do is make sure both sites are https.