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.


        <!--params here -->
        $Lightning.use("c:MyApp", function() {
            { params: '',
              label : "" },
            function(cmp) {

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"
                afterScriptsLoaded="{!c.doInit}" />
  <aura:attribute name="myExternalLib" type="String"default="namespace_ExternalLib" />

<!-- Attributes here -->

  <div style="height:100%;">
    <div aura:id="filterWrapper"></div>
    <div aura:id="tabsWrapper"></div>
    <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 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 style="height:100%;" class="slds-large-size--1-of-5" >
                <div aura:id="id1" style="height:100%;"> </div>


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 Oct 13, 2017 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!
    – jnhunter
    Oct 14, 2017 at 20:12
  • Can you clarify what you want redacted from which revisions?
    – Adrian Larson
    Oct 17, 2017 at 14:26
  • @AdrianLarson Could you remove everything taken out in the first revision, 'formatting'? Much appreciated.
    – jnhunter
    Oct 17, 2017 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.
    – jnhunter
    Oct 18, 2017 at 11:22

1 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:

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


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

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



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!
            // Handle the message
        }, 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.
    – jnhunter
    Oct 13, 2017 at 20:12

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .