Theia is opening images as text.
The problem seems to be related to the way we have Theia integrated into a multi-user IDE. We have several instances of Theia running in Docker containers. Nginx is used to proxy connections into the correct container based on the URL.
For example, the URL might look like http://theia.mycollege.edu/ide/bbrown/cpp. Nginx extracts the user name and environment name from the URL and proxies all requests to the appropriate container. This is working correctly 99.9% of the time.
However, we are unable to view images. Depending on how I try to open the image, it either fails to load or comes out as text.
When I try to preview an image, I get an error related to the mini-browser. The URL for the image is coming out incorrectly. As an example, let’s say I have an image named burger.png in my files. When I right-click and select Open With > Preview, an error window comes up. Inspecting the Network access in the Developer Tools, I see this as the URL:
https://6aff537c-3348-472e-9d65-87ac7b2670bc.mini-browser.theia.mycollege.edu/ide/bbrown/cpp/mini-browser/home/image/burger.png
The URL is clearly incorrect: it contains what looks like a UUID and a subdomain named “mini-browser”.
If I try to open the image by simply clicking on it once, it loads as text.
Sorry for this posting being so long. I would be much appreciative if there was an easy fix for this.
Thank you!
Images are previewed by the mini-browser component, and we made it serve content on a virtual host (the weird subdomain you see) in order to isolate such displayed content. Sure for images it sounds overkill, but it can also display HTML with JS and in that case the different origin makes it much more secure.
With that out of the way, you can make the mini-browser serve the same origin as the main app by setting the THEIA_MINI_BROWSER_HOST_PATTERN env var to {{hostname}}.
Although it is usually recommended to setup your DNS such as to correctly resolve those virtual hosts.
Thank you for that information!
I added a wildcard DNS entry to my domain. The next step will be to reconfigure nginx to forward the connection to the correct container. How should I rewrite the URL?
My containers have names that look like theia-USERNAME-ENV. For example: theia-bbrown-cpp.
Should the URL be rewritten as http://6aff537c-3348-472e-9d65-87ac7b2670bc.mini-browser.theia-bbrown-cpp/ide/bbrown/cpp/mini-browser/home/image/burger.png ?
Or should I strip off the subdomain entirely? http://theia-bbrown-cpp/ide/bbrown/cpp/mini-browser/home/image/burger.png
The URL should be rewritten as http://6aff537c-3348-472e-9d65-87ac7b2670bc.mini-browser.theia-bbrown-cpp/ide/bbrown/cpp/mini-browser/home/image/burger.png indeed.
But you should also make sure that the Host header is either forwarded or set. It should be set to 6aff537c-3348-472e-9d65-87ac7b2670bc.mini-browser.theia-bbrown-cpp in your example when reaching Theia, since this is what our HTTP server uses to respond to virtual hosts requests.
I know that Chrome adds the header to the request when developing locally, so maybe you can just add an NGINX rule to forward this field? Else explicitly set it?