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>
3.6 KiB
3.6 KiB
| name | description |
|---|---|
| configuring-webapp-csp-trusted-sites | 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
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/..." />— stylesheetsurl="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.comhttps://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:
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
- Confirm the file is valid XML and matches the expected schema.
- Confirm the file is placed in
force-app/main/default/cspTrustedSites/. - Confirm only the necessary
isApplicableTo*Srcfields are set totrue. - Run from the web app directory:
cd force-app/main/default/webapplications/<appName> && npm run lint && npm run build
- Lint: MUST result in 0 errors.
- Build: MUST succeed.