8

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>
  1. CORS and CSP Trusted sites added for both:

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

https://js.braintreegateway.com

  1. 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?

  • My guess CSP enforced on lightning components, Javascripts has policy "script-src 'self' , which means it must be loaded from the same domain. developer.salesforce.com/page/… // tried loading from the static resource ? is the issue still the same .. – StormBr34ker May 27 '17 at 18:24
  • Al though not sure how a Jquery CDN works .. because it is not loaded from the same-domain. – StormBr34ker May 27 '17 at 18:31
  • I agree with @Samuga - check first if it loads from a static resource – Itai Shmida May 28 '17 at 5:12
0

   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.

  • 1
    Ok, guess I will just keep loading it in VF using lightning out then? Also why does jQuery CDN work? Thats what made me ask since one worked and the other did not – Eric May 30 '17 at 14:37
  • The rules are enforced at the page level using CSP's connect-src, script-src directive. That's the reason Lightning App is restricting you. Its working in VF because the rules are not being enforced yet, but that might change if VF team starts enforcing the rules. To your point that jQuery CDN is working, the Salesforce includes jQuery in certain lightning pages, you might be getting that and not the one you requested using the CDN. Check the version being loaded on the page and the one you requested, you will know if my suspicion is right. – Ravi Jayaramappa May 30 '17 at 18:35
  • 1
    Understood. But loading the jQuery from CDN within the Lightning Component using ltng:require does NOT throw any error. That is what caused the confusion for me as it worked for jQuery. You say we cannot load from CDN but you can as long as its jQuery? – Eric May 30 '17 at 18:38

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.