detect for DOM elements from DOM events in React

Author: erik-krogh

javascript/ql/src/semmle/javascript/DOM.qll

@@ -357,6 +357,15 @@ module DOM {
     }
   }
 
+  /**
+   * Gets a reference to a DOM event.
+   */
+  private DataFlow::SourceNode domEventSource() {
+    exists(JSXAttribute attr | attr.getName().matches("on%") |
+      result = attr.getValue().flow().getABoundFunctionValue(0).getParameter(0)
+    )
+  }
+
   /** Gets a data flow node that refers directly to a value from the DOM. */
   DataFlow::SourceNode domValueSource() { result instanceof DomValueSource::Range }
 
@@ -368,6 +377,10 @@ module DOM {
     t.start() and
     result = domValueRef().getAMethodCall(["item", "namedItem"])
     or
+    // e.g. <form onSubmit={e => e.target}/>
+    t.startInProp("target") and
+    result = domEventSource()
+    or
     exists(DataFlow::TypeTracker t2 | result = domValueRef(t2).track(t2, t))
   }
 

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

@@ -30,6 +30,9 @@ nodes
 | forms.js:45:21:45:26 | values |
 | forms.js:45:21:45:33 | values.stooge |
 | 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:57:19:57:32 | e.target.value |
 | 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() |
@@ -106,6 +109,7 @@ edges
 | forms.js:44:21:44:26 | values | forms.js:45:21:45:26 | values |
 | 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 |
 | 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") |
@@ -132,6 +136,7 @@ edges
 | forms.js:29:23:29:34 | values.email | forms.js:28:20:28:25 | values | forms.js:29:23:29:34 | values.email | $@ is reinterpreted as HTML without escaping meta-characters. | forms.js:28:20:28:25 | values | DOM text |
 | 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 |
 | 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

@@ -51,4 +51,15 @@ const App = () => (
       </form>
     )}
   />
+);
+
+function plainSubmit(e) {
+    $("#id").html(e.target.value); // NOT OK
+}
+
+const plainReact = () => (
+    <form onSubmit={e => plainSubmit(e)}>
+        <input type="text" value={this.state.value} onChange={this.handleChange} />
+        <input type="submit" value="Submit" />
+    </form>
 )