Comments (12)
I will give it a try in the next dev sprint, but at the moment we had to find another quick solution, so we went with the vanilla "postMessage". Thanks.
from penpal.
What is the value of the src
attribute on the iframe?
from penpal.
The iframe's src is something like https://child.domain.com. Both the parent and the child are on the same domain, just different sub-domains.
from penpal.
Can you put a breakpoint on this line:
penpal/src/getOriginFromSrc.js
Line 16 in 918c67a
getOriginFromSrc
seems to be returning https://parent.domain.com
instead of https://child.domain.com
.from penpal.
I was about to suggest the same feature, even with the same name, so this looks like a good idea.
I'm developing the web app for the smart TV platforms (Samsung and LG) and I ran into this issue. The problem is, that these platforms run on file://
protocol, but with a non-null origins in the messages. Here is the table that shows the problem:
Browser | Origin of location |
Origin of postMessage |
---|---|---|
Chrome 74 | file:// |
null |
LG webOS | file://com.lg.app.signage |
file://com.lg.app.signage |
Samsung Tizen | file:// |
file:// |
The file://
paths on these platforms are quite complicated and there is no way to deduce the origin from them.
So the solution i came with is adding a optional option called childOrigin
to the connectToChild
function. If it is explicitly defined, the getOriginFromSrc(iframe.src)
is not called and it is replaced by the childOrigin
option.
I also disabled the iframe.src
check, as it's value is no longer used and needed.
PS: Thank you much for this great library, saved me a couple of hours!
from penpal.
Oh that's interesting...and annoying that they aren't consistent. Thanks for the detail @radarfox. I need to take a while to digest this. @cojocaru-dragos-alexandru, are you dealing with the file:// protocol as well?
from penpal.
Hi guys, the protocol I was using was https. I basically had 2 websites: a "parent" one and another one displayed inside a parent's iframe.
from penpal.
I have done some further research and found out, that if you run Chrome with --allow-file-access-from-files
CLI argument, then the origin in the messages also changes to file://
. Here is the updated table:
Browser | Origin of location |
Origin of postMessage |
---|---|---|
Chrome 75 | file:// |
null |
Chrome 75 with --allow-file-access-from-files |
file:// |
file:// |
LG webOS | file://com.lg.app.signage |
file://com.lg.app.signage |
Samsung Tizen | file:// |
file:// |
So that is another proof, that parsing the origin from URL won't work for 100% of the cases. It would be nice, if the library would offer an alternative way to handle those cases.
Let me know if you need any help from me with implementing this.
from penpal.
Could you run npm install penpal@next
and make sure it solves your issues? You should be able to pass childOrigin
as an option into connectToChild
now.
from penpal.
BTW, the updated readme can be found at https://github.com/Aaronius/penpal/tree/v4.1.0. Feel free to give that a read and make sure it makes sense.
from penpal.
Works as expected, thank you very much! I'm looking forward to the official release.
Readme seems understandable. Maybe you can mention that iframe.src
is not requred in this case and you can add it later after calling connectToChild
.
from penpal.
Released in v4.1.1.
from penpal.
Related Issues (20)
- Compatibility v4-v5 HOT 2
- Latest chrome update breaks the penpal HOT 2
- TypeScript imports with Penpal 5.2.0 HOT 6
- Serializing Objects with Functions causes an error HOT 3
- Provide typing for Connection HOT 1
- How to detect if connection with child was lost? HOT 11
- Option to skip iframe validation? HOT 6
- Remove check that determines if `connectToParent` is running inside iframe HOT 1
- Iframe Removal Monitoring not Working with Custom Elements HOT 7
- Export types HOT 6
- Types for the response of Promise returned after connection established HOT 2
- dynamic iframe url HOT 3
- Make parentOrigin on connectToParent required
- Including penpal in babel producing errors HOT 1
- Examples for using with React Hooks HOT 4
- error "Cannot read properties of null (reading 'postMessage')" HOT 9
- Question: Why does penpal use Window#postMessage instead of MessageChannel? HOT 2
- connected fail HOT 2
- [Penpal] Parent: Awaiting handshake
- Feature request: allow subdomains of childOrigin HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from penpal.