Error: Parent component window is on a different domain

I have 2 xcomponents and 3 sites:

http://localhost:8008 (button.js xcomponent) http://localhost:8004 (pay.js xcomponent) http://localhost:8005 (uses button.js)

So site 8005 imports button.js from 8008. When a user clicks on the button, the script uses pay.js to open a popup window with 8004 site in. Very similar to how PayPal works (user clicks the PayNow button and the checkout appears in popup/lightbox).

So in the 8008 site, I have code like:

    document.querySelector('#payButton').addEventListener('click', function(event) {
        let props = {
            ...
        };

        //Pay.renderPopup(props);
       Pay.renderPopupTo(window.parent, props);
    });

When renderPopupTo() is called, the lightbox is created over the parent window, the popup window is opened and the location for the popup is correctly http://localhost:8004. However, in the popup window I get the error:

Error: Parent component window is on a different domain - expected http://localhost:8004 - can not retrieve props at ChildComponent.value

If I just call renderPopup() instead, everything works fine EXCEPT the lightbox is only shown over the button, not over the whole parent window.

So, what is wrong with my usage of renderPopupTo()?

[bluepnume]

So far, I’m following the same rules that browsers follow for cross-domain security. So a page is only considered ‘same domain’ so long as:

• The protocol matches exactly (http / https)
• The domain matches exactly
• The port matches exactly

I want to make sure people aren’t taken by surprise with any of these rules being more permissive than browser-defaults. So, with these restrictions, allowing subdomains by default would be a no-go.

That said, it’s totally possible to have any domain setting xcomponent offers to accept an array or a regex, to allow multiple domains or a domain patterns. That way, people could explicitly allow whichever domains or sub-domains they like, for instance /^https:\/\/.*\.foo\.com$/ to allow any subdomain of foo.com.

[bluepnume]

So, the reason for this is, for renderTo() we have to pass the props over to the other window securely.

For same-page rendering that’s easy, we can just pass the props directly.

For rendering to a remote page with renderTo(), we’d have to pass the props through an untrusted domain. That may be ok in certain scenarios, but didn’t want to enable it by default in xcomponent. So, instead, we restrict the child component to the same domain as the renderer, that way the props can be passed securely using a cross-window global variable.

Depending on demand, could probably add some kind of trusted domain setting to allow passing props through the parent window.

But for now, yep, button.js and pay.js have to be the same domain.

------------------------------
|    parent page [ x.com ]   |
|                            |
|     --------------------   |
|     | button [ y.com ] |   |
|     ----------|---------   |
|               |            |
|     renderTo(win.parent)   |
|               |            |
|     ----------v---------   |
|     |   pay [ y.com ]  |   |
|     --------------------   |
|                            |
------------------------------

Work for you?