[SalesForce] Communicating between Lightning component and VF Page

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>