Refused to connect to <url> because it violates the following Content Security Policy directive

Lightning components run in a strict CSP that blocks any browser-originated fetch to a URL the org hasn't trusted. The browser console message is verbose:

Refused to connect to 'https://api.example.com/data'
because it violates the following Content Security Policy directive: "connect-src 'self' ..."

Two paths to fix it.

Path 1: Whitelist the URL as a CSP Trusted Site

Setup → Security → CSP Trusted Sites → New Trusted Site:

Check the boxes for the directives the URL needs:

• connect-src — for fetch(), XMLHttpRequest, WebSockets
• frame-src — for <iframe src>
• img-src — for <img src> from this origin
• style-src / script-src — for stylesheet/script loads (rarely allowed)

Save. The browser CSP includes the new origin within minutes.

Path 2: Route the call through Apex

Better for security and rate-limiting: don't let the browser hit the external API at all. Have the LWC call your Apex @AuraEnabled method, which makes the HTTP callout server-side.

// LWC
import getExternalData from '@salesforce/apex/ExternalApiController.getExternalData';

async loadStuff() {
  this.data = await getExternalData({ accountId: this.recordId });
}

public with sharing class ExternalApiController {
    @AuraEnabled(cacheable=true)
    public static String getExternalData(Id accountId) {
        HttpRequest req = new HttpRequest();
        req.setEndpoint('callout:ExampleAPI/data?account=' + accountId);
        req.setMethod('GET');
        return new Http().send(req).getBody();
    }
}

Benefits over Path 1:

• The external URL never appears in the browser; you can't accidentally leak it via DevTools
• Authentication uses Named Credentials, so the OAuth token doesn't leak to the browser either
• You can add server-side caching, retry logic, and validation
• Salesforce sees the callout in ApexCallout debug logs

Path 1 is fine for low-stakes public APIs (a public weather API, a CDN). Path 2 is the right answer for any authenticated or sensitive endpoint.

When CSP fires for script-src

If your component dynamically loads a third-party JS library and you get Refused to load script ..., the same rule applies — you'd add the script's origin under script-src in the CSP Trusted Sites. But Salesforce strongly discourages adding script-src to org-wide CSP. Use the <lightning/platformResourceLoader> module to load static resources you've uploaded to the org, instead of pulling from a CDN.

A diagnostic gotcha

CSP errors only show up in the browser console, not in the Apex debug log. If you're tailing logs and not seeing anything, the failure is in the browser. Open DevTools → Console.