8

I am trying to send data from Lightning component to visualforce page on clicking of button Inside lightining component.On Clicking of button am getting error like "Blocked a frame with origin from accessing a cross-origin frame"

Component code

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global">
 <aura:attribute name="message" type="String"/>
 <ui:inputText label="Send Msg" value="{!v.message}" />
 <lightning:button label="Send to VF" onclick="{!c.sendToVF}"/>
 <aura:attribute name="vfHost" type="String" default="XXX-dev-ed.ap5.visual.force.com"/>
 <iframe aura:id="vfFrame" src="{!'https://' + v.vfHost + '/apex/MyVf'}" width="100%" height="500px;" frameBorder="0"/> 
</aura:component>

Component JSController

sendToVF : function(component, event, helper) {
    var message = component.get("v.message");
    var vfOrigin = "https://" + component.get("v.vfHost");
    var vfWindow = component.find("vfFrame").getElement().contentWindow;
    vfWindow.postMessage(message, vfOrigin);  
}

VF page

<apex:page  >
<input id="message" type="text"/>
<script>
 var lexOrigin = "https://XXX-dev-ed.ap5.lightning.force.com";
 window.addEventListener("message", function(event) {
  if (event.origin !== lexOrigin) {
            // Not the expected origin: reject message!
            return;
        }
  console.log("----Lightining message :" +event.data);
 }, false);
</script></apex:page>

Please let me know how to resolve this issue.

  • This happens due to locker service so change your component,vf page version to 39 and this error will go. – Himanshu Sep 17 '17 at 16:50
  • @Himanshu - After changing the version of component and vf page also getting same error. – sajid Sep 17 '17 at 18:11
8

For my taste you got a lot of missleading answers here...

This behavior has nothing to do with LockerService.

Without LockerService it is exactly the same as you have already observed.

The sole reason is the fact that visualforce pages are served from a different domain than Lightning Experience (holding your Lightning Component).

This is done by Salesforce on purpose and it's considered as a security feature. You can't turn it off.

Good news: there is an officially documented practice to overcome this frontier by using window.postMessage(). With that you can implement bidirectional communication between Visualforce and Lightning Components.

It is described in depth here: https://developer.salesforce.com/blogs/developer-relations/2017/01/lightning-visualforce-communication.html

There is no need of making REST calls for communication between VF and Lightning or going back to server as crmprgdev describes.

window.postMessage() is also not affected by LockerService. In fact you can find in the documentation of LockerService that this Standard Javascipt API is even officially supported by LockerService:

http://documentation.auraframework.org/lockerApiTest/index.app?aura.mode=DEV

That means all this works fine with v40.0 and chances are very good that it will work in future versions either.

  • Great answer. I'd recommend using github.com/davidjbradshaw/iframe-resizer to help with embedding VF pages inside of iframe's in Lightning. We do this to make the experience feel more seamless. You can also then make use of the readyCallback hooks to know when the VF page has loaded. – MattGoldspink Sep 21 '17 at 11:02
  • @MattGoldspink we've created the same component 2 years ago when our clients started to ask for LEX instead of Aloha. Honestly the dynamic resizer was my first and for some time the only LC I've made. We can adjust the size according the content or dynamically according to the LEX-window (full height). Additionally we can tunnel toast-messages, popup-windows, bi-directional-reload-notifications and much more. I can't understand why Salesforce is neglecting this. The standard VF-container is simply a experience-show-stopper. We should get something better out-of-the-box. – Uwe Heim Sep 21 '17 at 12:54
1

I've seen this error sometimes when I've enabled "Developer mode." It's the feature that has the Visualforce viewstate viewer, and works by iframing a different domain. Try going to your user profile and disabling that.

Here's a similar question: Communicating between Lightning component and VF Page

0

There are two reasons behind this.

  1. On each instance, Visualforce pages are served from a different server than Lightning pages are served from. If you ever want to check, you'll notice that the sessionId in a Visualforce page is different than the sessionId in a Lightning page during the exact same session.

  2. The Locker Service enforces cross-origin restrictions on components. This is analogous to enforcing cross-site scripting as part of Salesforce tightening security measures.

Even though the content from both are displayed on the same page, the proper way to connect and share data between the component and the Visualforce page would be to either:

  • Go back to the server through the controller, or...

  • Make a REST call

If the content of the I-frame wasn't hosted inside of Salesforce you'd need to either make a REST callout from the component or from the server-side controller. The same applies when you're going cross-origin.

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.