feat: introduce @microsoft/webui-framework#146
Conversation
Introduce @microsoft/webui-framework — a lightweight Web Component runtime that hydrates server-rendered HTML using compiled template metadata and direct DOM binding. No virtual DOM, no runtime template parsing, no JavaScript runtime required on the server. - WebUIElement base class with @observable, @attr, @volatile decorators - Single-pass SSR hydration that seeds component state inline from markers - Per-path targeted updates via a binding index (O(affected) not O(all)) - Template cloning cache for fast repeat instantiation (cloneNode not innerHTML) - Zero-allocation update path with pre-merged wildcard bindings - Event delegation (one listener per event type, not one closure per element) - Keyed and sequential repeat reconciliation for @for loops - Iterative condition AST evaluation for @if blocks (no recursion) - CSS module stylesheet cache via adoptedStyleSheets - Modular architecture: element.ts orchestrator + repeat, paths, conditions, seed, types, and styles modules with file-level documentation - Co-located unit tests (conditions, seed, types, template) and Playwright e2e fixtures covering hydration, reactivity, repeats, conditionals, events, refs, state seeding, CSS strategies, and performance benchmarks - Shared test infrastructure via @microsoft/webui-test-support (private) - HTML entity decoding in compiled text run static parts - Comprehensive README with architecture diagrams, performance philosophy, API reference, and contributor guidelines - Hydration docs, copilot instructions, and webui-dev skill updated
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| cursor = cursor[key] as Record<string, unknown>; | ||
| } | ||
|
|
||
| cursor[parts[parts.length - 1]] = value; |
Check warning
Code scanning / CodeQL
Prototype-polluting function Medium
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 21 days ago
In general, the fix is to prevent recursive assignment along property chains when any segment is a dangerous key such as __proto__, constructor, or prototype. This can be done by either: (1) only recursing when the destination already has that own property and is a plain object, or (2) explicitly rejecting/bypassing assignments to those names. Because this function’s purpose is to construct nested objects along an arbitrary path, enforcing “must be an own property already on the destination” would change semantics. The least invasive and most compatible fix is to block dangerous keys.
Concretely, in assignSeedPath in packages/webui-framework/src/element/repeat.ts, we should introduce a small helper or inline check that treats any path containing a forbidden segment as a no-op (or early return). That means: when iterating through parts to build the path, if any key is __proto__, constructor, or prototype, we immediately stop and return without writing to cursor. We should also apply that same check to the final property name (parts[parts.length - 1]) before performing cursor[...]=value. This guarantees that no matter what untrusted path string is used, we never assign to prototype-polluting properties, while preserving all existing behavior for safe keys. No new imports are needed; the logic is local to this function.
| @@ -176,9 +176,17 @@ | ||
|
|
||
| function assignSeedPath(target: Record<string, unknown>, path: string, value: unknown): void { | ||
| const parts = path.split('.'); | ||
|
|
||
| // Prevent prototype pollution via special property names in the path. | ||
| const forbiddenKeys = new Set(['__proto__', 'constructor', 'prototype']); | ||
|
|
||
| let cursor = target; | ||
| for (let index = 0; index < parts.length - 1; index += 1) { | ||
| const key = parts[index]; | ||
| if (forbiddenKeys.has(key)) { | ||
| // Abort if the path would write to a dangerous property. | ||
| return; | ||
| } | ||
| const next = cursor[key]; | ||
| if (next == null || Array.isArray(next) || typeof next !== 'object') { | ||
| cursor[key] = {}; | ||
| @@ -186,7 +191,12 @@ | ||
| cursor = cursor[key] as Record<string, unknown>; | ||
| } | ||
|
|
||
| cursor[parts[parts.length - 1]] = value; | ||
| const lastKey = parts[parts.length - 1]; | ||
| if (forbiddenKeys.has(lastKey)) { | ||
| return; | ||
| } | ||
|
|
||
| cursor[lastKey] = value; | ||
| } | ||
|
|
||
| function parentNode(node: Node): (ParentNode & Node) | null { |
| } | ||
|
|
||
| export function renderTemplateScript(name: string, meta: TemplateMeta): string { | ||
| return `<script>(function(){var w=window.__webui_templates||(window.__webui_templates={});w[${JSON.stringify(name)}]=${JSON.stringify(meta)};})();</script>`; |
Check warning
Code scanning / CodeQL
Improper code sanitization Medium
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 21 days ago
In general, when generating HTML that contains inline JavaScript, any dynamic data interpolated into that JavaScript must be encoded in a way that is safe both for the JavaScript string literal and for the surrounding HTML <script> context. JSON.stringify handles JavaScript string escaping but does not guard against </script> and some other characters that can terminate the script tag when interpreted by an HTML parser. The fix is to post-process the JSON.stringify output (and, for consistency, the meta JSON too) to escape “unsafe” characters (<, >, /, backslash, control characters, and \u2028, \u2029) as \uXXXX sequences, following the pattern in the background example.
Concretely, in packages/webui-test-support/src/register-template.ts, we should:
- Add a small
charMapandescapeUnsafeCharshelper nearrenderTemplateScript. It takes a string and replaces any of the problematic characters with their safe escape sequences. - Update
renderTemplateScriptto wrap the results ofJSON.stringify(name)andJSON.stringify(meta)withescapeUnsafeChars(...)before interpolation into the template literal. - Keep the function signature and overall behavior the same (still returns a
<script>...</script>string, still usesJSON.stringify), only making the output safer.
No new external libraries are needed; we can implement this with plain TypeScript/JavaScript utilities in the same file.
| @@ -357,6 +357,27 @@ | ||
| templates[name] = normalizeTemplateMeta(meta); | ||
| } | ||
|
|
||
| const __unsafeCharMap: Record<string, string> = { | ||
| '<': '\\u003C', | ||
| '>': '\\u003E', | ||
| '/': '\\u002F', | ||
| '\\': '\\\\', | ||
| '\b': '\\b', | ||
| '\f': '\\f', | ||
| '\n': '\\n', | ||
| '\r': '\\r', | ||
| '\t': '\\t', | ||
| '\0': '\\0', | ||
| '\u2028': '\\u2028', | ||
| '\u2029': '\\u2029', | ||
| }; | ||
|
|
||
| function escapeUnsafeChars(str: string): string { | ||
| return str.replace(/[<>/\\\b\f\n\r\t\0\u2028\u2029]/g, (ch) => __unsafeCharMap[ch] ?? ch); | ||
| } | ||
|
|
||
| export function renderTemplateScript(name: string, meta: TemplateMeta): string { | ||
| return `<script>(function(){var w=window.__webui_templates||(window.__webui_templates={});w[${JSON.stringify(name)}]=${JSON.stringify(meta)};})();</script>`; | ||
| const safeName = escapeUnsafeChars(JSON.stringify(name)); | ||
| const safeMeta = escapeUnsafeChars(JSON.stringify(meta)); | ||
| return `<script>(function(){var w=window.__webui_templates||(window.__webui_templates={});w[${safeName}]=${safeMeta};})();</script>`; | ||
| } |
| | { kind: 'repeat'; slot: ResolvedSlot; markerId: number; entry: [string, string, number] } | ||
| > = []; | ||
|
|
||
| for (const [index, [slotPath, parts]] of (meta.tx ?? []).entries()) { |
…tion or class' Co-authored-by: Copilot Autofix powered by AI <223894421+github-code-quality[bot]@users.noreply.github.com>
mohamedmansour
force-pushed
the
feat/webui-framework
branch
from
b7a93a7 to
0150c5b
Compare
Replace snapshot .count() with expect.poll() so the assertion retries until the product grid re-renders after client navigation. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
3 participants
Introduce
@microsoft/webui-framework, a lightweight Web Component runtimethat hydrates server-rendered HTML using compiled template metadata and
direct DOM binding. No virtual DOM, no runtime template parsing, no
JavaScript runtime required on the server.