Trouble with Cross-Origin Communication in trame-iframe Setup #402

evdkmv · 2023-12-28T16:07:07Z

evdkmv
Dec 28, 2023

Hello,

I'm working with a trame-iframe setup, inspired by these examples. It is an excellent solution to combine an existing frontend with a trame app. Everything functions seamlessly when both the parent and child (iframe) are served from the same origin. However, I encounter difficulties in receiving messages from the iframe when it's not on the same origin.

Here is Working Example:

Parent:

<html>
  <body>
    <button onclick="setTrameSlider()">set trame slider value to 50</button>
    <iframe src="http://localhost:3000/" width="100%" height="500"> </iframe>
    <p>received trame slider value:</p>
    <div id="trameSliderValue"></div>

    <script>
      document.getElementById("trameSliderValue").innerText = 0;

      function setTrameSlider() {
        document
          .querySelector("iframe")
          .contentWindow.postMessage({ state: { trame_slider: 50 } }, "*");
      }

      function receivedMessage(msg) {
        trameSliderValue = msg.data.trameSliderValue;
        document.getElementById("trameSliderValue").innerText =
          trameSliderValue;
      }

      document
        .querySelector("iframe")
        .contentWindow.addEventListener("message", receivedMessage);
    </script>
  </body>
</html>

Child (trame app):

from pathlib import Path

from trame.app import get_server
from trame.widgets import vuetify, iframe, html, trame
from trame.ui.vuetify import SinglePageLayout

server = get_server()
server.client_type = "vue2"
state, ctrl = server.state, server.controller


server.enable_module(
    dict(serve={"parent": str(Path(__file__).with_name("parent").absolute())})
)


state.trame_slider = 0


@state.change("trame_slider")
def push_slider_value_to_parent(**kwargs):
    ctrl.child_post_message({"trameSliderValue": state.trame_slider})


with SinglePageLayout(server) as layout:
    layout.title.set_text("Child window")
    with layout.content:
        comm = iframe.Communicator()
        ctrl.child_post_message = comm.post_message

        vuetify.VSlider(v_model=("trame_slider", 0))


server.start(port=3000)

When the trame server is started and I navigate to http://localhost:3000/parent/index.html, everything works as expected, mirroring the functionality in the provided example. However, if I serve the HTML page using a different server (e.g., python3 -m http.server), and access it via http://localhost:8000/, I can send messages to the iframe but am unable to receive messages from it.

I'm looking for insights on how to properly enable communication from the trame (iframe) to the parent, when they are on different ports. Any guidance or suggestions would be greatly appreciated!

Thank you in advance for your help!

Answered by jourdain

Dec 28, 2023

You need to proxy the network through the same domain/origin, which means you will need to enable WebSocket forwarding (ours handle some rewrite which you should not need if you use trame docker) as we do within our docker bundle along with some proxy path forwarding.

Also since the trame JS is static, you should be able to serve it along with your main application (python -m trame.tools.www). The only 2 other requests are for starting the process as a POST and the WebSocket. This means, you should just need to add 2 proxy rules to your main web server.

HTH

View full answer

jourdain · 2023-12-28T18:47:38Z

jourdain
Dec 28, 2023
Maintainer

You need to proxy the network through the same domain/origin, which means you will need to enable WebSocket forwarding (ours handle some rewrite which you should not need if you use trame docker) as we do within our docker bundle along with some proxy path forwarding.

Also since the trame JS is static, you should be able to serve it along with your main application (python -m trame.tools.www). The only 2 other requests are for starting the process as a POST and the WebSocket. This means, you should just need to add 2 proxy rules to your main web server.

HTH

3 replies

callback00 Feb 23, 2024

I have included the trame-vtk page in my Vue project using an iframe (both running locally with only different ports). I encountered a cross-origin issue where trame-vtk couldn't send messages to the parent Vue page. I tried modifying the configuration in vue.config.js to use a proxy, but I still couldn't send messages to the Vue page. How can I solve this problem when testing the code locally?

callback00 Feb 23, 2024

My vue.config.js proxy configuration is as follows::

      proxy: {
        "/": {
          ws: true,
          target: "ws://my ip:8090",
          changeOrigin: true,
        },
      },

And my trame-vtk page url is http://localhost:8090/index.html

jourdain Feb 23, 2024
Maintainer

you probably need to map things like:
/trame-app => (regular http) ip:port/
/trame-app/ws => (websocker) ip:port/ws

evdkmv · 2023-12-30T12:14:18Z

evdkmv
Dec 30, 2023
Author

Thanks Sebastien!

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Trouble with Cross-Origin Communication in trame-iframe Setup #402

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 3 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Trouble with Cross-Origin Communication in trame-iframe Setup #402

evdkmv Dec 28, 2023

Replies: 2 comments · 3 replies

jourdain Dec 28, 2023 Maintainer

callback00 Feb 23, 2024

callback00 Feb 23, 2024

jourdain Feb 23, 2024 Maintainer

evdkmv Dec 30, 2023 Author

evdkmv
Dec 28, 2023

Replies: 2 comments 3 replies

jourdain
Dec 28, 2023
Maintainer

jourdain Feb 23, 2024
Maintainer

evdkmv
Dec 30, 2023
Author