1

Below is the code which is working in lightning community (Standalone page, record page, home page etc) but not in lightning experience (separate component URL, record page etc).

LWC HTML:

<template>
    <lightning-button label="Clear Preview" onclick={clearPreview}></lightning-button>
    <iframe src="/apex/emailTemplatePreview"
            style="width: 100%; height: 80rem; border:0">
    </iframe>
</template>

LWC JS:

clearPreview() {
    var vfWindow = this.template.querySelector('iframe').contentWindow;
    vfWindow.postMessage('Preview Cleared');
}

Pls note that I am not passing source origin parameter to make it simple initially. But even if its included, its not working.

Page:

<apex:page showHeader="false">

    <div>Page</div>

    <script>
        console.log('page loaded');
        var lexOrigin = "https://mcdmdev-sasank-1.lightning.force.com";
        window.addEventListener("message", function (event) {
            // if (event.origin !== lexOrigin) return; // commented for testing
            console.log(event.data);
        }, false);
    </script>
</apex:page>

When message is posted through Window.postMessage from parent LWC component, nothing really happens in page and no logging is done. Pls Note that the exact same code is working anywhere in community but not in lightning experience.

2
4

window.postMessage takes a second argument for the targetOrigin. From MDN

targetOrigin Specifies what the origin of targetWindow must be for the event to be dispatched, either as the literal string "*" (indicating no preference) or as a URI. If at the time the event is scheduled to be dispatched the scheme, hostname, or port of targetWindow's document does not match that provided in targetOrigin, the event will not be dispatched; only if all three match will the event be dispatched. This mechanism provides control over where messages are sent; for example, if postMessage() was used to transmit a password, it would be absolutely critical that this argument be a URI whose origin is the same as the intended receiver of the message containing the password, to prevent interception of the password by a malicious third party. Always provide a specific targetOrigin, not *, if you know where the other window's document should be located. Failing to provide a specific target discloses the data you send to any interested malicious site.

I believe the issue here is that your targetOrigin is not matching VF origin outside of communities. For starters, you can try using an asterisk ('*') for the targetOrigin parameter, just to test the theory. You will want to replace it with the exact domain of your VF page later as using an asterisk for targetOrigin is a huge security risk.

More details here: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

5
  • I always tested without the origin parameter and worked. Document does not say its optional. let me try * – salesforce-sas Aug 5 '20 at 16:11
  • in your question, you stated that you omitted source origin for simplicity, not target origin. That being said, if you omit the target origin, messages may only be transmitted to windows served from the same domain as the source. In case of Lightning Experience, VF pages and Lightning components are served from different domains. If you simply change your code to vfWindow.postMessage('Preview Cleared','*'); it should work. – Suraj Aug 5 '20 at 16:22
  • In lightning experience or communities, the domain of vf page frame is same as main window – salesforce-sas Aug 5 '20 at 16:30
  • might be so for communities. Definitely not the same in Lightning Experience. Try a console.log(window.location.host) in your VF page and see for yourself. – Suraj Aug 5 '20 at 16:39
  • You are right, in communities its same but for lightning experience, its different. Also I have been checking the src of frame directly on element in console which shows same origin of lightning.force. Thanks! – salesforce-sas Aug 5 '20 at 16:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.