modelcontextprotocol / modelcontextprotocol/ext-apps
Support `frameDomains` → `frame-src` CSP Mapping for External Iframe Embeds
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.9k
- Forks
- 387
- Avg merge
- 3h 21m
- Merged PRs (30d)
- 6
Description
Problem
MCP Apps currently support connectDomains (→ connect-src) and resourceDomains (→ img-src, font-src, media-src) in _meta.ui.csp, but there's no way to allow external iframes. The host always applies:
frame-src 'self' blob: data:
This blocks legitimate use cases like embedding YouTube videos, Twitter/X posts, LinkedIn posts, or other third-party widgets inside an MCP App.
Evidence
Console logs from the Claude host:
[Host] Extracting metadata from _meta.ui.csp: connectDomains, resourceDomains
[Host] Applied CSP: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' blob: data: https://...; connect-src 'self' https://...; frame-src 'self' blob: data:; ...
The host reads connectDomains and resourceDomains but ignores frameDomains. Attempting to embed an iframe results in:
Refused to frame 'https://www.linkedin.com/' because it violates the following Content Security Policy directive: "frame-src 'self' blob: data:".
Proposed Solution
Add support for frameDomains in _meta.ui.csp that maps to frame-src:
_meta: {
ui: {
csp: {
connectDomains: ['https://api.example.com'],
resourceDomains: ['https://cdn.example.com'],
frameDomains: ['https://www.youtube.com', 'https://platform.twitter.com', 'https://www.linkedin.com']
}
}
}
Host would generate:
frame-src 'self' blob: data: https://www.youtube.com https://platform.twitter.com https://www.linkedin.com
Use Cases
- Embedding YouTube/Vimeo videos in educational or briefing apps
- Embedding Twitter/X posts for social content curation
- Embedding LinkedIn posts in professional content apps
- Embedding Substack articles or other newsletter content
- Any app that aggregates third-party embeddable content
Environment
- Claude Desktop (macOS)
- MCP Apps SDK with TypeScript backend
- Widgets using React with official embed URLs
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by tracing how _meta.ui.csp is represented and how connectDomains and resourceDomains are mapped into the host's CSP. Check the relevant TypeScript SDK or specification entry points and existing tests, if present. Done means frameDomains is accepted and external iframe origins appear in frame-src without changing the existing defaults.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, security
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100