UI cannot be displayed in IFrame - possibly bcs. CORS

dhiaayachi commented 2 months ago

Expected Behavior

Temporal UI should be displayed in an iframe of another application when CORS is set to '*'.

Actual Behavior

Content is blocked. Iframe is empty

Steps to Reproduce the Problem

Setup temporal with docker environment. Set the corresponding environment variables like so in docker-compose.yml

[...]
temporal-ui:
container_name: temporal-ui
depends_on:
  - temporal
environment:
  - TEMPORAL_ADDRESS=temporal:7233
  - TEMPORAL_CORS_ORIGINS=*
image: temporalio/ui:${TEMPORAL_UI_VERSION}
networks:
  - temporal-network
ports:
  - 8080:8080
[...]

Access the exposed port via an iframe.
IFrame reports blocked content.

Specifications

Version: TEMPORAL_VERSION=1.20.2 TEMPORAL_UI_VERSION=2.13.3
Platform: Linux / Google Kubernetes Engine

I want to use the UI as part of a dashboard beacause here I have the benefit of not having the user authenticate in temporal, but beforehand in the dashboard. Therefor I want to display the UI inside it, hence the IFrame.

Thank you for sharing this great piece of software. Suggestions appreciated.

dhiaayachi commented 1 month ago

Thank you for reporting this issue.

The Temporal UI currently does not support CORS for iframes with the * wildcard.

You can work around this by setting the TEMPORAL_CORS_ORIGINS environment variable to the specific origin of your dashboard application. For example, if your dashboard is running at http://localhost:3000, you would set TEMPORAL_CORS_ORIGINS to http://localhost:3000.

Please let me know if you have any other questions.

dhiaayachi commented 1 month ago

Thank you for reporting this issue.

We are aware of this issue and are working on a fix. Currently, CORS is set to "localhost" by default. Temporal UI does not support the CORS wildcard * because that can be a security risk.

To work around this, you can configure your Temporal UI to allow CORS requests from specific origins instead of *. You can achieve this by:

Setting TEMPORAL_CORS_ORIGINS to a comma-separated list of allowed origins in your docker-compose.yml file.
Adjusting the corsOrigins setting in your UI configuration file, which is described in detail here.

We hope this workaround helps until the issue is resolved.

dhiaayachi commented 1 month ago

Thank you for reporting this issue. Unfortunately, the current Temporal UI does not support being embedded in an iframe when TEMPORAL_CORS_ORIGINS is set to *. This is because the browser prevents cross-origin iframes from accessing resources from different origins, and the Temporal UI relies on accessing resources from its own origin.

A workaround for this is to use a reverse proxy like Nginx to route requests to the Temporal UI from your dashboard. Configure the reverse proxy to allow cross-origin requests from your dashboard, and then embed the Temporal UI in an iframe within your dashboard.

Here's a simple example of how you could configure a reverse proxy with Nginx:

upstream temporal-ui {
  server temporal-ui:8080;
}

server {
  listen 80;
  location /temporal-ui/ {
    proxy_pass http://temporal-ui;
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods GET, POST, PUT, DELETE, OPTIONS;
    add_header Access-Control-Allow-Headers *;
  }
}

Please let us know if you have any further questions.

dhiaayachi / temporal