Communicating between Lightning Aura component and VF Page

Question

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>

Answer 1

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.

Answer 2

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";