7

I am trying to use lightningStylesheets="true" and communicate from my LC. This doc exactly shows the steps on how to communicate between LC --> VF: https://developer.salesforce.com/blogs/developer-relations/2017/01/lightning-visualforce-communication.html

When I embed the VF page as iframe in Lightning component I see the following error:

Uncaught DOMException: Blocked a frame with origin "https://praowin-dev-ed--c.gus.visual.force.com" from accessing a cross-origin frame. at EditAreaLoader.add_event (https://praowin-dev-ed--c.gus.visual.force.com/apexpages/editarea_0_7_2_2/edit_area/edit_area_loader.js?sfdcVersion=1366068272000:714:10)

I assume this is due to the browser policy but when I alert/console.log on the VF page, the message is never getting posted from the LC --> VF

What am I messing up? Is it because of the --c, I am trying this POC from my winter 18 dev org

VF page renders from : https://praowin-dev-ed--c.gus.visual.force.com LC renders from : https://praowin-dev-ed.lightning.force.com

Pretty much copy paste from the blog:

LC code:

<aura:component implements="flexipage:availableForAllPageTypes"
                access="global">

    <aura:attribute name="message" type="String"/>
    <aura:attribute name="vfHost" type="String"
            default="praowin-dev-ed.gus.visual.force.com"/>

    <!-- Input field for message "data" -->
    <ui:inputtext value="{!v.message}" label="Enter message:"/>
    <lightning:button label="Send to VF" onclick="{!c.sendToVF}"/>

    <!-- The Visualforce page to send data to -->
    <br/>

    <iframe aura:id="vfFrame" src="{!'https://' + v.vfHost + '/apex/vfpageforlightining'}" width="1500" height="1500"/>

</aura:component>

controller:

({
    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 lightningStylesheets="true">
<apex:outputText value="value from LC"></apex:outputText>

<script>
    var lexOrigin = "https://praowin-dev-ed.lightning.force.com";
    window.addEventListener("message", function(event) {
    alert(event);
        if (event.origin !== lexOrigin) {
            // Not the expected origin: reject message!
            return;
        }
        // Handle message
        console.log(event.data);

    }, false);
</script>

</apex:page>
  • Are you using the lightning app builder "page editor" (where you can drag/drop components into areas of a flexipage) when this error is occurring? – Mark Pond Sep 15 '17 at 21:20
  • I tried both ways 1) Creating a lightning app and clicking preview 2) Dragging the component into a app builder page and trying to get the data from LC. No luck on both – Rao Sep 15 '17 at 21:38
7

Finallyyyyyyyy I figured out !!!

I had set development mode on in my user profile**** because of which I was getting the following error.

Uncaught DOMException: Blocked a frame with origin "https://praowin-dev-ed--c.gus.visual.force.com" from accessing a cross-origin frame. at EditAreaLoader.add_event

As soon as I deactivated the development mode and lost access to the VF code editor, the window.postmessage was successfully posting as expected.

1

The value that is in the vfHost attribute needs to be host portion of the URL of the VF page, the same as you would see it in the browser.

The easiest way to verify that you've got the right URL, is to view the VF page directly in the browser. This also lets you verify permissions for the current user to access the VF page, etc.

Based on the error, the VF host is praowin-dev-ed--c.gus.visual.force.com

<aura:attribute name="vfHost" type="String"
        default="praowin-dev-ed--c.gus.visual.force.com"/>

The value you've got for the lightning host looks correct and should require no modification.

var lexOrigin = "https://praowin-dev-ed.lightning.force.com";
  • I am expecting to see alerts/ message in console showing the value from the component input field, is this a realistic expectation. The postmessage method does not do it asynchronous does it? I have activate every critical update related to lightning to make sure the approach is locker compliant, is there any way you can replicate the code from the blog post when you get a chance? – Rao Sep 15 '17 at 21:05
  • I am also pretty sure i have the vfhost part right because the VF page is showing up inside the iframe as expected. – Rao Sep 15 '17 at 21:11
  • Your expectation is correct. You will see the output from console.log statements written in the lightning markup as well as any in the iframe. – Mark Pond Sep 15 '17 at 21:13
  • Finally I figured out !!! I had set development mode on in my user profile because of which I was getting the Uncaught DOMException: Blocked a frame with origin "praowin-dev-ed--c.gus.visual.force.com" from accessing a cross-origin frame. at EditAreaLoader.add_event – Rao Sep 15 '17 at 22:25

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.