Generating Ui Bundle Metadata
Generate Salesforce CSP Trusted Site metadata XML so Lightning UI bundle apps can load external HTTPS fonts, images, APIs, and tiles without hand-writing cspTrustedSite-meta.xml files.
Overview
Generating UI Bundle Metadata is an agent skill for the Build phase that produces Salesforce CSP Trusted Site metadata XML under cspTrustedSites for UI bundle external origins.
Install
npx skills add https://github.com/forcedotcom/afv-library --skill generating-ui-bundle-metadataWhat is this skill?
- Documents force-app/main/default/cspTrustedSites/{Name}.cspTrustedSite-meta.xml placement
- PascalCase_with_underscores file naming aligned to fullName (max 80 characters, org-unique)
- Full CspTrustedSite XML template with endpointUrl, context, and per-directive flags (connectSrc, fontSrc, imgSrc, mediaS
- Example rows for Unsplash images, Open-Meteo API, and OpenStreetMap tiles
- Naming guidance ties provider plus resource type (e.g. Google_Fonts_Static)
- Maximum 80 characters for trusted site fullName
- Example domains documented for 3 providers (Unsplash, Open-Meteo, OpenStreetMap)
Adoption & trust: 1.3k installs on skills.sh; 513 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your Salesforce UI bundle loads external HTTPS assets or APIs but the org blocks them because no cspTrustedSite-meta.xml exists with correct directive flags.
Who is it for?
Salesforce UI bundle apps integrating third-party CDNs, REST APIs, map tiles, or video hosts on Agentforce/Experience-style stacks.
Skip if: Non-Salesforce projects, Apex-only backends without UI CSP needs, or secrets management (this skill only declares trusted origins).
When should I use this skill?
Project needs Salesforce CSP Trusted Site metadata XML for external HTTPS origins used by a UI bundle.
What do I get? / Deliverables
You get deploy-ready CspTrustedSite XML files with consistent naming and the right connect/font/img/media/style permissions for each origin.
- cspTrustedSite-meta.xml per external origin
- Named fullName aligned to file name
Recommended Skills
Journey fit
Build is where Salesforce UI bundle apps wire third-party origins into org security policy before deploy. Integrations is the right shelf because CSP trusted sites are cross-origin integration contracts, not generic page layout.
How it compares
Use instead of manual Setup UI clicks or guessed XML when you need version-controlled CSP metadata beside uiBundles source.
Common Questions / FAQ
Who is generating-ui-bundle-metadata for?
Solo builders and small teams deploying Salesforce UI bundles who need CSP trusted site XML checked into force-app/main/default.
When should I use generating-ui-bundle-metadata?
During Build/integrations when you add a new external domain for images, fonts, fetch APIs, map tiles, or media in a uiBundles app before you deploy or test in the org.
Is generating-ui-bundle-metadata safe to install?
It documents org-wide CSP allowlists—review the Security Audits panel on this Prism page and limit endpointUrl entries to origins you trust.
Workflow Chain
Then invoke: generating ui bundle features
SKILL.md
READMESKILL.md - Generating Ui Bundle Metadata
# CSP Trusted Site Metadata — Implementation Guide ## File location ``` force-app/main/default/cspTrustedSites/{Name}.cspTrustedSite-meta.xml ``` The `cspTrustedSites/` directory must be a direct child of `force-app/main/default/`. Create it if it does not exist. --- ## File naming convention The file name must match the `<fullName>` value inside the XML, with `.cspTrustedSite-meta.xml` appended. | Domain | fullName | File name | |--------|----------|-----------| | `https://images.unsplash.com` | `Unsplash_Images` | `Unsplash_Images.cspTrustedSite-meta.xml` | | `https://api.open-meteo.com` | `Open_Meteo_API` | `Open_Meteo_API.cspTrustedSite-meta.xml` | | `https://tile.openstreetmap.org` | `OpenStreetMap_Tiles` | `OpenStreetMap_Tiles.cspTrustedSite-meta.xml` | **Naming rules:** - Use PascalCase with underscores separating words (e.g. `Google_Fonts_Static`) - Name should describe the provider and resource type (e.g. `Pexels_Videos`, not just `Pexels`) - Must be unique across the org - Maximum 80 characters --- ## XML template ```xml <?xml version="1.0" encoding="UTF-8" ?> <CspTrustedSite xmlns="http://soap.sforce.com/2006/04/metadata"> <fullName>{UNIQUE_NAME}</fullName> <description>{DESCRIPTION}</description> <endpointUrl>{HTTPS_ORIGIN}</endpointUrl> <isActive>true</isActive> <context>All</context> <isApplicableToConnectSrc>{true|false}</isApplicableToConnectSrc> <isApplicableToFontSrc>{true|false}</isApplicableToFontSrc> <isApplicableToFrameSrc>{true|false}</isApplicableToFrameSrc> <isApplicableToImgSrc>{true|false}</isApplicableToImgSrc> <isApplicableToMediaSrc>{true|false}</isApplicableToMediaSrc> <isApplicableToStyleSrc>{true|false}</isApplicableToStyleSrc> </CspTrustedSite> ``` --- ## Field reference | Field | Required | Description | |-------|----------|-------------| | `fullName` | Yes | Unique API name. Must match the file name (before `.cspTrustedSite-meta.xml`). | | `description` | Yes | Human-readable purpose. Start with "Allow access to..." | | `endpointUrl` | Yes | The external origin (scheme + host). Must start with `https://`. No trailing slash. No path. | | `isActive` | Yes | Always `true` for new entries. Set `false` to disable without deleting. | | `context` | Yes | `All` (applies to all contexts). Other values: `LEX` (Lightning Experience only), `Communities` (Experience Cloud only), `VisualForce`. Use `All` unless there is a specific reason to restrict. | | `isApplicableToConnectSrc` | Yes | `true` if the domain is called via `fetch()`, `XMLHttpRequest`, or WebSocket. | | `isApplicableToFontSrc` | Yes | `true` if the domain serves font files (`.woff`, `.woff2`, `.ttf`, `.otf`). | | `isApplicableToFrameSrc` | Yes | `true` if the domain is loaded in an `<iframe>` or `<object>`. | | `isApplicableToImgSrc` | Yes | `true` if the domain serves images (`<img>`, CSS `background-image`, `<svg>`). | | `isApplicableToMediaSrc` | Yes | `true` if the domain serves audio or video (`<audio>`, `<video>`). | | `isApplicableToStyleSrc` | Yes | `true` if the domain serves CSS stylesheets (`<link rel="stylesheet">`). | **Reference:** [CspTrustedSite — Salesforce Object Reference](https://developer.salesforce.com/docs/atlas.en-us.object_reference.meta/object_reference/sforce_api_objects_csptrustedsite.htm) --- ## CSP directive mapping | CSP header directive | Metadata field | What it allows | |---------------------|----------------|----------------| | `connect-src` | `isApplicableToConnectSrc` | `fetch()`, `XMLHttpRequest`, WebSocket, `EventSource` | | `font-src` | `isApplicableToFontSrc` | `@font-face` sources | | `frame-src` | `isApplicableToFrameSrc` | `<iframe>`, `<frame>`, `<object>`, `<embed>` | | `img-src` | `isApplicableToImgSrc` | `<img>`, `background-image`, `favicon`, `<picture>` | | `media-src` | `isApplicableToMediaSrc` | `<audio>`, `<video>`, `<source>`, `<track>` | | `style-src` | `isApplicableToStyleSrc` | `<link rel="stylesheet">`, `@import` in CSS |