fix(react-email): serve static files with URL-encoded names (#3671)

Author: hducati

.changeset/bright-assets-decode.md

@@ -0,0 +1,5 @@
+---
+"react-email": patch
+---
+
+Serve static assets with URL-encoded filenames correctly in the preview server while preventing decoded paths from escaping the static directory.

packages/react-email/src/cli/utils/preview/serve-static-file.spec.ts

@@ -0,0 +1,69 @@
+import fs from 'node:fs';
+import type http from 'node:http';
+import os from 'node:os';
+import path from 'node:path';
+import { serveStaticFile } from './serve-static-file.js';
+
+const mkTempDir = () =>
+  fs.mkdtempSync(path.join(os.tmpdir(), 'serve-static-file-'));
+
+const createResponse = () => {
+  let body = '';
+  const response = {
+    statusCode: 200,
+    setHeader: vi.fn(),
+    end: vi.fn((chunk?: string | Buffer) => {
+      if (chunk) body += chunk.toString();
+    }),
+  } as unknown as http.ServerResponse;
+
+  return { response, getBody: () => body };
+};
+
+test('serves static files with URL-encoded characters in their names', async () => {
+  const projectDir = mkTempDir();
+  const staticDir = path.join(projectDir, 'emails', 'static');
+  const contents = 'asset contents';
+  const cwdSpy = vi.spyOn(process, 'cwd').mockReturnValue(projectDir);
+  const { response, getBody } = createResponse();
+
+  fs.mkdirSync(staticDir, { recursive: true });
+  fs.writeFileSync(path.join(staticDir, 'company logo.txt'), contents);
+
+  await serveStaticFile(response, '/static/company%20logo.txt', 'emails');
+
+  expect(response.statusCode).toBe(200);
+  expect(getBody()).toBe(contents);
+
+  cwdSpy.mockRestore();
+  fs.rmSync(projectDir, { recursive: true });
+});
+
+test('does not serve URL-encoded paths outside the static directory', async () => {
+  const projectDir = mkTempDir();
+  const staticDir = path.join(projectDir, 'emails', 'static');
+  const cwdSpy = vi.spyOn(process, 'cwd').mockReturnValue(projectDir);
+  const { response } = createResponse();
+
+  fs.mkdirSync(staticDir, { recursive: true });
+  fs.writeFileSync(path.join(projectDir, 'secret.txt'), 'secret contents');
+
+  await serveStaticFile(
+    response,
+    '/static/%2e%2e%2f%2e%2e%2fsecret.txt',
+    'emails',
+  );
+
+  expect(response.statusCode).toBe(403);
+
+  cwdSpy.mockRestore();
+  fs.rmSync(projectDir, { recursive: true });
+});
+
+test('returns a bad request for malformed URL encoding', async () => {
+  const { response } = createResponse();
+
+  await serveStaticFile(response, '/static/image%E0%A4%A.png', 'emails');
+
+  expect(response.statusCode).toBe(400);
+});

packages/react-email/src/cli/utils/preview/serve-static-file.ts

@@ -8,17 +8,35 @@ export const serveStaticFile = async (
   pathname: string,
   staticDirRelativePath: string,
 ) => {
-  const pathname_ = pathname.replace('/static', './static');
-  const ext = path.parse(pathname_).ext;
+  let decodedPathname: string;
+  try {
+    decodedPathname = decodeURIComponent(pathname);
+  } catch {
+    res.statusCode = 400;
+    res.end();
+    return;
+  }
+
+  const staticBaseDir = path.resolve(
+    process.cwd(),
+    staticDirRelativePath,
+    'static',
+  );
+  const staticFilePath = decodedPathname.replace(/^\/static\/?/, '');
+  const fileAbsolutePath = path.resolve(staticBaseDir, staticFilePath);
+  const relativeFilePath = path.relative(staticBaseDir, fileAbsolutePath);
 
-  const staticBaseDir = path.resolve(process.cwd(), staticDirRelativePath);
-  const fileAbsolutePath = path.resolve(staticBaseDir, pathname_);
-  if (!fileAbsolutePath.startsWith(staticBaseDir)) {
+  if (
+    relativeFilePath.startsWith(`..${path.sep}`) ||
+    path.isAbsolute(relativeFilePath)
+  ) {
     res.statusCode = 403;
     res.end();
     return;
   }
 
+  const ext = path.extname(fileAbsolutePath);
+
   try {
     const fileHandle = await fs.open(fileAbsolutePath, 'r');
 

packages/react-email/src/cli/utils/tree.spec.ts

@@ -11,6 +11,7 @@ test('tree(__dirname, 2)', async () => {
     │   ├── hot-reloading
     │   ├── get-env-variables-for-preview-app.ts
     │   ├── index.ts
+    │   ├── serve-static-file.spec.ts
     │   ├── serve-static-file.ts
     │   └── start-dev-server.ts
     ├── types