mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-08-05 23:41:31 +08:00
9ba064174a
* feat: removing old webapp skills * feat: adding sync of skills from webapps to afv * feat: adding the first iteration of skills * feat: pin template deps to latest npm versions and flatten skill folders - Add pin-template-deps.js to resolve "*" deps to exact npm versions - Integrate pinning into sync-template-skills npm script - Remove check-template-skills-versions.js (no longer needed) - Simplify workflow to single sync step - Flatten skill output: one folder per skill with cleaned names Made-with: Cursor * fix: resolve skill validation errors - Move .template-versions.json from skills/ to root - Shorten skill names to meet 64-char limit: - salesforce-webapp-feature-micro-frontend-generating-micro-frontend-lwc → salesforce-webapp-micro-frontend-lwc - salesforce-webapp-feature-react-agentforce-conversation-client-integrating-agentforce-conversation-client → salesforce-webapp-agentforce-conversation-client - salesforce-webapp-feature-react-file-upload-implementing-file-upload → salesforce-webapp-react-file-upload - Expand descriptions to meet 20-word minimum with trigger context * Add webapp skills from template, sync script updates - Rename skill folders from salesforce-webapp-* to *-webapp-* convention - Update sync-template-skills.js: set SKILL.md front matter name to dest folder - Remove sync-template-skills workflow and pin-template-deps script - Add .synced-template-skills.json manifest, deploying-webapp-to-salesforce skill - Replace salesforce-webapp-designing-webapp-ui-ux with designing-webapp-ui-ux Made-with: Cursor * Align SKILL.md front matter name with folder for all webapp skills Made-with: Cursor * Fix skill validation: description length and trigger context for configuring-webapp-metadata, creating-webapp Made-with: Cursor * Rename sync script to sync-webapp-skills, drop manifest file - Rename sync-template-skills.js to sync-webapp-skills.js - Update package.json script to sync-webapp-skills - Remove .synced-template-skills.json creation and add to .gitignore Made-with: Cursor * Revert sync-react-b2e-sample and sync-react-b2x-sample to upstream version Made-with: Cursor * Sync script: pin b2e and b2x to latest, sync skills from template - Pin both template packages to latest in sync-webapp-skills.js - Update package.json / package-lock.json (b2x 1.109.0) - Sync skills: managing-webapp-agentforce-conversation-client, bar-line-chart, remove building-webapp-analytics-charts and integrating-webapp-agentforce-conversation-client - Minor skill content updates Made-with: Cursor * Remove interactive map, weather widget, and Unsplash skills (no longer in template) Made-with: Cursor --------- Co-authored-by: Hemant Singh Bisht <hsinghbisht@salesforce.com>
91 lines
3.6 KiB
Markdown
91 lines
3.6 KiB
Markdown
---
|
|
name: configuring-webapp-csp-trusted-sites
|
|
description: Creates Salesforce CSP Trusted Site metadata when adding external domains. Use when the user adds an external API, CDN, image host, font provider, map tile server, or any third-party URL that the web application needs to load resources from — or when a browser console shows a CSP violation error.
|
|
---
|
|
|
|
# CSP Trusted Sites
|
|
|
|
## When to Use
|
|
|
|
Use this skill whenever the application references a new external domain that is not already registered as a CSP Trusted Site. This includes:
|
|
|
|
- Adding images from a new CDN (Unsplash, Pexels, Cloudinary, etc.)
|
|
- Loading fonts from an external provider (Google Fonts, Adobe Fonts)
|
|
- Calling a third-party API (Open-Meteo, Nominatim, Mapbox, etc.)
|
|
- Loading map tiles from a tile server (OpenStreetMap, Mapbox)
|
|
- Embedding iframes from external services (YouTube, Vimeo)
|
|
- Loading external stylesheets or scripts
|
|
|
|
Salesforce enforces Content Security Policy (CSP) headers on all web applications. Any external domain not registered as a CSP Trusted Site will be blocked by the browser, causing images to not load, API calls to fail, or fonts to be missing.
|
|
|
|
**Reference:** [Salesforce CspTrustedSite Object Reference](https://developer.salesforce.com/docs/atlas.en-us.object_reference.meta/object_reference/sforce_api_objects_csptrustedsite.htm)
|
|
|
|
---
|
|
|
|
## Step 1 — Identify external domains
|
|
|
|
Scan the code for any URLs pointing to external domains. Common patterns:
|
|
|
|
- `fetch("https://api.example.com/...")` — API calls
|
|
- `<img src="https://images.example.com/..." />` — images
|
|
- `<link href="https://fonts.example.com/..." />` — stylesheets
|
|
- `url="https://tiles.example.com/{z}/{x}/{y}.png"` — map tiles
|
|
- `@import url("https://cdn.example.com/...")` — CSS imports
|
|
|
|
Extract the **origin** (scheme + host) from each URL. For example:
|
|
- `https://api.open-meteo.com/v1/forecast?lat=...` → `https://api.open-meteo.com`
|
|
- `https://images.unsplash.com/photo-123?w=800` → `https://images.unsplash.com`
|
|
|
|
---
|
|
|
|
## Step 2 — Check existing CSP Trusted Sites
|
|
|
|
Before creating a new file, check if the domain already has a CSP Trusted Site:
|
|
|
|
```bash
|
|
ls force-app/main/default/cspTrustedSites/
|
|
```
|
|
|
|
If the domain is already registered, no action is needed.
|
|
|
|
---
|
|
|
|
## Step 3 — Determine the CSP directive(s)
|
|
|
|
Map the resource type to the correct CSP `isApplicableTo*Src` fields. Read `implementation/metadata-format.md` for the full reference.
|
|
|
|
Quick reference:
|
|
|
|
| Resource type | CSP directive field(s) to set `true` |
|
|
|--------------|--------------------------------------|
|
|
| Images (img, background-image) | `isApplicableToImgSrc` |
|
|
| API calls (fetch, XMLHttpRequest) | `isApplicableToConnectSrc` |
|
|
| Fonts (.woff, .woff2, .ttf) | `isApplicableToFontSrc` |
|
|
| Stylesheets (CSS) | `isApplicableToStyleSrc` |
|
|
| Video / audio | `isApplicableToMediaSrc` |
|
|
| Iframes | `isApplicableToFrameSrc` |
|
|
|
|
**Always also set `isApplicableToConnectSrc` to `true`** — most resources also require connect-src for preflight/redirect handling.
|
|
|
|
---
|
|
|
|
## Step 4 — Create the metadata file
|
|
|
|
Read `implementation/metadata-format.md` and follow the instructions to create the `.cspTrustedSite-meta.xml` file.
|
|
|
|
---
|
|
|
|
## Step 5 — Verify
|
|
|
|
1. Confirm the file is valid XML and matches the expected schema.
|
|
2. Confirm the file is placed in `force-app/main/default/cspTrustedSites/`.
|
|
3. Confirm only the necessary `isApplicableTo*Src` fields are set to `true`.
|
|
4. Run from the web app directory:
|
|
|
|
```bash
|
|
cd force-app/main/default/webapplications/<appName> && npm run lint && npm run build
|
|
```
|
|
|
|
- **Lint:** MUST result in 0 errors.
|
|
- **Build:** MUST succeed.
|