Merge pull request #19852 from asgerf/js/react-use-server

JS: Model React 'use' and 'use server'

Author: asgerf

javascript/ql/lib/ext/react.model.yml

@@ -0,0 +1,6 @@
+extensions:
+  - addsTo:
+      pack: codeql/javascript-all
+      extensible: summaryModel
+    data:
+      - ["react", "Member[use]", "Argument[0].Awaited", "ReturnValue", "value"]

javascript/ql/lib/semmle/javascript/frameworks/React.qll

@@ -875,3 +875,22 @@ private class ReactPropAsViewComponentInput extends ViewComponentInput {
 
   override string getSourceType() { result = "React props" }
 }
+
+private predicate isServerFunction(DataFlow::FunctionNode func) {
+  exists(Directive::UseServerDirective useServer |
+    useServer.getContainer() = func.getFunction()
+    or
+    useServer.getContainer().(Module).getAnExportedValue(_).getAFunctionValue() = func
+  )
+}
+
+private class ServerFunctionRemoteFlowSource extends RemoteFlowSource {
+  ServerFunctionRemoteFlowSource() {
+    exists(DataFlow::FunctionNode func |
+      isServerFunction(func) and
+      this = func.getAParameter()
+    )
+  }
+
+  override string getSourceType() { result = "React server function parameter" }
+}

javascript/ql/src/change-notes/2025-06-23-react-use-server.md

@@ -0,0 +1,5 @@
+---
+category: majorAnalysis
+---
+* Taint is now tracked through the React `use` function.
+* Parameters of React server functions, marked with the `"use server"` directive, are now seen as taint sources.

javascript/ql/test/library-tests/TripleDot/react-use.js

@@ -0,0 +1,12 @@
+import { use } from "react";
+
+async function fetchData() {
+  return new Promise((resolve) => {
+    resolve(source("fetchedData"));
+  });
+}
+
+function Component() {
+  const data = use(fetchData());
+  sink(data); // $ hasValueFlow=fetchedData
+}