Hardening pass: input validation, origin checks, and default-safe field behaviour — main (v3-alpha)

.github/workflows/trigger-gitlab-pipeline.yml

@@ -16,10 +16,15 @@ jobs:
 
     steps:
       - name: Print Configs
+        env:
+          HEAD_REF: ${{ github.head_ref }}
+          REF_NAME: ${{ github.ref_name }}
+          PR_TITLE: ${{ github.event.pull_request.title }}
+          HEAD_COMMIT_MSG: ${{ github.event.head_commit.message }}
         run: |
-          [[ $GITHUB_EVENT_NAME = "pull_request" ]] && BRANCH_NAME="${{ github.head_ref }}" || BRANCH_NAME="${{ github.ref_name }}"
+          [[ $GITHUB_EVENT_NAME = "pull_request" ]] && BRANCH_NAME="$HEAD_REF" || BRANCH_NAME="$REF_NAME"
 
-          [[ $GITHUB_EVENT_NAME = "pull_request" ]] && COMMIT_MSG="${{ github.event.pull_request.title }}" || COMMIT_MSG=$(echo -e "${{ github.event.head_commit.message }}" | head -n 1)
+          [[ $GITHUB_EVENT_NAME = "pull_request" ]] && COMMIT_MSG="$PR_TITLE" || COMMIT_MSG=$(printf '%s\n' "$HEAD_COMMIT_MSG" | awk 'NR>1{exit};1')
 
           PIPELINE_PROJECT_URL="github.com/$GITHUB_REPOSITORY.git"
 

docker-compose.yml

@@ -1,6 +1,7 @@
 services:
     playwright-tests:
         build: .
-        network_mode: "host"
+        ports:
+            - "127.0.0.1:3010:3010"
         extra_hosts:
             - "host.docker.internal:host-gateway"

e2e/nextjs-app/app/components/fields/file-upload/thumbnail.e2e.tsx

@@ -15,6 +15,10 @@ const SCHEMA: IFrontendEngineData = {
 						type: "base64",
 						url: "/api/upload",
 					},
+					// this demo prefills a file via uploadResponse only (no dataURL/fileUrl); since
+					// asgard-0014, that metadata is untrusted by default and the file is rejected as
+					// unverified unless the schema explicitly opts in
+					trustProvidedFileMetadata: true,
 				},
 			},
 		},

jest/jest.config.js

