1

I'm currently working to include my external js in aura component. So, i have included my external JS as static resource. but i'm getting the below exception.

Refused to load the script '...' because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-...' chrome-extension: 'unsafe-inline' 'unsafe-eval'

Refused to load script

I have added all the required sites in below modules.

  1. Cors
  2. Remote Site Settings
  3. CSP trusted sites.

Please guide me to handle this issue

My sample external JS code:

var contentURL= 'https://xxxxxx.xxxxxx.xxxxxx.xxxxxx';
var serverUrl = 'https://xxxxxx.xxxxxx.xxxxxx';
var hostedJsUrl = 'https://xxxxxx.xx.xxxx.xxx';
var hostedJsPath = 'https://client.qa.xxxxxx.xxxxxx/qa/client-injected-latest';
var element = window.document.createElement('script');
element.setAttribute('id', 'letznav-script');
element.setAttribute('type', 'text/javascript');
element.setAttribute('data-server', serverUrl);
element.setAttribute('data-instanceid', tenantKey);
element.setAttribute('data-hosted-js', hostedJsUrl);
element.setAttribute('data-content-url', contentURL);
element.setAttribute('src', hostedJsPath + '/apty-client.js');
element.setAttribute('data-fonts-url', fontsUrl);
window.document.head.appendChild(element);

Locker Service Results:

enter image description here

Improve this question
12
  • 1
    Salesforce blocks JavaScript code that violates common security rules so many 3rd party JavaScript libraries will not run. In the image you post 'unsafe-eval' is listed; read about that e.g. here stackoverflow.com/questions/2571401/why-exactly-is-eval-evil.
    – Keith C
    Commented Mar 23, 2022 at 15:53
  • @KeithC Thanks for looking in to this but we are not using eval() in any calls in the js and even i have deactivated the lockerservice for my component. Could you please look in to this
    – Pavan tej
    Commented Mar 24, 2022 at 9:02
  • OK. Have you tried adding a copy of the JS as a static resource and accessing it from there?
    – Keith C
    Commented Mar 24, 2022 at 9:13
  • 1
    The URLs in the error message look like they are external; does the static resource JS reference other external JS?
    – Keith C
    Commented Mar 24, 2022 at 10:13
  • 1
    I can see contentURL, serverUrl, hostedJsUrl, hostedJsPath etc. in the sample external JS code posted. Are all of these added to CSP Trusted sites? Also, the external JS code seems to be creating a <script> element dynamically. Have you used Locker Service Console to evaluate this JS code?
    – arut
    Commented Mar 29, 2022 at 5:37

1 Answer 1

Reset to default
4
+25

You will have to tweak your external JS, load the other referenced JS files also as static resources and include them in aura component using ltng:require.

Refer to CSP Overview

JavaScript libraries can only be referenced from your org. All external JavaScript libraries must be uploaded to your org as static resources. The script-src 'self' directive requires script source be called from the same origin.

SF objective here is to help prevent cross-site scripting (XSS) and other code injection attacks

Your external JS file is trying to create a script tag and add it dynamically to window.document.head. During page rendering, element.setAttribute('src', hostedJsPath + '/apty-client.js'); will possibly translate into script-src tag at page level. Adding the URL to CSP will not allow you to fiddle with script-src tag and that will always be set to self by default. As mentioned in CSP Trusted Sites access to 3rd Party APIs, only the few other tags are supported.

When you define a CSP Trusted Site, you can add the site’s URL to the list of allowed sites for the following directives in the CSP header.

connect-src, frame-src, img-src, style-src, font-src, media-src

For understanding the differences between connect-src & script-src, you may refer this & this.

Improve this answer
1
  • How does one get around this CSP for Experience Cloud sites? Same or different way?
    – compski
    Commented Sep 14, 2023 at 9:57

You must log in to answer this question.

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