diff --git a/packages/core/src/studio-api/helpers/sourceMutation.test.ts b/packages/core/src/studio-api/helpers/sourceMutation.test.ts index 2b505d03e..f0f0e1465 100644 --- a/packages/core/src/studio-api/helpers/sourceMutation.test.ts +++ b/packages/core/src/studio-api/helpers/sourceMutation.test.ts @@ -146,4 +146,41 @@ describe("patchElementInHtml", () => { expect(result).toMatch(/padding:\s*16px/); }); + + it("rejects event handler attributes", () => { + const result = patchElementInHtml(FIXTURE, { id: "hero" }, [ + { type: "html-attribute", property: "onload", value: "fetch('/evil')" }, + ]); + + expect(result).not.toContain("onload"); + expect(result).not.toContain("fetch"); + }); + + it("rejects javascript: URLs in src", () => { + const result = patchElementInHtml(FIXTURE, { id: "hero" }, [ + { type: "html-attribute", property: "src", value: "javascript:alert(1)" }, + ]); + + expect(result).not.toContain("javascript:"); + }); + + it("allows aria-* and data-* attributes", () => { + const result = patchElementInHtml(FIXTURE, { id: "hero" }, [ + { type: "html-attribute", property: "aria-label", value: "greeting" }, + { type: "html-attribute", property: "data-custom", value: "test" }, + ]); + + expect(result).toContain('aria-label="greeting"'); + expect(result).toContain('data-custom="test"'); + }); + + it("rejects srcdoc and formaction attributes", () => { + const result = patchElementInHtml(FIXTURE, { id: "hero" }, [ + { type: "html-attribute", property: "srcdoc", value: "" }, + { type: "html-attribute", property: "formaction", value: "javascript:void(0)" }, + ]); + + expect(result).not.toContain("srcdoc"); + expect(result).not.toContain("formaction"); + }); }); diff --git a/packages/core/src/studio-api/helpers/sourceMutation.ts b/packages/core/src/studio-api/helpers/sourceMutation.ts index 80b65558b..c266e6b17 100644 --- a/packages/core/src/studio-api/helpers/sourceMutation.ts +++ b/packages/core/src/studio-api/helpers/sourceMutation.ts @@ -66,6 +66,53 @@ export interface PatchOperation { value: string | null; } +const ALLOWED_HTML_ATTRS = new Set([ + "id", + "class", + "style", + "title", + "lang", + "dir", + "hidden", + "tabindex", + "role", + "slot", + "translate", + "draggable", + "contenteditable", + "width", + "height", + "src", + "alt", + "loading", + "decoding", + "crossorigin", + "preload", + "autoplay", + "loop", + "muted", + "controls", + "poster", + "playsinline", +]); + +function isAllowedHtmlAttribute(name: string): boolean { + const lower = name.toLowerCase(); + if (ALLOWED_HTML_ATTRS.has(lower)) return true; + if (lower.startsWith("data-")) return true; + if (lower.startsWith("aria-")) return true; + return false; +} + +function isSafeAttributeValue(name: string, value: string): boolean { + const lower = name.toLowerCase(); + if (lower === "src" || lower === "href" || lower === "action" || lower === "formaction") { + const trimmed = value.trim().toLowerCase(); + if (trimmed.startsWith("javascript:") || trimmed.startsWith("vbscript:")) return false; + } + return true; +} + export function patchElementInHtml( source: string, target: SourceMutationTarget, @@ -93,7 +140,9 @@ export function patchElementInHtml( } break; case "html-attribute": + if (!isAllowedHtmlAttribute(op.property)) break; if (op.value != null) { + if (!isSafeAttributeValue(op.property, op.value)) break; htmlEl.setAttribute(op.property, op.value); } else { htmlEl.removeAttribute(op.property);