add source for react-hook-form in xss-through-dom

Author: erik-krogh

javascript/ql/src/semmle/javascript/security/dataflow/XssThroughDomCustomizations.qll

@@ -154,5 +154,21 @@ module XssThroughDom {
         )
       }
     }
+
+    /**
+     * An object containing input values from a form build with `react-hook-form`.
+     */
+    class ReactHookFormSource extends Source {
+      ReactHookFormSource() {
+        exists(API::Node useForm |
+          useForm = API::moduleImport("react-hook-form").getMember("useForm").getReturn()
+        |
+          this =
+            useForm.getMember("handleSubmit").getParameter(0).getParameter(0).getAnImmediateUse()
+          or
+          this = useForm.getMember("getValues").getACall()
+        )
+      }
+    }
   }
 }

javascript/ql/test/query-tests/Security/CWE-079/XssThroughDom/XssThroughDom.expected

@@ -33,6 +33,17 @@ nodes
 | forms.js:57:19:57:32 | e.target.value |
 | forms.js:57:19:57:32 | e.target.value |
 | forms.js:57:19:57:32 | e.target.value |
+| forms.js:71:21:71:24 | data |
+| forms.js:71:21:71:24 | data |
+| forms.js:72:19:72:22 | data |
+| forms.js:72:19:72:27 | data.name |
+| forms.js:72:19:72:27 | data.name |
+| forms.js:92:17:92:36 | values |
+| forms.js:92:26:92:36 | getValues() |
+| forms.js:92:26:92:36 | getValues() |
+| forms.js:93:25:93:30 | values |
+| forms.js:93:25:93:35 | values.name |
+| forms.js:93:25:93:35 | values.name |
 | xss-through-dom.js:2:16:2:34 | $("textarea").val() |
 | xss-through-dom.js:2:16:2:34 | $("textarea").val() |
 | xss-through-dom.js:2:16:2:34 | $("textarea").val() |
@@ -110,6 +121,15 @@ edges
 | forms.js:45:21:45:26 | values | forms.js:45:21:45:33 | values.stooge |
 | forms.js:45:21:45:26 | values | forms.js:45:21:45:33 | values.stooge |
 | forms.js:57:19:57:32 | e.target.value | forms.js:57:19:57:32 | e.target.value |
+| forms.js:71:21:71:24 | data | forms.js:72:19:72:22 | data |
+| forms.js:71:21:71:24 | data | forms.js:72:19:72:22 | data |
+| forms.js:72:19:72:22 | data | forms.js:72:19:72:27 | data.name |
+| forms.js:72:19:72:22 | data | forms.js:72:19:72:27 | data.name |
+| forms.js:92:17:92:36 | values | forms.js:93:25:93:30 | values |
+| forms.js:92:26:92:36 | getValues() | forms.js:92:17:92:36 | values |
+| forms.js:92:26:92:36 | getValues() | forms.js:92:17:92:36 | values |
+| forms.js:93:25:93:30 | values | forms.js:93:25:93:35 | values.name |
+| forms.js:93:25:93:30 | values | forms.js:93:25:93:35 | values.name |
 | xss-through-dom.js:2:16:2:34 | $("textarea").val() | xss-through-dom.js:2:16:2:34 | $("textarea").val() |
 | xss-through-dom.js:4:16:4:40 | $(".som ... .text() | xss-through-dom.js:4:16:4:40 | $(".som ... .text() |
 | xss-through-dom.js:8:16:8:53 | $(".som ... arget") | xss-through-dom.js:8:16:8:53 | $(".som ... arget") |
@@ -137,6 +157,8 @@ edges
 | forms.js:35:19:35:30 | values.email | forms.js:34:13:34:18 | values | forms.js:35:19:35:30 | values.email | $@ is reinterpreted as HTML without escaping meta-characters. | forms.js:34:13:34:18 | values | DOM text |
 | forms.js:45:21:45:33 | values.stooge | forms.js:44:21:44:26 | values | forms.js:45:21:45:33 | values.stooge | $@ is reinterpreted as HTML without escaping meta-characters. | forms.js:44:21:44:26 | values | DOM text |
 | forms.js:57:19:57:32 | e.target.value | forms.js:57:19:57:32 | e.target.value | forms.js:57:19:57:32 | e.target.value | $@ is reinterpreted as HTML without escaping meta-characters. | forms.js:57:19:57:32 | e.target.value | DOM text |
+| forms.js:72:19:72:27 | data.name | forms.js:71:21:71:24 | data | forms.js:72:19:72:27 | data.name | $@ is reinterpreted as HTML without escaping meta-characters. | forms.js:71:21:71:24 | data | DOM text |
+| forms.js:93:25:93:35 | values.name | forms.js:92:26:92:36 | getValues() | forms.js:93:25:93:35 | values.name | $@ is reinterpreted as HTML without escaping meta-characters. | forms.js:92:26:92:36 | getValues() | DOM text |
 | xss-through-dom.js:2:16:2:34 | $("textarea").val() | xss-through-dom.js:2:16:2:34 | $("textarea").val() | xss-through-dom.js:2:16:2:34 | $("textarea").val() | $@ is reinterpreted as HTML without escaping meta-characters. | xss-through-dom.js:2:16:2:34 | $("textarea").val() | DOM text |
 | xss-through-dom.js:4:16:4:40 | $(".som ... .text() | xss-through-dom.js:4:16:4:40 | $(".som ... .text() | xss-through-dom.js:4:16:4:40 | $(".som ... .text() | $@ is reinterpreted as HTML without escaping meta-characters. | xss-through-dom.js:4:16:4:40 | $(".som ... .text() | DOM text |
 | xss-through-dom.js:8:16:8:53 | $(".som ... arget") | xss-through-dom.js:8:16:8:53 | $(".som ... arget") | xss-through-dom.js:8:16:8:53 | $(".som ... arget") | $@ is reinterpreted as HTML without escaping meta-characters. | xss-through-dom.js:8:16:8:53 | $(".som ... arget") | DOM text |

javascript/ql/test/query-tests/Security/CWE-079/XssThroughDom/forms.js

@@ -62,4 +62,39 @@ const plainReact = () => (
         <input type="text" value={this.state.value} onChange={this.handleChange} />
         <input type="submit" value="Submit" />
     </form>
-)
+)
+
+import { useForm } from 'react-hook-form';
+
+function HookForm() {
+  const { register, handleSubmit, errors } = useForm(); // initialize the hook
+  const onSubmit = (data) => {
+    $("#id").html(data.name); // NOT OK 
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+        <input name="name" ref={register({ required: true })} />
+        <input type="submit" />
+    </form>
+  );
+}
+
+function HookForm2() {
+  const { register, getValues } = useForm();
+  
+  return (
+    <form>
+      <input name="name" ref={register} />
+      <button
+        type="button"
+        onClick={() => {
+          const values = getValues(); // { test: "test-input", test1: "test1-input" }
+          $("#id").html(values.name); // NOT OK
+        }}
+      >
+      </button>
+    </form>
+  );
+}
+