[FEATURE] show_widget: project-configurable fetch allowlist for custom API origins

Resolved 💬 0 comments Opened Jun 20, 2026 by mattijn Closed Jun 20, 2026

Summary

The show_widget iframe enforces a hardcoded CSP fetch allowlist (cdnjs.cloudflare.com, esm.sh, cdn.jsdelivr.net, unpkg.com, fonts.googleapis.com, fonts.gstatic.com). There is no way to add project-specific origins, which makes it impossible to use show_widget with npm packages that communicate with a custom backend API.

Concrete use case

chartout is an npm package (1.0.3) that renders a 3D product store widget. Its JS API:

import { createChartoutModel } from 'chartout';
import { mount } from 'chartout/mount';
import { openWithViz } from 'chartout/store';

const model = createChartoutModel({});
mount(document.getElementById('store'), { model });
await openWithViz(model, svgElement, 'Histogram');

The package loads fine from unpkg.com (on the allowlist). But at runtime it needs to:

  1. Fetch a product catalog from https://api.chartout.io/v1/products/
  2. Upload rasterised SVG textures via the same API

Both requests are silently blocked by the iframe CSP. The widget mounts but shows "Products unavailable" and cannot complete the image upload flow.

Proposed solution

Allow projects to declare trusted origins in .claude/settings.json or CLAUDE.md:

{
  "widget_allowed_origins": [
    "https://api.chartout.io"
  ]
}

The iframe CSP would then include these origins in its connect-src directive for that project only.

Why this matters

Any show_widget use case that combines an npm package with a project-specific backend hits this wall. The limitation makes it impossible to demonstrate or prototype real-world widgets that depend on a custom API — which is precisely the kind of interactive tooling show_widget was designed for.

View original on GitHub ↗