fix(fastify): Server not handling periods in query params (#9714)

Fix for this issue.
#9663

If the query parameter contains`. `will result in a 404 error when
routing to the defined route.

Example.)
http://localhost:8910/posts?redirect_url=https%3A%2F%2Fwww.google.com

- Version: 6.3.3 or higher
- When the application is running with `yarn rw serve` command.

- Version: 6.3.2 or lower
- When the application is running with `yarn rw dev` command.

---------

Co-authored-by: yuichi.nishitani <hawkk9.public@gmail.com>
Co-authored-by: Dominic Saadi <dominiceliassaadi@gmail.com>

packages/api-server/src/__tests__/withWebServer.test.ts

@@ -280,4 +280,24 @@ describe('withWebServer', () => {
       )
     })
   })
+
+  describe("returns a 404 for assets that can't be found", () => {
+    it("returns a 404 for non-html assets that can't be found", async () => {
+      const res = await fastifyInstance.inject({
+        method: 'GET',
+        url: '/kittens.png',
+      })
+
+      expect(res.statusCode).toBe(404)
+    })
+
+    it('handles "."s in routes', async () => {
+      const res = await fastifyInstance.inject({
+        method: 'GET',
+        url: '/my-page?loading=spinner.blue',
+      })
+
+      expect(res.statusCode).toBe(200)
+    })
+  })
 })

packages/api-server/src/plugins/withWebServer.ts

@@ -2,6 +2,7 @@ import fs from 'fs'
 import path from 'path'
 
 import fastifyStatic from '@fastify/static'
+import fastifyUrlData from '@fastify/url-data'
 import type { FastifyInstance, FastifyReply, FastifyRequest } from 'fastify'
 
 import { getPaths } from '@redwoodjs/project-config'
@@ -27,6 +28,8 @@ const withWebServer = async (
   fastify: FastifyInstance,
   options: WebServerArgs
 ) => {
+  fastify.register(fastifyUrlData)
+
   const prerenderedFiles = findPrerenderedHtml()
   const indexPath = getFallbackIndexPath()
 
@@ -57,7 +60,9 @@ const withWebServer = async (
   fastify.setNotFoundHandler(
     {},
     function (req: FastifyRequest, reply: FastifyReply) {
-      const requestedExtension = path.extname(req.url)
+      const urlData = req.urlData()
+      const requestedExtension = path.extname(urlData.path ?? '')
+
       // If it's requesting some sort of asset, e.g. .js or .jpg files
       // Html files should fallback to the index.html
       if (requestedExtension !== '' && requestedExtension !== '.html') {

packages/fastify/src/web.ts

@@ -2,6 +2,7 @@ import fs from 'node:fs'
 import path from 'node:path'
 
 import fastifyStatic from '@fastify/static'
+import fastifyUrlData from '@fastify/url-data'
 import fg from 'fast-glob'
 import type {
   FastifyInstance,
@@ -20,6 +21,7 @@ export async function redwoodFastifyWeb(
   opts: RedwoodFastifyWebOptions,
   done: HookHandlerDoneFunction
 ) {
+  fastify.register(fastifyUrlData)
   const prerenderedFiles = findPrerenderedHtml()
 
   // Serve prerendered HTML directly, instead of the index.
@@ -51,7 +53,9 @@ export async function redwoodFastifyWeb(
   fastify.setNotFoundHandler(
     {},
     function (req: FastifyRequest, reply: FastifyReply) {
-      const requestedExtension = path.extname(req.url)
+      const urlData = req.urlData()
+      const requestedExtension = path.extname(urlData.path ?? '')
+
       // If it's requesting some sort of asset, e.g. .js or .jpg files
       // Html files should fallback to the index.html
       if (requestedExtension !== '' && requestedExtension !== '.html') {

packages/web-server/package.json

@@ -27,6 +27,7 @@
   "dependencies": {
     "@fastify/http-proxy": "9.3.0",
     "@fastify/static": "6.12.0",
+    "@fastify/url-data": "5.4.0",
     "@redwoodjs/project-config": "6.5.1",
     "chalk": "4.1.2",
     "dotenv-defaults": "5.0.2",

packages/web-server/src/web.ts

@@ -6,6 +6,7 @@ import fs from 'node:fs'
 import path from 'node:path'
 
 import fastifyStatic from '@fastify/static'
+import fastifyUrlData from '@fastify/url-data'
 import fg from 'fast-glob'
 import type {
   FastifyInstance,
@@ -26,6 +27,7 @@ export async function redwoodFastifyWeb(
   opts: RedwoodFastifyWebOptions,
   done: HookHandlerDoneFunction
 ) {
+  fastify.register(fastifyUrlData)
   const prerenderedFiles = findPrerenderedHtml()
 
   // Serve prerendered HTML directly, instead of the index.
@@ -53,9 +55,19 @@ export async function redwoodFastifyWeb(
   const indexPath = getFallbackIndexPath()
 
   // For SPA routing, fallback on unmatched routes and let client-side routing take over.
-  fastify.setNotFoundHandler({}, function (_, reply: FastifyReply) {
+  fastify.setNotFoundHandler({}, function (req, reply) {
+    const urlData = req.urlData()
+    const requestedExtension = path.extname(urlData.path ?? '')
+
+    // If it's requesting some sort of asset, e.g. .js or .jpg files
+    // Html files should fallback to the index.html
+    if (requestedExtension !== '' && requestedExtension !== '.html') {
+      reply.code(404)
+      return reply.send('Not Found')
+    }
+
     reply.header('Content-Type', 'text/html; charset=UTF-8')
-    reply.sendFile(indexPath)
+    return reply.sendFile(indexPath)
   })
 
   done()

yarn.lock

@@ -9157,6 +9157,7 @@ __metadata:
   dependencies:
     "@fastify/http-proxy": "npm:9.3.0"
     "@fastify/static": "npm:6.12.0"
+    "@fastify/url-data": "npm:5.4.0"
     "@redwoodjs/project-config": "npm:6.5.1"
     "@types/yargs-parser": "npm:21.0.3"
     chalk: "npm:4.1.2"