生成式 UI 上线前：用 JSON Schema 限制组件、属性和事件-育师

生成式 UI 上线前：用 JSON Schema 限制组件、属性和事件

生成式 UI 返回的 Schema 就是不可信输入。组件、属性、事件和数据绑定都要过白名单与 JSON Schema；流式片段没闭合前不要急着渲染。

为什么生成式 UI 在生产环境容易崩盘

在传统的低代码平台中，UI 描述文件（Schema）是由拖拽编译器生成的，数据结构高度可控。但到了 Generative UI 场景，Schema 是由概率模型吐出来的。

这会带来三类工程风险。

第一，幻觉字段导致运行时崩溃。LLM 会随机篡改属性名，比如把props写成properties，或者把数字写成带有单位的字符串。

第二，流式片段不适合作为完整 Schema 逐次渲染。应在边界完整、校验通过后提交 UI，或使用明确的增量协议批量更新。

第三，动态组件注入带来的 XSS 安全风险。生成式 UI 如果允许直接渲染自定义 HTML 或执行内联脚本，一旦 Prompt 被恶意注入，攻击者就能轻松窃取 Cookie。

解决方案不能靠在 Prompt 里写“请务必返回合法 JSON”，而应在前端接入与部署拓扑中构建硬隔离规则。

Ajv 强校验与带防抖的 Vue3 动态 UI 渲染器

我们在上线前重构了渲染管道：所有 LLM 返回的数据应先经过 Ajv（JSON Schema 校验器），只有符合 Schema 定义的节点才能提交给 UI 渲染线程。同时引入防抖合并机制，避免流式响应造成的频繁重渲染。

下面是完整且可运行的 Vue3 动态生成式 UI 渲染器实现。

import { defineComponent, h, ref, watch, onUnmounted, type PropType, type VNode } from 'vue'; import Ajv, { type JSONSchemaType } from 'ajv'; // 定义标准的生成式组件 Schema 结构 export interface DynamicComponentNode { type: string; id: string; props?: Record<string, unknown>; children?: DynamicComponentNode[]; } const ajv = new Ajv({ coerceTypes: true, useDefaults: true }); // 严格的 JSON Schema 定义 const componentSchema: JSONSchemaType<DynamicComponentNode> = { type: 'object', properties: { type: { type: 'string' }, id: { type: 'string' }, props: { type: 'object', nullable: true, required: [] }, children: { type: 'array', items: { $ref: '#' }, nullable: true, }, }, required: ['type', 'id'], additionalProperties: false, }; const validateSchema = ajv.compile(componentSchema); export const GenerativeUIRenderer = defineComponent({ name: 'GenerativeUIRenderer', props: { rawStreamSchema: { type: String, required: true, }, componentRegistry: { type: Object as PropType<Record<string, ReturnType<typeof defineComponent> | string>>, required: true, }, debounceMs: { type: Number, default: 60, }, }, setup(props) { const validatedAST = ref<DynamicComponentNode | null>(null); const parseError = ref<string | null>(null); let debounceTimer: ReturnType<typeof setTimeout> | null = null; /** * 确定性校验与安全清洗引擎 */ const parseAndSanitize = (jsonText: string) => { try { const parsed = JSON.parse(jsonText); const valid = validateSchema(parsed); if (!valid) { console.warn('[Schema Security Alert] JSON 包含合法性缺陷:', validateSchema.errors); parseError.value = '组件 Schema 校验失败，无法渲染未知结构'; return; } parseError.value = null; validatedAST.value = parsed as DynamicComponentNode; } catch { // 捕获流式传输中尚未闭合的 JSON 语法异常，不做处理等待后续 Token } }; watch( () => props.rawStreamSchema, (newVal) => { if (debounceTimer) clearTimeout(debounceTimer); debounceTimer = setTimeout(() => { parseAndSanitize(newVal); }, props.debounceMs); }, { immediate: true } ); onUnmounted(() => { if (debounceTimer) clearTimeout(debounceTimer); }); /** * 递归将 Schema 映射为 Vue VNode 节点树 */ const renderNode = (node: DynamicComponentNode): VNode => { const TargetComponent = props.componentRegistry[node.type]; if (!TargetComponent) { return h('div', { class: 'ui-fallback-error' }, `不支持的组件类型：${node.type}`); } const childrenVNodes = node.children && Array.isArray(node.children) ? node.children.map((child) => renderNode(child)) : []; // 防范 XSS 注入：清除潜在的 dangerouslySetInnerHTML 属性 const safeProps = { ...(node.props || {}) }; delete safeProps.innerHTML; delete safeProps.dangerouslySetInnerHTML; safeProps.key = node.id; return h(TargetComponent, safeProps, () => childrenVNodes); }; return () => { if (parseError.value) { return h('div', { class: 'ui-fallback-error' }, parseError.value); } if (!validatedAST.value) { return h('div', { class: 'ui-loading' }, 'UI 构建中...'); } return renderNode(validatedAST.value); }; }, });