0

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.

  • 1
    Did you try using proper static resource syntax for the scripts tag ? I see you still use old way of referencing static resource – Mohith Shrivastava Oct 13 '17 at 16:04
  • Could you elaborate? Do you mean the syntax to get the relative URL and access a path in the archive, something along the lines of: <apex:includeScript value="{!URLFOR($Resource.LibraryJS, '/base/subdir/file.js')}"/> If so, yes, tried and tested! – JoshHunter Oct 14 '17 at 20:12
  • Can you clarify what you want redacted from which revisions? – Adrian Larson Oct 17 '17 at 14:26
  • @AdrianLarson Could you remove everything taken out in the first revision, 'formatting'? Much appreciated. – JoshHunter Oct 17 '17 at 16:30
  • @AdrianLarson Fantastic, thanks for doing that! There are just two lines left at the top there where I've edited out the the full path names for the styles and resources attributes in ltng:require, just before the /assets/* path. Would you be able to get rid of those too if you get the chance? Apologies for the confusion, the help is much appreciated. – JoshHunter Oct 18 '17 at 11:22
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

  • Thanks for writing this out. This is the concise explanation I needed late on a Friday. I'll give it a whirl, much appreciated. – JoshHunter Oct 13 '17 at 20:12

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.