I am trying to understand how we can put an vf page inside an lightning component and send message from lightning component to vf page.
I am using the website https://developer.salesforce.com/blogs/developer-relations/2017/01/lightning-visualforce-communication.html   for reference.

In my current project a similar scenario has been implemented where the vf page embedded inside the lightning component makes an api call.

so I am breaking down things and trying to understand.

sendMessageToVF.cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
	
    <aura:attribute name="message"
                    type="string"
                    default="Hello communication"
                    access="global"/>
    
    <aura:attribute name="vfHost"
                    type="string"
                    default="sheilasrivastav-dev-ed--c.na35.visual.force.com"
                    access="global"/>
    
     <lightning:input type="text" 
                     label="Message" 
                     name="Message"
                     value="{!v.message}"/>
    
    <lightning:button label="sendtoVF"
                      onclick="{!c.sendtoVF}"/>
    
    <!--the visual force page that we need to send data to-->
    <iframe aura:id="vfFrame" 
            src="{!'https://' + v.vfHost + '/apex/myvfpage'}"/>

</aura:component>


SendMessageToVFController.js

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


myvfpage.vfp

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

Mainapp.app

<aura:application extends="force:slds"
                  access="global">
    
    <c:SendMessageToVFPage/>
    
</aura:application>

when I run the application I get an error as follows:

This page has an error. You might just need to refresh it. Action failed: c:SendMessageToVFPage$controller$sendtoVF [Blocked a frame with origin "https://sheilasrivastav-dev-ed.lightning.force.com" from accessing a cross-origin frame.] Failing descriptor: {c:SendMessageToVFPage$controller$sendtoVF}

I think locker service is coming into the picture but how to resolve this.

Pls let me know.

thanks
sheila