support Next.js pages that export React components

Author: erik-krogh

javascript/ql/src/semmle/javascript/frameworks/Next.qll

@@ -86,17 +86,46 @@ module NextJS {
    */
   DataFlow::FunctionNode getInitialProps(Module pageModule) {
     pageModule = getAPagesModule() and
-    result =
-      pageModule
-          .getAnExportedValue("default")
-          .getAFunctionValue()
-          .getAPropertyWrite("getInitialProps")
-          .getRhs()
-          .getAFunctionValue()
+    (
+      result =
+        pageModule
+            .getAnExportedValue("default")
+            .getAFunctionValue()
+            .getAPropertyWrite("getInitialProps")
+            .getRhs()
+            .getAFunctionValue()
+      or
+      result =
+        pageModule
+            .getAnExportedValue("default")
+            .getALocalSource()
+            .getAstNode()
+            .(ReactComponent)
+            .getStaticMethod("getInitialProps")
+            .flow()
+    )
+  }
+
+  /**
+   * Gets a reference to a `props` object computed by the Next.js server.
+   * This `props` object is both used both by the server and client to render the page.
+   */
+  DataFlow::Node getAPropsSource(Module pageModule) {
+    pageModule = getAPagesModule() and
+    (
+      result =
+        [getStaticPropsFunction(pageModule), getServerSidePropsFunction(pageModule)]
+            .getAReturn()
+            .getALocalSource()
+            .getAPropertyWrite("props")
+            .getRhs()
+      or
+      result = getInitialProps(pageModule).getAReturn()
+    )
   }
 
   /**
-   * A step modelling the flow from the server-computed `getStaticProps` to the server/client rendering of the page.
+   * A step modelling the flow from the server-computed props object to the default exported function that renders the page.
    */
   class NextJSStaticPropsStep extends DataFlow::AdditionalFlowStep, DataFlow::FunctionNode {
     Module pageModule;
@@ -107,20 +136,31 @@ module NextJS {
     }
 
     override predicate step(DataFlow::Node pred, DataFlow::Node succ) {
-      (
-        pred =
-          [getStaticPropsFunction(pageModule), getServerSidePropsFunction(pageModule)]
-              .getAReturn()
-              .getALocalSource()
-              .getAPropertyWrite("props")
-              .getRhs()
-        or
-        pred = getInitialProps(pageModule).getAReturn()
-      ) and
+      pred = getAPropsSource(pageModule) and
       succ = this.getParameter(0)
     }
   }
 
+  /**
+   * A step modelling the flow from the server-computed props object to the default exported React component that renders the page.
+   */
+  class NextJSStaticReactComponentPropsStep extends DataFlow::AdditionalFlowStep,
+    DataFlow::ValueNode {
+    Module pageModule;
+    ReactComponent component;
+
+    NextJSStaticReactComponentPropsStep() {
+      pageModule = getAPagesModule() and
+      this.getAstNode() = component and
+      this = pageModule.getAnExportedValue("default").getALocalSource()
+    }
+
+    override predicate step(DataFlow::Node pred, DataFlow::Node succ) {
+      pred = getAPropsSource(pageModule) and
+      succ = component.getADirectPropsAccess()
+    }
+  }
+
   /**
    * A Next.js function that is exected on the server for every request, seen as a routehandler.
    */

javascript/ql/test/library-tests/frameworks/Next/pages/secondpage.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+class Page extends React.Component {
+  static async getInitialProps(ctx) {
+    const url = ctx.req.url;
+    return { stars: json.stargazers_count, taint: source(1) }
+  }
+
+  render() {
+    sink(this.props.taint);
+    return <div>Next stars: {this.props.stars}</div>
+  }
+}
+
+export default Page

javascript/ql/test/library-tests/frameworks/Next/tests.expected

@@ -1,6 +1,8 @@
 remoteFlow
 | pages/[my-fallback-id].jsx:9:40:9:45 | params |
+| pages/secondpage.jsx:5:17:5:27 | ctx.req.url |
 dataFlow
 | pages/[my-fallback-id].jsx:13:20:13:27 | source() | pages/[my-fallback-id].jsx:19:10:19:14 | taint |
 | pages/[my-fallback-id].jsx:26:21:26:29 | source(2) | pages/[my-fallback-id].jsx:20:10:20:14 | stars |
 | pages/[my-fallback-id].jsx:32:19:32:27 | source(3) | pages/[my-fallback-id].jsx:21:10:21:13 | more |
+| pages/secondpage.jsx:6:51:6:59 | source(1) | pages/secondpage.jsx:10:10:10:25 | this.props.taint |