Description
If an external image is not displaying in a Salesforce or Community (Experience Cloud), this is likely due to restrictions related to content security policies (CSP) or image permissions. Salesforce Communities have strict security settings that can prevent external content from displaying, especially when the content is hosted on external domains.
Troubleshooting Steps and Solutions
1. Add the Image Domain as a Trusted Site in CSP Settings
In Salesforce Communities, Content Security Policy (CSP) settings restrict the display of external resources, including images. To allow an external image to display, you need to add its domain as a trusted site.
Steps to Add the Domain in CSP Trusted Sites
- Go to Setup → CSP Trusted Sites.
- Click on New Trusted Site.
- Enter the domain of the image URL (e.g.,
https://example.com). - Set the Context to Experience Builder Sites (this applies to Salesforce Communities).
- Save the changes.
Note: This will allow images from this domain to display in your community. If you have multiple external image sources, repeat the process for each domain.
2. Check the Image URL and Ensure It Uses HTTPS
Salesforce Communities require images to be loaded over HTTPS for security reasons. If the image URL is using HTTP, it will likely be blocked.
- Verify the URL: Make sure the image URL starts with
https://. If it does not, try using an HTTPS version of the link or upload the image to a secure server. - Replace HTTP with HTTPS: If your URL is accessible over HTTPS, updating it should resolve the issue.
3. Set Image Permissions to Publicly Accessible
If the image is hosted externally (e.g., on AWS S3, Google Drive, or a private server), ensure it has public access permissions. Images that require login or specific permissions may not display in Salesforce Communities.
- For AWS S3: Set the image’s access policy to public.
- For Google Drive: Use the shareable link option and ensure the link is accessible without login.
- For Other Servers: Make sure the images are accessible publicly without any authentication or restrictions.
4. Verify Caching and Refresh the Community
If you’ve recently made changes to the CSP settings or image permissions, Salesforce may be caching the old configuration.
- Clear Cache: Clear your browser cache or try accessing the community in an incognito/private window.
- Community Publish/Refresh: Go to Experience Builder, click Publish, and then refresh the page to ensure changes are applied.
5. Use an Image Hosting Service Compliant with Salesforce
If the above solutions don’t work, consider using an image hosting service that’s compliant with Salesforce, such as Salesforce CMS or Google Cloud CDN. Alternatively, you can upload images directly to Salesforce Files and use them in the community without CSP restrictions.
6. Debug with Browser Developer Tools
Open your browser’s developer tools (F12 or right-click → Inspect) and check the Console or Network tab for any errors related to the image. Common errors to look out for:
- CORS (Cross-Origin Resource Sharing): If you see CORS errors, the server hosting the image might need to allow cross-origin requests.
- Blocked by CSP: If you see a message that the image is blocked by CSP, ensure the domain is correctly added to CSP Trusted Sites in Salesforce.
Summary
Building secure app or community is very significant action, do it carefully under the supervision of a team who comes with experience in this domain, please reach out in case if any help on this matter.