One of the challenges admins can face when setting up a new experience cloud site is configuring the sites Content Security Policy, or CSP. CSP is an added layer of security that helps to detect and mitigate certain types of attacks. Salesforce Digital Experiences are often public-facing, so maintaining a Content Security Policy is a good way to improve your community's security. While very basic forms will work out-of-the-box in experiences, more advanced forms may require some updates to your CSP in order to function. In this article, we will cover the different places where you can configure your CSP in Salesforce, and how to enable the third-party domains required to get advanced forms working inside an experience.
CSP Security Settings
To allow third-party resources in your experience cloud site, the first thing you will have to update is your experience cloud sites CSP Security Level. You can do this by going to the Builder for your site under:
Setup > Feature Settings > Digital Experiences > All Sites
Once you are on this page, click on "Builder" next to the site where your form is hosted:
From here, you will need to update the CSP Security level to "Relaxed CSP" by clicking on the gear icon on the left-hand side and navigating to:
Security > CSP > Security Level
A Strict CSP security level will always block all external resources, and does not allow for allowed of specific URLs. Relaxed CSP security allows you to allow external URLs for use in your community.
Images and CSS blocked by CSP
Our forms allow you to embed images on them. Most commonly, we see images used as a header for the form, or to provide additional context to a specific field or section. Because your experience cloud site will be hosted in its own domain that is different than your Salesforce organization's domain, those images are technically coming from a third-party domain. As an example, I might have a site hosted at https://mycustomercommunity.force.com but uploaded images are hosted inside my Salesforce instance at https//mycompany.my.salesforce.com. because these two URLs are different, our CSP needs to be updated to allow images from my Salesforce domain.
The first indication you will notice when your CSP needs to be updated is this helpful message that should appear when viewing your form inside the experience cloud builder:
This message will include the domain that you should allow in the section marked "Blocked URI". To update your CSP and allow this domain, you will need to go to:
Setup > Security > CSP Trusted Sites
Then click on "New Trusted Site". Give the Trusted Site a name which indicates what sort of content you are allowing. I typically use something like "Hosted Form Images". Under "Trusted Site URL" you will want to include the Blocked URI without any path information. So, that would be everything from https:// to .com. You can leave out all of the part information after .com. Here is the final Trusted Site definition for the above screenshot:
Now the form's header image should display without issue. The process is largely the same for CSS. Though you should not need to permit any sites when using our built-in style editor, if you are loading CSS files through javascript you will need to allow those domains using this same process. First, find the URL in the CSP warning, then go to the CSP Trusted Sites page in Setup and add the URL.
If you are not seeing a warning in the builder, you can check the CSP Errors section inside the experience builder:
Any items which have been blocked by your Experience Cloud sites CSP settings will show up in this section.
Scripts blocked by CSP
Some advanced users may also be loading their own external javascript in their forms, or incorporating a 3rd party service service. This will require you to load javascript which is hosted outside of the experience site. The process for allowing scripts is slightly different than for images and stylesheets.
I am using bootstrap to demonstrate this example, but any script hosted outside of your Experience site will require the same CSP updates:
For script resources, we need to update the CSP settings from within the Site. In the security settings of the Experience Site Builder, you will see a section titled "Trusted Sites for Scripts". Click on "+ Add Trusted Site"
Like before, I am copying the domain of the URL and placing it in the URL section of this CSP definition:
Click "Add Site" and re-publish your site.
Finally, repeat the process used for allowed images and stylesheets and add the same URL under Setup > Security . CSP Trusted Sites
Hopefully this guide will help you navigate setting up your CSP Trusted Sites when setting up Experience Cloud Sites.