dart-lang / dart-lang/webdev

Use Flutter Web App as iframe in regular html website

Open
#2,451 1 comment 0 reactions 0 assignees View on GitHub
P2 package:webdev triaged
Dominant language
Dart
Stars
224
Forks
94
Avg merge
4d 3h
Merged PRs (30d)
2

Description

I got the following html code using my flutter web app as an iframe. All the other tickets I found on here reference web sockets.

Here is my html code:

```html



Parent Page

html {
font-size: 16px;
}


var intervalId;
var x = 0;

function sendMessageToIframe() {
var iframe = document.getElementById("scIframe-5f910afd49fb4e4a92f453d45aff2fc7");
var p = iframe.contentWindow;

if (p) {
intervalId = window.setInterval(function () {
x++;
if (p) {
p.postMessage(JSON.stringify({
type: "message",
height: 1000, // Set your desired height here
scroll: true
}), "*");
}
if (x > 3) {
window.clearInterval(intervalId);
}
}, 100);
}
}

window.addEventListener("message", function(event) {
if (event.origin !== "http://localhost:58585") {
return;
}
var data;
try {
data = JSON.parse(event.data || "{}");
} catch (e) {
return;
}
if (data.type === "offsetHeight") {
document.getElementById("scIframe-5f910afd49fb4e4a92f453d45aff2fc7").style.height = data.windowoffset + "px";
}
}, false);

window.onload = sendMessageToIframe;

```

here is my flutter web/index.html:

```html









testme


var ALLOWED_ORIGIN = "http://localhost:58585";
var IFRAMEID = "scIframe-5f910afd49fb4e4a92f453d45aff2fc7";

function scrollToTop() {
window.scroll(0, 0);
}

function receiveMessage(event) {
if (event.origin === ALLOWED_ORIGIN) {
var data;
try {
data = JSON.parse(event.data || "{}");
} catch (e) {
return;
}
if (data && data.type === "message") {
var iFrame = document.getElementById(IFRAMEID);
iFrame.style.height = data.height + "px";
if (data.scroll) {
scrollToTop();
}
}
}
}

function debounce(func, timeout = 100) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => { func.apply(this, args); }, timeout);
};
}

function scrolling(event) {
var iframeWin = document.getElementById(IFRAMEID);
iframeWin.contentWindow.postMessage(
JSON.stringify({
type: "offsetHeight",
screenHeight: window.innerHeight,
iframeoffset: iframeWin.offsetTop,
windowoffset: document.body.offsetHeight,
boundingTop: iframeWin.getBoundingClientRect().top,
}),
ALLOWED_ORIGIN
);
}

if (window.addEventListener) {
window.addEventListener("message", receiveMessage, false);
window.addEventListener("scroll", debounce(scrolling), false);
} else if (window.attachEvent) {
window.attachEvent("onmessage", receiveMessage);
window.attachEvent("onscroll", debounce(scrolling));
}

```

Unhandled error detected in the injected client.js script.

You can disable this script in webdev by passing --no-injected-client if it
is preventing your app from loading, but note that this will also prevent
all debugging and hot reload/restart functionality from working.

The original error is below, please file an issue at
https://github.com/dart-lang/webdev/issues/new and attach this output:

