Hardening pass: input validation, origin checks, and default-safe field behaviour — legacy/v1

.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=$(echo -e "$HEAD_COMMIT_MSG" | head -n 1)
 
           PIPELINE_PROJECT_URL="github.com/$GITHUB_REPOSITORY.git"
 

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

@@ -84,6 +84,15 @@ describe(REFERENCE_KEY, () => {
 		expect(SUBMIT_FN).toBeCalledWith(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

@@ -120,6 +120,66 @@ 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 () => {
+			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 when src cannot be resolved to a valid http(s) origin", async () => {
+			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/text/text.spec.tsx

@@ -111,6 +111,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));