Refused to load script because it violates Content Security Policy directive

Question

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'

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:

Answer 1

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.