No 'Access-Control-Allow-Origin' / Locker Service / ltng:require

Question

Setup:

1. Visualforce Page using lightning out

   <apex:page id="Js_Examples" standardStylesheets="false" showHeader="false" sideBar="false">
   <apex:includeLightning/>
   
   <script>
       $Lightning.use("c:JS_App", function() {
           $Lightning.createComponent(
               "c:JS_Example", {
   
               },
               "content-div",
               function(cmp) {
                   var loadingDivElt = document.getElementById("loader");
                   loadingDivElt.style.display = 'none';
                   $A.eventService.addHandler({
   
                       .......
                   });
               });
       });
   </script>
   
   <div id="content-div">
   </div>
   </apex:page>
   

2. Lightning App and Component

App

<aura:application description="JS_App" access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="c:JS_Example"/>
    <aura:dependency resource="markup://force:navigateToURL" type="EVENT"/>
</aura:application>

Component

    <aura:component description="JS_Example">
        <lightning:spinner size="large" variant="brand"/>
        <ltng:require scripts="https://js.braintreegateway.com/js/braintree-2.32.0.min.js"/>
    </aura:component>

3. CORS and CSP Trusted sites added for both:

https://xxx-dev-ed--c.na30.visual.force.com

https://js.braintreegateway.com

4. Lightning Locker service Enabled

When loading the component I get the following error

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://xxx-dev-ed--c.na30.visual.force.com' is therefore not allowed access

Ways it does work

1. Locker service Disabled keeping <ltng:require> on the component

   • simply disabling locker service works and the resource is loaded

2. Leave locker service enabled, placing the following on the VF page, and commenting out the <ltng:require>

   <apex:includeScript value="https://js.braintreegateway.com/js/braintree-2.32.0.min.js"/>
   

So, any idea why I get the No Access origin?

I have reviewed the previous questions containing that message this year and none of them helped.

It is something in this JS and Locker service because jQuery CDN works fine.

So then I guess it boils down to is it a Locker Service Issue or not. Is there any way to load the resource in the component and if not does leaving it on the VF page cause any harm?

Answer 1

   ltng:require should be used to only load static resource. See the Notes section of this article. We do that because static resources are trusted and added by the system admin of the org. Resource in CDN can be changed anytime and is out of the system admin's control to stop malicious scripts being injected. Prior to lockerservice, this rule was not being enforced. With lockerservice enabled, we are enforcing these rules for security.
   CSP trusted sites are for making API requests and should not be used for accessing js/css resources.