feat(widget): safely render Markdown images for product photos and payment QR #9

Context

The current safe Markdown renderer in packages/dewee-webchat/src/widget/markdown.ts builds DOM nodes directly (no innerHTML), supporting text, links, tables, code blocks, etc., but does not parse the Markdown image syntax ![alt](url) into an actual image.

Verified on main at 42dfbc4628f45c2d006a2408a3b656a949680abb:

• INLINE_SRC recognizes [label](url) but has no image token; leading ! is treated as plain text.
• renderInline creates <a> elements for safe links but never <img>.
• packages/dewee-webchat/test/markdown.test.ts explicitly asserts that raw untrusted <img src=... onerror=...> must remain escaped. This is a security property to preserve, not a test to delete.
• packages/dewee-webchat/src/widget/styles.ts has no responsive Markdown image styles.

Why it matters

A Dewee sales agent using a Storefront MCP server should be able to show product images alongside names, prices, descriptions, and comparison tables. A Payment/SePay/VietQR MCP tool may return a payment QR image URL. Today, the chat can show image URLs as text/links but not render them natively in Markdown.

This issue covers safe Markdown image rendering (first usable step). Interactive product cards, product carousels, and a richer checkout/QR message component should be built later on a typed rich-message contract rather than embedding executable HTML in LLM output.

Requirements

1. Markdown image parsing and rendering

• Add support for ![alt text](https://example.com/product.jpg) and relevant safe relative URLs while preserving existing text/link syntax. Nested/escaped syntax should be handled deliberately and covered by tests.
• Create <img> DOM elements with document.createElement, assign src/text safely, and never use innerHTML or arbitrary HTML supplied by the model.
• Set alt, loading="lazy", decoding="async" and referrerPolicy="no-referrer"; avoid content jumping via sensible container sizing if feasible.
• Product and payment QR images must fit the chat bubble on mobile and desktop, retain correct aspect ratio, and not overflow horizontally.
• Broken/rejected images should fall back gracefully to alt text or a safe clickable link.

2. Image URL trust/privacy policy

• Images are fetched by the visitor's browser; untrusted remote images can track visitor IPs or send requests to unexpected origins. Do not reuse safeHref unmodified as the image policy.
• Reject unsafe schemes (javascript:, data:, blob:, file:, etc.), protocol-relative URLs, control/obfuscated schemes, and suspicious inputs. Support approved HTTPS origins and safe same-origin URLs.
• Provide a host-configurable image origin allowlist / opt-in for third-party images so a site's trusted Storefront CDN and payment-QR host can be explicitly approved; fail safely for unapproved sources.
• Never allow onerror/event handlers, inline SVG, arbitrary HTML attributes, or user-supplied script. Consider SVG file/image handling explicitly in the threat model.
• Apply the policy consistently to streamed replies, conversation history, inline widget mode, and floating mode.

3. Public API and styling

• Expose the required image-host configuration through the appropriate public widget options and wrappers (vanilla/script, React, Vue, Astro) without breaking existing options.
• Add styles in src/widget/styles.ts for responsive images, rounded corners, sensible max-size, and accessible alt/fallbacks.
• Document the Markdown syntax, security policy, and how to allow a Storefront CDN or VietQR image host in the package README.
• Keep the bundle lightweight and do not add a large Markdown/HTML framework just for images.

4. Tests / acceptance criteria

• Valid trusted ![Product](https://trusted-shop.example/photo.jpg) renders an <img> with correct alt/source and privacy attributes when the host is allowed.
• Valid QR image URL from an explicitly allowed payment origin displays without distortion.
• Plain links [text](url), autolinks, fenced/inline code, bold/italic, tables, and lists still render as before.
• An untrusted literal <img src=x onerror=...> remains escaped and never becomes an image.
• URLs with disallowed schemes, origins, malformed encoding, or injected attributes never lead to unsafe DOM nodes or outbound image fetches.
• Markdown image syntax inside code spans/fences stays literal.
• Failure/unavailable image has an accessible fallback; mobile widths do not overflow.
• Streaming / history rerenders have consistent behavior and do not duplicate nodes.
• pnpm test, pnpm typecheck, and pnpm build pass; add tests in packages/dewee-webchat/test/markdown.test.ts and a widget-level regression test where useful.

Implementation approach

1. Introduce a dedicated image token/parser branch that precedes link parsing, without sacrificing the renderer's current safe DOM construction.
2. Centralize URL validation and widget host policy rather than relying on regex alone; normalize URLs using URL and compare normalized origins against a site-owned allowlist.
3. Render with restricted attributes and CSS classes, then add coverage for adversarial inputs and view-mode parity.
4. Document approved CDN/QR host examples as configuration placeholders, not hard-coded trusted services.

Explicit non-goals for this issue

• No direct integration with Storefront MCP, SePay, or VietQR API in this repository.
• No order creation, payment verification, checkout state changes, or business logic in the renderer.
• No arbitrary HTML/JS execution or generalized remote content embed.
• Typed product_card, product_comparison, payment_qr/checkout components: propose separately once image support is stable.

References

• Markdown renderer
• Markdown security regression tests
• Widget styles
• Widget integration docs