fix: set innerText instead of innerHTML

[bsmth]

Setting innerHTML from an iframe allows unsafe contents in the main page. Switching to innerText instead.

Also adding some styles so it's apparent what is the iframe in the index.html

Compat:

I've noticed this breaks in Fx, but works in Chrome and Safari. It could be down to stricter handling of targetOrigins (* in this case) see https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#security_concerns

[pepelsbey]

Regarding the compat: it works in Firefox via a local server, but doesn’t when opened as a file.

[pepelsbey]

I also noticed that the original demo works only in Safari but not in Chrome or Firefox: see [object Object] in the frame.

[bsmth]

Regarding the compat: it works in Firefox via a local server, but doesn’t when opened as a file.

Really? I was serving it also, so I wonder if it's to do with that. I'm using http-server:

http-server -c-1
http-server --v
# v14.1.1

I'll try some other options

[bsmth]

I re-tested and I realized it's from Fx nightly that I get compat issues, it could be a pref I've changed, I'm not sure.

Anyway, this works as expected in

• Fx 122.0.1 (64-bit) & 123.0 (64-bit) after update
• Safari Version 17.2.1 (19617.1.17.11.12)
• Chrome Version 122.0.6261.94 (Official Build) (arm64)

Tested using both of these:

cd channel-messaging-basic
http-server -c-1
# ^C
python3 -m http.server

I also noticed that the original demo works only in Safari but not in Chrome or Firefox: see [object Object] in the frame.

I don't see this using the browser versions listed above, could you check again? I did get [object Object] in Fx nightly but only on localhost

[bsmth]

btw @pepelsbey, this is ready for another look when you have time. No rush 🙌🏻

[pepelsbey]

Sorry, I got distracted by the compatibility. It has been like that before this PR, so it’s irrelevant here. LGTM!

[bsmth]

Thank you!