SecurityError: Failed to read a named property 'document' from 'Window': Blocked a frame with origin "http://localhost:58585" from accessing a cross-origin frame.
Error: Failed to read a named property 'document' from 'Window': Blocked a frame with origin "http://localhost:58585" from accessing a cross-origin frame.
at Object._launchCommunicationWithDebugExtension (http://localhost:58585/dwds/src/injected/client.js:9694:23)
at http://localhost:58585/dwds/src/injected/client.js:25899:17
at _wrapJsFunctionForAsync_closure.$protected (http://localhost:58585/dwds/src/injected/client.js:4049:15)
at _wrapJsFunctionForAsync_closure.call$2 (http://localhost:58585/dwds/src/injected/client.js:12422:12)
at _awaitOnObject_closure.call$1 (http://localhost:58585/dwds/src/injected/client.js:12410:32)
at StaticClosure._rootRunUnary (http://localhost:58585/dwds/src/injected/client.js:4431:18)
at _CustomZone.runUnary$2$2 (http://localhost:58585/dwds/src/injected/client.js:13817:39)
at _Future__propagateToListeners_handleValueCallback.call$0 (http://localhost:58585/dwds/src/injected/client.js:12848:51)
at Object._Future__propagateToListeners (http://localhost:58585/dwds/src/injected/client.js:4214:93)
at _Future._completeWithValue$1 (http://localhost:58585/dwds/src/injected/client.js:12684:9)
at _AsyncAwaitCompleter.complete$1 (http://localhost:58585/dwds/src/injected/client.js:12396:14)
at Object._asyncReturn (http://localhost:58585/dwds/src/injected/client.js:4021:17)
at http://localhost:58585/dwds/src/injected/client.js:9849:24
at _wrapJsFunctionForAsync_closure.$protected (http://localhost:58585/dwds/src/injected/client.js:4049:15)
at _wrapJsFunctionForAsync_closure.call$2 (http://localhost:58585/dwds/src/injected/client.js:12422:12)
at _awaitOnObject_closure.call$1 (http://localhost:58585/dwds/src/injected/client.js:12410:32)
at StaticClosure._rootRunUnary (http://localhost:58585/dwds/src/injected/client.js:4431:18)
at _CustomZone.runUnary$2$2 (http://localhost:58585/dwds/src/injected/client.js:13817:39)
at _Future__propagateToListeners_handleValueCallback.call$0 (http://localhost:58585/dwds/src/injected/client.js:12848:51)
at Object._Future__propagateToListeners (http://localhost:58585/dwds/src/injected/client.js:4214:93)
at _Future._completeWithValue$1 (http://localhost:58585/dwds/src/injected/client.js:12684:9)
at _AsyncAwaitCompleter.complete$1 (http://localhost:58585/dwds/src/injected/client.js:12396:14)
at Object._asyncReturn (http://localhost:58585/dwds/src/injected/client.js:4021:17)
at http://localhost:58585/dwds/src/injected/client.js:26515:24
at _wrapJsFunctionForAsync_closure.$protected (http://localhost:58585/dwds/src/injected/client.js:4049:15)
at _wrapJsFunctionForAsync_closure.call$2 (http://localhost:58585/dwds/src/injected/client.js:12422:12)
at _awaitOnObject_closure.call$1 (http://localhost:58585/dwds/src/injected/client.js:12410:32)
at StaticClosure._rootRunUnary (http://localhost:58585/dwds/src/injected/client.js:4431:18)
at _CustomZone.runUnary$2$2 (http://localhost:58585/dwds/src/injected/client.js:13817:39)
at _Future__propagateToListeners_handleValueCallback.call$0 (http://localhost:58585/dwds/src/injected/client.js:12848:51)
at Object._Future__propagateToListeners (http://localhost:58585/dwds/src/injected/client.js:4214:93)
at _Future._completeWithValue$1 (http://localhost:58585/dwds/src/injected/client.js:12684:9)
at _AsyncAwaitCompleter.complete$1 (http://localhost:58585/dwds/src/injected/client.js:12396:14)
at Object._asyncReturn (http://localhost:58585/dwds/src/injected/client.js:4021:17)
at http://localhost:58585/dwds/src/injected/client.js:26492:24
at _wrapJsFunctionForAsync_closure.$protected (http://localhost:58585/dwds/src/injected/client.js:4049:15)
at _wrapJsFunctionForAsync_closure.call$2 (http://localhost:58585/dwds/src/injected/client.js:12422:12)
at _awaitOnObject_closure.call$1 (http://localhost:58585/dwds/src/injected/client.js:12410:32)
at StaticClosure._rootRunUnary (http://localhost:58585/dwds/src/injected/client.js:4431:18)
at _CustomZone.runUnary$2$2 (http://localhost:58585/dwds/src/injected/client.js:13817:39)
at _Future__propagateToListeners_handleValueCallback.call$0 (http://localhost:58585/dwds/src/injected/client.js:12848:51)
at Object._Future__propagateToListeners (http://localhost:58585/dwds/src/injected/client.js:4214:93)
at _Future._completeWithValue$1 (http://localhost:58585/dwds/src/injected/client.js:12684:9)
at _Future__asyncCompleteWithValue_closure.call$0 (http://localhost:58585/dwds/src/injected/client.js:12788:18)
at StaticClosure._rootRun (http://localhost:58585/dwds/src/injected/client.js:4416:16)
at _CustomZone.run$1$1 (http://localhost:58585/dwds/src/injected/client.js:13809:39)
at _CustomZone.runGuarded$1 (http://localhost:58585/dwds/src/injected/client.js:13752:14)
at _CustomZone_bindCallbackGuarded_closure.call$0 (http://localhost:58585/dwds/src/injected/client.js:13947:25)
at Object._microtaskLoop (http://localhost:58585/dwds/src/injected/client.js:4275:24)
at StaticClosure._startMicrotaskLoop (http://localhost:58585/dwds/src/injected/client.js:4281:11)
at _AsyncRun__initializeScheduleImmediate_internalCallback.call$1 (http://localhost:58585/dwds/src/injected/client.js:12299:9)

Contributor guide

Open the contributing guide

Research direction

Reproduce the iframe setup and inspect the injected client.js stack around _launchCommunicationWithDebugExtension, where the cross-origin SecurityError occurs. Compare the debug communication behavior when the Flutter app is embedded in a page with a different origin; done means the app loads without this injected-client error while preserving the relevant debugging behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart, javascript
Domain
devtools, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.