feat(caplet-sandbox-prototype): Sandboxed iframe caplet UI prototype

[sirtimid]

Summary

Proof-of-concept prototype for caplet UIs running in sandboxed iframes with Preact. This explores an architecture where:

• Host manages caplet backends (state + method handlers) and routes messages by capletId
• Caplets run in sandboxed iframes, communicate via postMessage to window.top
• Widgets can be nested in caplets via <Slot> component, each with their own backend

Key components:

• CapletManager - Host-side message router for multiple caplets/widgets
• CapletBridge - Iframe-side communication bridge
• Slot - Component for embedding nested widget iframes
• SDK hooks (useBackendState, useBackendMethods) - React-style state subscription

To try it:

yarn workspace @ocap/caplet-sandbox-prototype dev

Security notes (prototype limitations):

• Uses allow-same-origin sandbox attribute (required for Vite dev server)
• Uses wildcard * for postMessage origin
• No origin validation on incoming messages

These would need to be addressed for production (cross-origin serving, explicit origins, etc.)

Test plan

• Manual testing: main caplet counter/items work
• Manual testing: nested Color Widget renders and updates host state
• Lint passes

🤖 Generated with Claude Code

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@​preact/​preset-vite@​2.10.3
	preact@​10.28.3

View full report

[socket-security]

Caution

MetaMask internal reviewing guidelines:

• Do not ignore-all
• Each alert has instructions on how to review if you don't know what it means. If lost, ask your Security Liaison or the supply-chain group
• Copy-paste ignore lines for specific packages or a group of one kind with a note on what research you did to deem it safe.
  @SocketSecurity ignore npm/PACKAGE@VERSION

Action	Severity	Alert  (click "▶" to expand/collapse)
Block		Network access: npm source-map in module globalThis["fetch"] Module: globalThis["fetch"] Location: Package overview From: ? → npm/@preact/preset-vite@2.10.3 → npm/source-map@0.7.6 ℹ Read more on: This package | This alert | What is network access? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Packages should remove all network access that is functionally unnecessary. Consumers should audit network access to ensure legitimate use. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/source-map@0.7.6. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Block		Network access: npm vite-prerender-plugin in module globalThis["fetch"] Module: globalThis["fetch"] Location: Package overview From: ? → npm/@preact/preset-vite@2.10.3 → npm/vite-prerender-plugin@0.5.12 ℹ Read more on: This package | This alert | What is network access? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Packages should remove all network access that is functionally unnecessary. Consumers should audit network access to ensure legitimate use. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/vite-prerender-plugin@0.5.12. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		Potential code anomaly (AI signal): npm @babel/core is 100.0% likely to have a medium risk anomaly Notes: The examined code is a standard, benign helper for constructing and wrapping configuration items from descriptors within Babel’s tooling. There is no evidence of data leakage, exfiltration, backdoors, or other malicious activity in this fragment. The combination of immutability, brand-based identity, and non-enumerable descriptor storage indicates a well-scoped internal utility rather than anything suspicious. Confidence: 1.00 Severity: 0.60 From: ? → npm/@vitejs/plugin-react@5.1.2 → npm/@metamask/snaps-utils@11.7.1 → npm/@preact/preset-vite@2.10.3 → npm/@babel/core@7.29.0 ℹ Read more on: This package | This alert | What is an AI-detected potential code anomaly? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: An AI system found a low-risk anomaly in this package. It may still be fine to use, but you should check that it is safe before proceeding. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/@babel/core@7.29.0. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report