Desktop/Linux: Cross-Origin Communication with iframe Fails due to 'dioxus://' Protocol

[SyahrulBhudiF]

Problem

When creating a Dioxus desktop application on Linux, it's currently impossible to communicate with a cross-origin iframe that uses a postMessage-based API, such as the YouTube IFrame Player API.

Attempting to control the iframe from Dioxus code results in a security error in the console:
Unable to post message to <some_origin>. Recipient has origin dioxus://index.html.

This behavior is specific to Linux (using WebKitGTK). The exact same code works perfectly on macOS (using WKWebView), which suggests a difference in how the underlying WebView handles security policies for custom protocols.

Steps To Reproduce

Steps to reproduce the behavior:

1. Create a new Dioxus desktop app.
2. Add a component that embeds a YouTube iframe with enablejsapi=1.
3. Add a button that attempts to call a JavaScript function on the iframe's context using eval, for example, window.player.pauseVideo().
4. Run the app on Linux.
5. Open the WebView developer console and observe the security error upon clicking the button.

• Example code

div { class: "modal-box w-11/12 max-w-5xl",
                h3 { class: "text-lg font-bold", "Media Preview" }
                div { class: "pt-4 w-full h-full",
                    iframe {
                        id: "youtube_preview_iframe",
                        class: "w-full h-full aspect-video rounded-xl overflow-hidden",
                        src: "https://www.youtube.com/embed/{video_id}?autohide=1&enablejsapi=1&fs=0&modestbranding=1",
                        allowfullscreen: false,
                        allow: "encrypted-media",
                    }
                }
                div { class: "modal-action",
                    form { method: "dialog",
                        button {
                            class: "btn",
                            onclick: move |_| {
                                eval(
                                    r#"
                                                                                window.player.pauseVideo();
                                                                            "#,
                                );
                            },
                            "Cancel"
                        }
                    }
                    button { class: "btn btn-accent gap-2",
                        ClapperboardIcon { class: "size-5" }
                        "Extract Frame"
                    }
                }
            }

Expected behavior
Communication between the Dioxus application and the YouTube iframe should be successful on Linux, just as it is on macOS. Clicking the button should execute the JavaScript via eval() without any cross-origin security errors, and the video should respond accordingly (e.g., pause).

Screenshots

Environment:

• Dioxus Version: 0.6.0
• Rust Version: 1.87.0
• Platform: Linux Fedora 42 (WebKitGTK)
• Render Target: Desktop

[akayanuarcandra]

i also expecting the same issue, anyone has a solution for this problem?

[Pascalio]

This is indeed a nasty problem...

[martinmr]

Found something related in another project: ionic-team/capacitor#8205

looks like using base url's that are not http or https is making youtube blocking the request. The only solution I've seen is to embed the youtube iframe inside another iframe that is served from an http server. seems like too much trouble to just iframe a thing.

This also assumes that dioxus allows iframes to open within the window, which is broken at the moment, but I'll put a PR later.

[martinmr]

Ok. Spent most of yesterday fighting this. In the end, I don't think there is a fix the dioxus team can make because this is a limitation of the webview.

The workaround was to create a proxy server in localhost , create an iframe for that server, and put the YT iframe inside that iframe. The server reads the videoID from the path, so the initial iframe is something like http:localhost:port/RGZDATAlIBg. It must be localhost instead of an IP or you will see the same issues. Not ideal but it worked.

I got the idea from: https://medium.com/@kfir.e/working-around-youtube-iframes-on-webview-based-mobile-apps-c8543fb7bd47

This however still requires that #5531 is merged. Otherwise the iframe will be opened in an external browser.