Running Discourse in an Angular app


(Yannick) #1

I’m looking to gain more experience with Angular and Node (as that is what is being used in my work place) and want to use a website idea I’ve been shelving for quite a while now. Initially I expected to simply run Discourse in an iframe in the Angular app, but it’s never that easy.

Are there very clear reasons not to meddle with the X-Frame-Options, including loosening it to ALLOW-FROM? What would be the most elegant approach to integrating Discourse in an Angular SPA or am I barking up the wrong tree?


(Rafael dos Santos Silva) #2

Discourse living in an iframe isn’t a common use. You can try, of course, but it’s not something we recommend.


(Yannick) #3

How would one go about changing the default X-Frame-Options setting within Discourse? I’ve been trying to update
Rails.configuration.middleware.use Rack::Protection::FrameOptions
To
Rails.configuration.middleware.use Rack::Protection::FrameOptions, :frame_options => "ALLOWALL"
in
config/initializers/011-rack-protection.rb
and then restarting the unicorn, but that doesn’t seem to be what I’m looking for (it doesn’t work).


(Rafael dos Santos Silva) #4

I think it’s a matter of just adding the host in /admin/customize/embedding instead of messing with the code to get this header.


(Yannick) #5

Ah, my bad, for some reason I assumed that was only for embedding comments. I will have a look, thank you.


(Rafael dos Santos Silva) #6

That will add the header x-frame-options:ALLOWALL on the /embed route that will allow you to test your setup.

If, after testing you still wanna go with this iframe route, I guess adding this header in a reverse proxy is the easiest way.


(Yannick) #7

Well, another issue is the URL not updating if the user switches views in the iframe. Which would raise another issue with document.getElementById("iframe_id").contentWindow.location.href not being available cross origin. It might be a better idea to serve Discourse out of a folder and keep everything on the same origin.


(Rafael dos Santos Silva) #8

YES!

What everyone does is having mainapp.com and discourse.mainapp.com.

You just add the same font, background, header, etc and it’s the same site for your users.


(Yannick) #9

Those are not on the same origin :yum: but I can compromise and split the site into 2 apps, the Angular app as the landing page and the Discourse app as the community solution supporting it. I was looking to tightly integrate the too, but might even be a better idea to keep them separate and access the Discourse data I’m after through the API.

Thanks Falco