1

I have a Component that wraps a VF page as an Iframe and called from a FLOW.

I'm trying to implement the Communicating between Lightning Components and Visualforce Pages, from the vf to the Lightning component side. (VF -> Lightning component).

I'm getting the below error while doing it

failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('') does not match the recipient window's origin ('').

And it kind clear because the URL of the flow is :

https://MyDomain.visual.force.com/

And The origin that I try to communicate with, which hosts Lightning components, is

https://MyDomain.lightning.force.com/

VF page :

  var lexOrigin = "https://MyDomain.lightning.force.com";
  var element = CKEDITOR.instances['thepageid:theformid:editor1'].getData();
parent.postMessage(element, lexOrigin);

Aura INIT handler:

 var vfOrigin = "https://" + component.get("v.vfHost");
     window.addEventListener("message", $A.getCallback(function(event) {
        if (event.origin !== vfOrigin) {
           // Not the expected origin: Reject the message!
           return;
        }
        // Handle the message
         console.log(event.data);
        }), false);
        console.log('dssdds',dssdds);

How can I solve the issue, which VF sends data to aura component that hosts in a flow?

Many Thanks,

3

My guess is that you have tried to follow the advice in this blog post in order to implement communication between Lightning and Visualforce. If so, you should probably forget it.

This blog post includes hard-coded vfOrigin and lexOrigin values, and glibly states that "In a real-life application, you should obtain this value dynamically instead of hardcoding it" for these values.

However, I spent days trying to work out how to determine the vfOrigin and lexOrigin values could be programmatically constructed and in the end (and after discussion on the partner forums with other partners and Salesforce technical evangelists and a product manager) discovered that there is currently no way to do this. There is no API that exposes the LEX URL in the context of Visualforce, nor one that exposes the VF URL in the LEX context.

As such you would be forced to take the hardcoding route which will break when you consider use of dev orgs or sandboxes vs production.

Note, however, that you have a new approach available to you - that of the Lightning Message Service which GAed in Summer '20. I haven't tried it for myself with communication across iframes.

If this does work for you, please be aware that there are certain limitations, such as not being supported in communities.

| improve this answer | |
  • Correct, I followed the blog above. I'll check it the new approach, thanks for your answer. If I won't have a choice I will use hard codded and will use PostMessage method twice - one for the flow and one for the lightning - I'm not really like this solution so I hope the new approach will be satisfied. thanks again – Salvation Jul 29 at 18:42

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.