MCP App CSP Explained: Why Your Widget Won't Render

The provided document offers an in-depth guide on how to manage Content Security Policy (CSP) for widgets or apps embedded within AI platforms like ChatGPT, Claude, and VS Code. Here are the key points summarized:

Understanding CSP in MCP Apps

1. Purpose of CSP: It's a security feature that restricts what external resources can be loaded by your widget to prevent Cross-Site Scripting (XSS) attacks.
2. Sandbox Restrictions: Besides CSP, other browser APIs like localStorage, eval(), and window.open() are restricted within sandboxed iframes.

Basic Concepts

1. CSP Source Directives:

   • connect-src: Specifies origins for network requests (e.g., API calls).
   • img-src / font-src / media-src: Specify sources for images, fonts, and media respectively.
   • frame-src: Allows embedding of external content like YouTube videos.

2. CSP Declaration in MCP Apps:

   • Use _meta.ui.csp to declare CSP rules.
   • Platforms may have different implementations (e.g., ChatGPT requires an additional openai/widgetCSP declaration).

Common

Read the full article at DEV Community

---

Want to create content about this topic? Use Nemati AI tools to generate articles, social posts, and more.