
Generating Ui Bundle Metadata
Generate Salesforce CSP Trusted Site metadata XML so Lightning and Experience Cloud pages can load images, fonts, and APIs from external HTTPS origins without browser blocks.
Install
npx skills add https://github.com/forcedotcom/sf-skills --skill generating-ui-bundle-metadataWhat is this skill?
- Documents exact path force-app/main/default/cspTrustedSites/{Name}.cspTrustedSite-meta.xml
- PascalCase_with_underscores file naming aligned to fullName with provider and resource type
- XML template for endpointUrl, context All, isActive, and per-directive isApplicableTo* flags
- Naming rules: org-unique names up to 80 characters with concrete domain examples
Adoption & trust: 674 installs on skills.sh; 513 GitHub stars; 3/3 security scanners passed (skills.sh audits).
Recommended Skills
Frontend Designanthropics/skills
Vercel React Best Practicesvercel-labs/agent-skills
Remotion Best Practicesremotion-dev/skills
Vercel Composition Patternsvercel-labs/agent-skills
Develop Userscriptsxixu-me/skills
Next Best Practicesvercel-labs/next-skills
Journey fit
Primary fit
External domains are wired into the org during product build when LWC or Aura needs third-party assets or connect-src APIs. CSP trusted sites are Salesforce platform integration metadata, not generic frontend scaffolding.
Common Questions / FAQ
Is Generating Ui Bundle Metadata safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.
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 |