feat(pat-validation): Sanitize the validation message.

src/pat/validation/validation.js

@@ -42,18 +42,26 @@ class Pattern extends BasePattern {
     // validation fails (e.g. pat-inject).
     static order = 100;
 
+    _dompurify = null;
+    async get_dompurify() {
+        if (!this._dompurify) {
+            this._dompurify = (await import("dompurify")).default;
+        }
+        return this._dompurify;
+    }
+
     init() {
         events.add_event_listener(
             this.el,
             "submit",
             `pat-validation--submit--validator`,
-            (e) => {
+            async (e) => {
                 // On submit, check all.
                 // Immediate, non-debounced check with submit. Otherwise submit
                 // is not cancelable.
                 for (const input of this.inputs) {
                     logger.debug("Checking input for submit", input, e);
-                    this.check_input({ input: input, event: e });
+                    await this.check_input({ input: input, event: e });
                 }
             },
             // Make sure this event handler is run early, in the capturing
@@ -108,7 +116,7 @@ class Pattern extends BasePattern {
         }
     }
 
-    check_input({ input, event, stop = false }) {
+    async check_input({ input, event, stop = false }) {
         if (input.disabled) {
             // No need to check disabled inputs.
             return;
@@ -239,11 +247,11 @@ class Pattern extends BasePattern {
                 // do not re-check when stop is set to avoid infinite loops
                 if (!stop && not_after_el) {
                     logger.debug("Check `not-after` input.", not_after_el);
-                    this.check_input({ input: not_after_el, stop: true });
+                    await this.check_input({ input: not_after_el, stop: true });
                 }
                 if (!stop && not_before_el) {
                     logger.debug("Check `no-before` input.", not_after_el);
-                    this.check_input({ input: not_before_el, stop: true });
+                    await this.check_input({ input: not_before_el, stop: true });
                 }
             }
 
@@ -318,7 +326,7 @@ class Pattern extends BasePattern {
             event.stopPropagation();
             event.stopImmediatePropagation();
         }
-        this.set_error_message(input);
+        await this.set_error_message(input);
     }
 
     set_error({
@@ -381,7 +389,7 @@ class Pattern extends BasePattern {
         }
     }
 
-    set_error_message(input) {
+    async set_error_message(input) {
         // First, remove the old error message.
         this.remove_error(input, false, true);
 
@@ -393,8 +401,16 @@ class Pattern extends BasePattern {
             return;
         }
 
-        // Create the validation error DOM node from the template
-        const validation_message = input.validationMessage || input[KEY_ERROR_MSG];
+        // Create the validation error DOM node from the template.
+        // Sanitize the validation message to keep malicious input from being
+        // executed. Chrome includes the input value in it's browser validation
+        // message. When placing that into the DOM, malicious input could get
+        // executed within the web page context.
+        const dompurify = await this.get_dompurify();
+        const validation_message = dompurify.sanitize(
+            input.validationMessage || input[KEY_ERROR_MSG]
+        );
+
         const error_node = dom.create_from_string(
             this.error_template(validation_message)
         ).firstChild;
@@ -431,7 +447,7 @@ class Pattern extends BasePattern {
         if (did_disable) {
             logger.debug("Checking whole form after element was disabled.");
             for (const _input of this.inputs.filter((it) => it !== input)) {
-                this.check_input({ input: _input, stop: true });
+                await this.check_input({ input: _input, stop: true });
             }
         }
     }

src/pat/validation/validation.test.js

@@ -458,6 +458,7 @@ describe("pat-validation", function () {
             await events.await_pattern_init(instance);
 
             document.querySelector("button").click();
+            await utils.timeout(1); // wait a tick for async to settle.
 
             expect(el.querySelectorAll("em.warning").length).toBe(2);
         });
@@ -1509,4 +1510,245 @@ describe("pat-validation", function () {
             expect(el.querySelector("#form-buttons-create").disabled).toBe(false);
         });
     });
+
+    describe("8 - security tests", function () {
+        it("8.1 - sanitizes malicious script content in validation messages", async function () {
+            document.body.innerHTML = `
+              <form class="pat-validation">
+                <input type="text" name="malicious" required>
+              </form>
+            `;
+            const el = document.querySelector(".pat-validation");
+            const inp = el.querySelector("[name=malicious]");
+
+            const instance = new Pattern(el);
+            await events.await_pattern_init(instance);
+
+            // Use the pattern's set_error method which would eventually call set_error_message
+            // This simulates setting a custom error message with malicious content
+            const malicious_message =
+                "Please fill out this field: <script>alert(33)</script>";
+            instance.set_error({ input: inp, msg: malicious_message });
+
+            // Manually trigger set_error_message to test the sanitization
+            await instance.set_error_message(inp);
+
+            // Check that an error message is shown
+            expect(el.querySelectorAll("em.warning").length).toBe(1);
+
+            // Verify the script tag has been sanitized/removed
+            const warning_text = el.querySelector("em.warning").textContent;
+            expect(warning_text).not.toContain("<script>");
+            expect(warning_text).not.toContain("</script>");
+            expect(warning_text).not.toContain("alert(33)");
+
+            // The sanitized message should still contain the safe text
+            expect(warning_text).toContain("Please fill out this field");
+
+            // Ensure no script elements were actually added to the DOM
+            expect(el.querySelectorAll("script").length).toBe(0);
+        });
+
+        it("8.2 - sanitizes malicious HTML content in validation messages", async function () {
+            document.body.innerHTML = `
+              <form class="pat-validation">
+                <input type="text" name="malicious" required>
+              </form>
+            `;
+            const el = document.querySelector(".pat-validation");
+            const inp = el.querySelector("[name=malicious]");
+
+            const instance = new Pattern(el);
+            await events.await_pattern_init(instance);
+
+            // Set malicious HTML content that could execute JavaScript
+            const malicious_message =
+                'Please fill out this field: <img src="x" onerror="alert(33)">';
+            instance.set_error({ input: inp, msg: malicious_message });
+
+            // Manually trigger set_error_message to test the sanitization
+            await instance.set_error_message(inp);
+
+            // Check that an error message is shown
+            expect(el.querySelectorAll("em.warning").length).toBe(1);
+
+            // Verify the malicious HTML has been sanitized
+            const warning_element = el.querySelector("em.warning");
+            const warning_text = warning_element.textContent;
+            const warning_html = warning_element.innerHTML;
+
+            // The text should not contain the malicious content
+            expect(warning_text).not.toContain("onerror");
+            expect(warning_text).not.toContain("alert(33)");
+
+            // The HTML should also be sanitized - the dangerous onerror attribute should be removed
+            // DOMPurify keeps safe <img> tags but removes dangerous event handlers
+            expect(warning_html).not.toContain("onerror");
+            expect(warning_html).not.toContain("alert(33)");
+
+            // The safe text should remain
+            expect(warning_text).toContain("Please fill out this field");
+
+            // Ensure no img elements with onerror were added
+            const imgs_with_onerror = document.querySelectorAll("img[onerror]");
+            expect(imgs_with_onerror.length).toBe(0);
+        });
+
+        it("8.3 - preserves safe HTML content in validation messages", async function () {
+            document.body.innerHTML = `
+              <form class="pat-validation">
+                <input type="text" name="safe" required>
+              </form>
+            `;
+            const el = document.querySelector(".pat-validation");
+            const inp = el.querySelector("[name=safe]");
+
+            const instance = new Pattern(el);
+            await events.await_pattern_init(instance);
+
+            // Set a validation message with safe HTML content (like emphasis)
+            const safe_message =
+                "This field is <strong>required</strong> and must be filled out.";
+            instance.set_error({ input: inp, msg: safe_message });
+
+            // Trigger set_error_message
+            await instance.set_error_message(inp);
+
+            // Check that an error message is shown
+            expect(el.querySelectorAll("em.warning").length).toBe(1);
+
+            const warning_element = el.querySelector("em.warning");
+            const warning_text = warning_element.textContent;
+            const warning_html = warning_element.innerHTML;
+
+            // The text content should contain the message without HTML tags
+            expect(warning_text).toContain(
+                "This field is required and must be filled out."
+            );
+
+            // The innerHTML should contain the safe HTML (DOMPurify allows <strong> by default)
+            expect(warning_html).toContain("<strong>required</strong>");
+        });
+
+        it("8.4 - handles validation messages from browser's built-in validation", async function () {
+            document.body.innerHTML = `
+              <form class="pat-validation">
+                <input type="email" name="email" required>
+              </form>
+            `;
+            const el = document.querySelector(".pat-validation");
+            const inp = el.querySelector("[name=email]");
+
+            const instance = new Pattern(el);
+            await events.await_pattern_init(instance);
+
+            // Set an invalid email that would trigger browser validation
+            // and potentially include the malicious input in the validation message
+            inp.value = '<script>alert("xss")</script>@example.com';
+
+            // Trigger validation
+            inp.dispatchEvent(events.change_event());
+            await utils.timeout(1); // wait a tick for async to settle.
+
+            // Check that an error message is shown
+            expect(el.querySelectorAll("em.warning").length).toBe(1);
+
+            const warning_text = el.querySelector("em.warning").textContent;
+
+            // Verify the script content has been sanitized from the validation message
+            expect(warning_text).not.toContain("<script>");
+            expect(warning_text).not.toContain("</script>");
+            expect(warning_text).not.toContain('alert("xss")');
+
+            // Ensure no script elements were added to the DOM
+            expect(el.querySelectorAll("script").length).toBe(0);
+        });
+
+        it("8.5 - sanitizes example malicious script that would execute", async function () {
+            document.body.innerHTML = `
+              <form class="pat-validation">
+                <input type="text" name="example" required>
+              </form>
+            `;
+            const el = document.querySelector(".pat-validation");
+            const inp = el.querySelector("[name=example]");
+
+            const instance = new Pattern(el);
+            await events.await_pattern_init(instance);
+
+            // Set the exact example from the user's request
+            const malicious_message = "Value is invalid: <script>alert(33)</script>";
+            instance.set_error({ input: inp, msg: malicious_message });
+
+            // Trigger set_error_message to test the sanitization
+            await instance.set_error_message(inp);
+
+            // Check that an error message is shown
+            expect(el.querySelectorAll("em.warning").length).toBe(1);
+
+            // Verify the script content has been completely sanitized
+            const warning_element = el.querySelector("em.warning");
+            const warning_text = warning_element.textContent;
+            const warning_html = warning_element.innerHTML;
+
+            // Verify no script execution
+            expect(warning_text).not.toContain("<script>");
+            expect(warning_text).not.toContain("</script>");
+            expect(warning_text).not.toContain("alert(33)");
+
+            // HTML should also be clean
+            expect(warning_html).not.toContain("<script>");
+            expect(warning_html).not.toContain("</script>");
+
+            // The safe part of the message should remain
+            expect(warning_text).toContain("Value is invalid");
+
+            // Ensure no script elements were added to the DOM
+            expect(document.querySelectorAll("script").length).toBe(0);
+        });
+
+        it("8.6 - sanitizes malicious content in browser validationMessage property", async function () {
+            document.body.innerHTML = `
+              <form class="pat-validation">
+                <input type="text" name="browser" required>
+              </form>
+            `;
+            const el = document.querySelector(".pat-validation");
+            const inp = el.querySelector("[name=browser]");
+
+            const instance = new Pattern(el);
+            await events.await_pattern_init(instance);
+
+            // Simulate browser validation message with malicious content
+            // This could happen if browser includes user input in validation message
+            inp.value = "";
+
+            // Mock the validationMessage property to contain malicious content
+            // This simulates what Chrome might do
+            Object.defineProperty(inp, "validationMessage", {
+                value: 'Please fill out this field. Input: <script>alert("malicious")</script>',
+                configurable: true,
+            });
+
+            // Trigger validation through the pattern
+            instance.check_input({ input: inp });
+            await utils.timeout(1); // wait for async to settle.
+
+            // Check that an error message is shown
+            expect(el.querySelectorAll("em.warning").length).toBe(1);
+
+            const warning_text = el.querySelector("em.warning").textContent;
+
+            // Verify the script has been sanitized
+            expect(warning_text).not.toContain("<script>");
+            expect(warning_text).not.toContain("</script>");
+            expect(warning_text).not.toContain('alert("malicious")');
+
+            // Safe content should remain
+            expect(warning_text).toContain("Please fill out this field");
+
+            // No scripts should be in the DOM
+            expect(document.querySelectorAll("script").length).toBe(0);
+        });
+    });
 });