fix(parser): block unsupported DOM complex attributes (#185)

Author: mohamedmansour

crates/webui-parser/src/lib.rs

@@ -921,22 +921,34 @@ impl HtmlParser {
                 )? {
                     binding_count += 1;
                 }
-            } else if attr_name.starts_with(':') {
+            } else if let Some(prop_name) = attr_name.strip_prefix(':') {
                 // Complex attribute: :config="{{settings}}"
-                if is_component {
-                    if let Some(val) = &attr_value {
-                        if let Some(signal_name) = Self::extract_single_handlebars(val) {
-                            let frag = Self::maybe_mark_attr_start(
-                                WebUIFragment::attribute_complex(&attr_name, signal_name),
-                                &mut first_dynamic_emitted,
-                            );
-                            self.add_fragment(frag, fragments);
-                            binding_count += 1;
-                        }
+                // Only valid on custom elements — passes JS values by
+                // reference (objects, arrays). Native HTML elements should
+                // use regular attribute bindings (the framework already
+                // handles value, checked, selected as DOM properties).
+                if !is_component {
+                    return Err(ParserError::Parse(format!(
+                        ":{prop_name} complex binding is only allowed on custom elements. \
+                         Use {prop_name}=\"{{{{expr}}}}\" for native HTML elements."
+                    )));
+                }
+                if Self::is_blocked_complex_property(prop_name) {
+                    return Err(ParserError::Parse(format!(
+                        ":{prop_name} is not allowed as a complex attribute binding \
+                         because it enables arbitrary HTML injection. \
+                         Use {{{{{{expr}}}}}} (triple-brace) syntax for raw HTML."
+                    )));
+                }
+                if let Some(val) = &attr_value {
+                    if let Some(signal_name) = Self::extract_single_handlebars(val) {
+                        let frag = Self::maybe_mark_attr_start(
+                            WebUIFragment::attribute_complex(&attr_name, signal_name),
+                            &mut first_dynamic_emitted,
+                        );
+                        self.add_fragment(frag, fragments);
+                        binding_count += 1;
                     }
-                } else {
-                    self.process_complex_attribute(&attr_name, attr_value.as_deref(), fragments)?;
-                    binding_count += 1;
                 }
             } else if is_component && Self::is_skipped_attribute(&attr_name) {
                 // Skipped component attribute (class, style, role, data-*, aria-*)
@@ -1129,27 +1141,6 @@ impl HtmlParser {
         Ok(false)
     }
 
-    /// Process a complex attribute (:prefix).
-    fn process_complex_attribute(
-        &mut self,
-        name: &str,
-        value: Option<&str>,
-        fragments: &mut Vec<WebUIFragment>,
-    ) -> Result<()> {
-        if let Some(val) = value {
-            if let Some(signal_name) = Self::extract_single_handlebars(val) {
-                self.add_fragment(
-                    WebUIFragment::attribute_complex(name, signal_name),
-                    fragments,
-                );
-                return Ok(());
-            }
-        }
-        // No valid handlebars — emit as raw
-        self.add_raw_fragment(&format!(" {}=\"{}\"", name, value.unwrap_or("")));
-        Ok(())
-    }
-
     /// Process a dynamic attribute (regular name with handlebars in value).
     fn process_dynamic_attribute(
         &mut self,
@@ -1542,6 +1533,12 @@ impl HtmlParser {
                 .any(|prefix| name.starts_with(prefix))
     }
 
+    /// Properties that must never be set via `:attr` complex bindings.
+    /// These enable XSS (HTML injection) or arbitrary code execution.
+    fn is_blocked_complex_property(name: &str) -> bool {
+        matches!(name, "innerHTML" | "outerHTML" | "srcdoc" | "content") || name.starts_with("on")
+    }
+
     fn process_component_directive(
         &mut self,
         node: Node,
@@ -2373,6 +2370,24 @@ mod tests {
         (fragments, records)
     }
 
+    /// Helper to parse HTML with a pre-registered component.
+    fn parse_with_component(tag: &str, html: &str) -> (Vec<WebUIFragment>, WebUIFragmentRecords) {
+        let mut parser = HtmlParser::new();
+        parser
+            .component_registry
+            .register_component(tag, "<div></div>", None)
+            .expect("register");
+        let result = parser.parse("index.html", html);
+        assert!(result.is_ok(), "Parse error: {:?}", result.err());
+        let records = parser.into_fragment_records();
+        let fragments = records
+            .get("index.html")
+            .expect("Failed to get index.html fragment")
+            .fragments
+            .clone();
+        (fragments, records)
+    }
+
     #[test]
     fn test_attribute_handlebars_in_href() {
         // Port of: 'should process handlebars from attributes as signals'
@@ -2499,15 +2514,19 @@ mod tests {
     fn test_attribute_colon_prefixed_complex() {
         // Port of: 'should process colon-prefixed attribute with handlebars'
         // <my-component :config="{{settings}}"></my-component>
-        let (fragments, _) =
-            parse_and_get_fragments(r#"<my-component :config="{{settings}}"></my-component>"#);
+        let (fragments, _) = parse_with_component(
+            "my-component",
+            r#"<my-component :config="{{settings}}"></my-component>"#,
+        );
 
         assert_fragments!(
             fragments,
             [
                 raw("<my-component"),
-                attr_complex(":config", "settings"),
-                raw("></my-component>"),
+                attr_complex_start(":config", "settings"),
+                raw(">"),
+                component("my-component"),
+                raw("</my-component>"),
             ]
         );
     }
@@ -2516,17 +2535,88 @@ mod tests {
     fn test_attribute_multiple_colon_prefixed() {
         // Port of: 'should process multiple colon-prefixed complex attributes'
         // <my-component :prop1="{{val1}}" :prop2="{{val2}}"></my-component>
-        let (fragments, _) = parse_and_get_fragments(
+        let (fragments, _) = parse_with_component(
+            "my-component",
             r#"<my-component :prop1="{{val1}}" :prop2="{{val2}}"></my-component>"#,
         );
 
         assert_fragments!(
             fragments,
             [
                 raw("<my-component"),
-                attr_complex(":prop1", "val1"),
+                attr_complex_start(":prop1", "val1"),
                 attr_complex(":prop2", "val2"),
-                raw("></my-component>"),
+                raw(">"),
+                component("my-component"),
+                raw("</my-component>"),
+            ]
+        );
+    }
+
+    #[test]
+    fn test_blocked_complex_property_innerhtml() {
+        let mut parser = HtmlParser::new();
+        let result = parser.parse("index.html", r#"<div :innerHTML="{{content}}"></div>"#);
+        assert!(
+            result.is_err(),
+            "Expected error for :innerHTML on native element"
+        );
+        let err = result.unwrap_err().to_string();
+        assert!(
+            err.contains("only allowed on custom elements"),
+            "Error: {err}"
+        );
+    }
+
+    #[test]
+    fn test_blocked_complex_on_native_element() {
+        let mut parser = HtmlParser::new();
+        let result = parser.parse("index.html", r#"<div :data="{{config}}"></div>"#);
+        assert!(
+            result.is_err(),
+            "Expected error for :data on native element"
+        );
+        let err = result.unwrap_err().to_string();
+        assert!(
+            err.contains("only allowed on custom elements"),
+            "Error: {err}"
+        );
+    }
+
+    #[test]
+    fn test_blocked_complex_property_on_component() {
+        let mut parser = HtmlParser::new();
+        parser
+            .component_registry
+            .register_component("my-widget", "<div></div>", None)
+            .expect("register");
+        let result = parser.parse(
+            "index.html",
+            r#"<my-widget :innerHTML="{{html}}"></my-widget>"#,
+        );
+        assert!(
+            result.is_err(),
+            "Expected error for :innerHTML on component"
+        );
+        let err = result.unwrap_err().to_string();
+        assert!(err.contains("HTML injection"), "Error: {err}");
+    }
+
+    #[test]
+    fn test_allowed_complex_property() {
+        // :config on a component should still work
+        let (fragments, _) = parse_with_component(
+            "my-component",
+            r#"<my-component :config="{{settings}}"></my-component>"#,
+        );
+        assert_fragments!(
+            fragments,
+            [
+                raw("<my-component"),
+                attr_complex_start(":config", "settings"),
+                raw(">"),
+                component("my-component"),
+                raw("</my-component>"),
             ]
         );
     }
@@ -2535,17 +2625,21 @@ mod tests {
     fn test_attribute_mixed_normal_boolean_colon() {
         // Port of: 'should process mixed normal, boolean, and colon-prefixed attributes'
         // <my-component id="comp" :config="{{settings}}" ?enabled="{{isEnabled}}"></my-component>
-        let (fragments, _) = parse_and_get_fragments(
+        let (fragments, _) = parse_with_component(
+            "my-component",
             r#"<my-component id="comp" :config="{{settings}}" ?enabled="{{isEnabled}}"></my-component>"#,
         );
 
         assert_fragments!(
             fragments,
             [
-                raw("<my-component id=\"comp\""),
+                raw("<my-component"),
+                attr_raw_start("id", "comp"),
                 attr_complex(":config", "settings"),
                 bool_attr("enabled", "isEnabled"),
-                raw("></my-component>"),
+                raw(">"),
+                component("my-component"),
+                raw("</my-component>"),
             ]
         );
     }

examples/app/commerce/src/molecules/mp-search-bar/mp-search-bar.html

@@ -3,7 +3,7 @@
     <circle cx="11" cy="11" r="8"></circle>
     <path d="m21 21-4.35-4.35"></path>
   </svg>
-  <input class="search-input" type="text" name="q" :value="{{query}}" placeholder="{{placeholder}}" autocomplete="off"
+  <input class="search-input" type="text" name="q" value="{{query}}" placeholder="{{placeholder}}" autocomplete="off"
     @input="{onInput(e)}"
     aria-label="{{label}}" />
 </form>

examples/app/commerce/src/pages/mp-page-product/mp-page-product.html

@@ -25,7 +25,7 @@ <h1 class="product-title">{{productTitle}}</h1>
           @variant-select="{onVariantSelect(e)}"
         ></mp-variant-selector>
 
-        <div class="product-description" :innerHTML="{{descriptionHtml}}"></div>
+        <div class="product-description">{{{descriptionHtml}}}</div>
 
         <mp-add-to-cart
           handle="{{handle}}"

examples/app/commerce/tests/commerce.spec.ts-snapshots/product-circles-tshirt-chromium.png

@@ -1,6 +1,6 @@
 <div class="search-container">
   <span class="search-icon"></span>
-  <input class="search-input" type="text" placeholder="{{placeholder}}" :value="{{value}}" @input="{onInput(e)}" />
+  <input class="search-input" type="text" placeholder="{{placeholder}}" value="{{value}}" @input="{onInput(e)}" />
   <if condition="value">
     <button class="clear-btn" type="button" title="Clear" @click="{onClear()}">&times;</button>
   </if>

examples/app/contact-book-manager/src/molecules/cb-search-bar/cb-search-bar.html

@@ -1,34 +1,34 @@
 <h2 class="form-title">{{formTitle}}</h2>
-<input type="hidden" name="_editId" :value="{{editId}}" />
+<input type="hidden" name="_editId" value="{{editId}}" />
 <div class="form-grid">
   <div class="form-field">
     <label class="field-label">First Name</label>
-    <input class="field-input" type="text" placeholder="Enter first name" :value="{{firstName}}" name="firstName"
+    <input class="field-input" type="text" placeholder="Enter first name" value="{{firstName}}" name="firstName"
       @input="{onFieldInput(e)}" />
   </div>
   <div class="form-field">
     <label class="field-label">Last Name</label>
-    <input class="field-input" type="text" placeholder="Enter last name" :value="{{lastName}}" name="lastName"
+    <input class="field-input" type="text" placeholder="Enter last name" value="{{lastName}}" name="lastName"
       @input="{onFieldInput(e)}" />
   </div>
   <div class="form-field">
     <label class="field-label">Email</label>
-    <input class="field-input" type="email" placeholder="email@example.com" :value="{{email}}" name="email"
+    <input class="field-input" type="email" placeholder="email@example.com" value="{{email}}" name="email"
       @input="{onFieldInput(e)}" />
   </div>
   <div class="form-field">
     <label class="field-label">Phone</label>
-    <input class="field-input" type="tel" placeholder="+1 (555) 000-0000" :value="{{phone}}" name="phone"
+    <input class="field-input" type="tel" placeholder="+1 (555) 000-0000" value="{{phone}}" name="phone"
       @input="{onFieldInput(e)}" />
   </div>
   <div class="form-field">
     <label class="field-label">Company</label>
-    <input class="field-input" type="text" placeholder="Company name" :value="{{company}}" name="company"
+    <input class="field-input" type="text" placeholder="Company name" value="{{company}}" name="company"
       @input="{onFieldInput(e)}" />
   </div>
   <div class="form-field">
     <label class="field-label">Address</label>
-    <input class="field-input" type="text" placeholder="Street address" :value="{{address}}" name="address"
+    <input class="field-input" type="text" placeholder="Street address" value="{{address}}" name="address"
       @input="{onFieldInput(e)}" />
   </div>
 </div>
@@ -45,7 +45,7 @@ <h2 class="form-title">{{formTitle}}</h2>
 </div>
 <div class="form-field-full">
   <label class="field-label">Notes</label>
-  <textarea class="notes-input" placeholder="Add notes..." rows="3" name="notes" :value="{{notes}}"
+  <textarea class="notes-input" placeholder="Add notes..." rows="3" name="notes" value="{{notes}}"
     @input="{onNotesInput(e)}"></textarea>
 </div>
 <div class="form-actions">

examples/app/contact-book-manager/src/organisms/cb-contact-form/cb-contact-form.html

@@ -4,7 +4,7 @@ <h1 class="title">Contacts</h1>
 <div class="header-center">
   <div class="search-container">
     <span class="search-icon"></span>
-    <input class="search-input" type="text" placeholder="Search contacts..." :value="{{searchQuery}}" @input="{onInput(e)}" />
+    <input class="search-input" type="text" placeholder="Search contacts..." value="{{searchQuery}}" @input="{onInput(e)}" />
   </div>
 </div>
 <div class="header-right">