@@ -25,7 +25,11 @@ module.exports = async () => ({
 	],
 	verbose: true,
 	bail: false,
-	transformIgnorePatterns: ["/node_modules/(?!@lifesg/react-design-system|leaflet)"],
+	// sanitize-html >=2.15 pulls in htmlparser2 v12+, which is ESM-only (and its own
+	// deps domhandler/domutils/domelementtype/entities), so it needs to go through babel too
+	transformIgnorePatterns: [
+		"/node_modules/(?!@lifesg/react-design-system|leaflet|sanitize-html|htmlparser2|dom-serializer|domhandler|domutils|domelementtype|entities)",
+	],
 	transform: {
 		"\\.[jt]sx?$": ["babel-jest", { excludeJestPreset: true }],
 		"^.+\\.css$": "jest-transform-css",

package.json

@@ -55,7 +55,7 @@
 		"react-dropzone": "^14.2.3",
 		"react-hook-form": "7.54.2",
 		"react-infinite-scroll-hook": "^4.1.1",
-		"sanitize-html": "^2.8.1",
+		"sanitize-html": "^2.17.7",
 		"use-deep-compare-effect": "^1.8.1",
 		"yup": "^0.32.11"
 	},

src/__tests__/components/custom/filter/filter-checkbox.spec.tsx

@@ -85,6 +85,15 @@ describe(REFERENCE_KEY, () => {
 		expect(SUBMIT_FN).toHaveBeenCalledWith(expect.objectContaining({ [COMPONENT_ID]: defaultValues }));
 	});
 
+	it("should strip event handler attributes from option labels", () => {
+		renderComponent({
+			options: [{ label: '<span onclick="window.xssFired=true">Apple label</span>', value: "Apple" }],
+		});
+
+		const spanElement = screen.getByText("Apple label");
+		expect(spanElement).not.toHaveAttribute("onclick");
+	});
+
 	it("should be able to render hint", () => {
 		renderComponent({
 			label: {

src/__tests__/components/custom/iframe/iframe.spec.tsx

@@ -130,6 +130,71 @@ describe("iframe", () => {
 		expect(SUBMIT_FN).toHaveBeenCalledWith(expect.objectContaining({ [COMPONENT_ID]: "hello world" }));
 	});
 
+	describe("postMessage origin validation", () => {
+		const sendPostMessageFromOrigin = (origin: string, type: EPostMessageEvent, payload?: unknown) => {
+			fireEvent(window, new MessageEvent("message", { data: { type, payload }, origin }));
+		};
+
+		it("should ignore a setValue postMessage from an origin that does not match src", async () => {
+			renderComponent({ validationTimeout: -1 });
+
+			sendPostMessageFromOrigin("https://attacker.example", EPostMessageEvent.SET_VALUE, "hello world");
+			await waitFor(() => fireEvent.click(getSubmitButton()));
+
+			expect(SUBMIT_FN).toHaveBeenCalledWith({});
+		});
+
+		it("should accept a setValue postMessage from the origin matching src", async () => {
+			renderComponent({ validationTimeout: -1 });
+
+			sendPostMessageFromOrigin(IFRAME_SRC, EPostMessageEvent.SET_VALUE, "hello world");
+			await waitFor(() => fireEvent.click(getSubmitButton()));
+
+			expect(SUBMIT_FN).toHaveBeenCalledWith(expect.objectContaining({ [COMPONENT_ID]: "hello world" }));
+		});
+
+		it("should derive the origin for a relative src (resolved against the current page) and still ignore mismatched origins", async () => {
+			// new URL("/embedded/form") with no base throws; resolving against window.location.href
+			// (http://localhost/ in this test environment) must derive "http://localhost", not fail open
+			renderComponent({ src: "/embedded/form", validationTimeout: -1 });
+
+			sendPostMessageFromOrigin("https://attacker.example", EPostMessageEvent.SET_VALUE, "hello world");
+			await waitFor(() => fireEvent.click(getSubmitButton()));
+
+			expect(SUBMIT_FN).toHaveBeenCalledWith({});
+		});
+
+		it("should accept a setValue postMessage matching the origin derived from a relative src", async () => {
+			renderComponent({ src: "/embedded/form", validationTimeout: -1 });
+
+			sendPostMessageFromOrigin("http://localhost", EPostMessageEvent.SET_VALUE, "hello world");
+			await waitFor(() => fireEvent.click(getSubmitButton()));
+
+			expect(SUBMIT_FN).toHaveBeenCalledWith(expect.objectContaining({ [COMPONENT_ID]: "hello world" }));
+		});
+
+		it("should derive the origin for a protocol-relative src and still ignore mismatched origins", async () => {
+			renderComponent({ src: "//localhost/embedded/form", validationTimeout: -1 });
+
+			sendPostMessageFromOrigin("https://attacker.example", EPostMessageEvent.SET_VALUE, "hello world");
+			await waitFor(() => fireEvent.click(getSubmitButton()));
+
+			expect(SUBMIT_FN).toHaveBeenCalledWith({});
+		});
+
+		it("should reject every postMessage (fail closed) when src cannot be resolved to a valid http(s) origin", async () => {
+			// a non-http(s) scheme parses fine as a URL but must not be trusted as a postMessage origin —
+			// and critically, when no valid origin can be established, messages must be rejected by
+			// default, not accepted by default
+			renderComponent({ src: "javascript:alert(1)", validationTimeout: -1 });
+
+			sendPostMessageFromOrigin("https://attacker.example", EPostMessageEvent.SET_VALUE, "hello world");
+			await waitFor(() => fireEvent.click(getSubmitButton()));
+
+			expect(SUBMIT_FN).toHaveBeenCalledWith({});
+		});
+	});
+
 	describe("load", () => {
 		it("should fire a loading event when iframe starts loading", () => {
 			const testFn = jest.fn();

src/__tests__/components/elements/popover/popover.spec.tsx

@@ -69,6 +69,18 @@ describe(UI_TYPE, () => {
 		expect(screen.queryByTestId("popover").innerHTML.includes("script")).toBe(false);
 	});
 
+	it("should strip event handler attributes from an otherwise-allowed image tag in the hint", () => {
+		renderComponent({
+			hint: { content: '<img src="x" onerror="window.xssFired=true" alt=\'broken image\'>' },
+		});
+
+		fireEvent.click(screen.getByTestId("field__popover"));
+
+		const imgElement = screen.getByAltText("broken image");
+		expect(imgElement).toBeInTheDocument();
+		expect(imgElement).not.toHaveAttribute("onerror");
+	});
+
 	it("should render icon after text if specified", async () => {
 		renderComponent({ icon: "AlbumFillIcon" });
 

src/__tests__/components/elements/typography/typography.spec.tsx

@@ -109,6 +109,18 @@ describe(UI_TYPE, () => {
 		expect(screen.getByText("This is a HTML string")).toBeInTheDocument();
 	});
 
+	it("should strip event handler attributes from an otherwise-allowed image tag", () => {
+		renderComponent({
+			className: "text-element",
+			children: '<img src="x" onerror="window.xssFired=true" alt=\'broken image\'>',
+		});
+
+		const imgElement = screen.getByAltText("broken image");
+		expect(imgElement).toBeInTheDocument();
+		expect(imgElement).not.toHaveAttribute("onerror");
+		expect(document.querySelector(".text-element").innerHTML).not.toContain("onerror");
+	});
+
 	it("should be able to sanitize HTML string", () => {
 		renderComponent({
 			className: "text-element",

src/__tests__/components/fields/button/button.spec.tsx

@@ -125,9 +125,11 @@ describe("button", () => {
 		});
 
 		it.each`
-			scenario                                           | href
-			${"should not navigate when href is not provided"} | ${undefined}
-			${"should not navigate when href is invalid"}      | ${"invalid-url"}
+			scenario                                                   | href
+			${"should not navigate when href is not provided"}         | ${undefined}
+			${"should not navigate when href is invalid"}              | ${"invalid-url"}
+			${"should not navigate when href uses javascript: scheme"} | ${"javascript:alert(1)"}
+			${"should not navigate when href uses data: scheme"}       | ${"data:text/html,<script>alert(1)</script>"}
 		`("$scenario", ({ href }) => {
 			renderComponent({ overrideButton: { ...(href && { href }) } });
 			fireEvent.click(getField("button", COMPONENT_LABEL));