Newer Version Available

This content describes an older version of this product. View Latest

CspTrustedSite

Represents a CSP Trusted Site. The Lightning Component framework uses Content Security Policy (CSP), which is a W3C standard, to control the source of content that can be loaded on a page. To use third-party APIs that make requests to an external (non-Salesforce) server, add the server as a CSP Trusted Site.

Declarative Metadata File Suffix and Directory Location

CspTrustedSite components are stored in the cspTrustedSites directory of the corresponding package directory. The file name matches the unique name of the trusted site, and the extension is .cspTrustedSite.

Version

CspTrustedSite components are available in API version 39.0 and later.

Fields

Field Field Type Description
description string The description explaining what this trusted site is used for.
endpointUrl string Required. The URL for the trusted site.
isActive boolean Required. Indicates if the trusted site is active (true) or not (false).

Declarative Metadata Sample Definition

A sample XML definition of a trusted site is shown below.

Usage

CSP is a Candidate Recommendation of the W3C working group on Web Application Security. The framework uses the Content-​Security-​Policy HTTP header recommended by the W3C. By default, the framework’s headers allow content to be loaded only from secure (HTTPS) URLs and forbid XHR requests from JavaScript.

When you define a CSP Trusted Site, the site’s URL is added 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
This change to the CSP header directives allows Lightning components to load resources, such as images, styles, and fonts, from the site. It also allows client-side code to make requests to the site.

You can’t load JavaScript resources from a third-party site, even a CSP Trusted Site. To use a JavaScript library from a third-party site, add it to a static resource, and then add the static resource to your component. After the library is loaded from the static resource, you can use it as normal.

Important