LockerService/CSP cross-origin security error

Question

I'm getting the following error in the process of updating one of our remaining components to API version 40.0:

Uncaught SecurityError: Blocked a frame with origin "https://myorg.visual.force.com" from accessing a cross-origin frame. throws at https://myorg.visual.force.com/auraFW/javascript/xyz

I've tried everything I've come across, but I'm having no luck. CORS whitelisting, Firefox, Chrome, Edge. Not a single solution has worked to date.

    <script>

        <!--params here -->
        $Lightning.use("c:MyApp", function() {
            $Lightning.createComponent("c:MyCmp",
            { params: '',
              label : "" },
            "lightning",
            function(cmp) {
            });
        });
    </script>

We have a VF page above which creates our lightning component, which is linked up to and 'communicates' with our external JS library:

<aura:component controller="My_Ctrl" >
  <ltng:require styles="/assets/stylesheets/ui.css"
              scripts="/resource/JQuery224,/assets/javascripts/ui.js"
                afterScriptsLoaded="{!c.doInit}" />
  <aura:attribute name="myExternalLib" type="String"default="namespace_ExternalLib" />

<!-- Attributes here -->

  <div style="height:100%;">
    <div aura:id="filterWrapper"></div>
    <br/>
    <div aura:id="tabsWrapper"></div>
    <br/>
    <div style="height:70%;">
        <div aura:id="journalItemsSpinner" class="spinner--small slds-hide" style="width:32px; height: 32px; position: fixed; top: 50%; left: 50%; z-index: 8000;">
            <img src="/assets/images/spinners/spinner.gif" alt="Loading..." />
        </div>
        <div class="-wrap" style="height:100%">
            <div style="height:100%;" class="my-class" >
                <div aura:id="cardListWrapper" style="height:100%;"></div>
                <div aura:id="pagination"></div>
            </div>
            <div style="height:100%;" class="slds-large-size--1-of-5" >
                <div aura:id="id1" style="height:100%;"> </div>
            </div>
        </div>
    </div>
  </div>

</aura:component>

I'm at a complete loss after an already long week. Does anyone have any ideas where I should be looking? Any help much appreciated.

Answer 1

Background of this issue:

There are two important things you need to know about Visualforce pages running in Lightning Experience:

Different DOMs. A Visualforce page hosted in Lightning Experience is loaded in an iframe. In other words, it’s loaded in its own window object which is different from the main window object where the Lightning Components are loaded.

Different Origins. Visualforce pages and Lightning Components are served from different domains. For example, if you are using a developer edition:

Lightning Components are loaded from a domain that looks like this: yourdomain-dev-ed.lightning.force.com Visualforce pages are loaded from a domain that looks like this: yourdomain-dev-ed–c.na35.visual.force.com

The browser’s same-origin policy prevents a page from accessing content or code in another page loaded from a different origin (protocol + port + host).

that means that a Visualforce page can’t use the parent window reference to access content or execute code in the Lightning Component wrapper. Similarly, the Lightning component can’t use the iframe’s contentWindow reference to access content or execute code in the Visualforce page it wraps.

1. Lightning Component to Visualforce Page:

({
    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);
    }
})

2. Visualforce Page to Lightning Component:

<apex:page>
<input id="message" type="text"/>
<button onclick="sendToLC()">Send to LC</button>

<script>

    var lexOrigin = "https://yourdomain-dev-ed.lightning.force.com";

    function sendToLC() {
        var message = document.getElementById("message").value;
        parent.postMessage(message, lexOrigin);
    }

</script>

</apex:page>

and you can receive that inside component

({
    doInit : function(component) {
        var vfOrigin = "https://" + component.get("v.vfHost");
        window.addEventListener("message", function(event) {
            if (event.origin !== vfOrigin) {
                // Not the expected origin: Reject the message!
                return;
            }
            // Handle the message
            console.log(event.data);
        }, false);
    }

})

Reference: https://developer.salesforce.com/blogs/developer-relations/2017/01/lightning-visualforce-communication.html