fix(core): add url normalization to image optimizer URL (#2015)

packages/libs/core/src/images/imageOptimizer.ts

@@ -75,6 +75,23 @@ export function getMaxAge(str: string | undefined): number {
   return minimum;
 }
 
+/**
+ * If Basepath set, it needs to be removed from URL
+ *
+ * Not normalised -> error 403
+ * url: '<base-path>/assets/images/logo.svg',
+ *
+ * Normalised -> 200
+ * url: '/assets/images/logo.svg',
+ */
+export function normaliseUri(uri: string, basePath: string): string {
+  if (uri.startsWith(basePath)) {
+    uri = uri.slice(basePath.length);
+  }
+
+  return uri;
+}
+
 export async function imageOptimizer(
   basePath: string,
   imagesManifest: ImagesManifest | undefined,
@@ -116,7 +133,14 @@ export async function imageOptimizer(
   let isAbsolute: boolean;
 
   if (url.startsWith("/")) {
-    href = url;
+    // Ensure that Basepath is in the URL, otherwise, a 400 is triggered (same behaviour as Nextjs)
+    if (basePath !== "/" && !url.startsWith(basePath)) {
+      res.statusCode = 400;
+      res.end('"Basepath" set but not added to the URL');
+      return { finished: true };
+    }
+
+    href = normaliseUri(url, basePath);
     isAbsolute = false;
   } else {
     let hrefParsed: URL;

packages/libs/core/src/images/index.ts

@@ -1 +1 @@
-export { imageOptimizer } from "./imageOptimizer";
+export { imageOptimizer, normaliseUri } from "./imageOptimizer";

packages/libs/lambda-at-edge/src/image-handler.ts

@@ -15,23 +15,17 @@ import {
   handleDomainRedirects,
   setCustomHeaders
 } from "@sls-next/core/dist/module";
-import { imageOptimizer } from "@sls-next/core/dist/module/images";
+import {
+  imageOptimizer,
+  normaliseUri
+} from "@sls-next/core/dist/module/images";
 import { UrlWithParsedQuery } from "url";
 import url from "url";
 import { removeBlacklistedHeaders } from "./headers/removeBlacklistedHeaders";
 import { s3BucketNameFromEventRequest } from "./s3/s3BucketNameFromEventRequest";
 import { AwsPlatformClient } from "@sls-next/aws-common";
 
 const basePath = RoutesManifestJson.basePath;
-
-const normaliseUri = (uri: string): string => {
-  if (uri.startsWith(basePath)) {
-    uri = uri.slice(basePath.length);
-  }
-
-  return uri;
-};
-
 const isImageOptimizerRequest = (uri: string): boolean =>
   uri.startsWith("/_next/image");
 
@@ -59,7 +53,7 @@ export const handler = async (
   // No other redirects or rewrites supported for now as it's assumed one is accessing this directly.
   // But it can be added later.
 
-  const uri = normaliseUri(request.uri);
+  const uri = normaliseUri(request.uri, basePath);
 
   // Handle image optimizer requests
   const isImageRequest = isImageOptimizerRequest(uri);

packages/libs/lambda/src/handlers/image-handler.ts

@@ -11,18 +11,13 @@ import {
 import { ImagesManifest, setCustomHeaders } from "@sls-next/core/dist/module";
 import url, { UrlWithParsedQuery } from "url";
 import { LambdaManifest, RoutesManifest } from "src/types";
-import { imageOptimizer } from "@sls-next/core/dist/module/images";
+import {
+  imageOptimizer,
+  normaliseUri
+} from "@sls-next/core/dist/module/images";
 
 const basePath = RoutesManifestJson.basePath;
 
-const normaliseUri = (uri: string): string => {
-  if (uri.startsWith(basePath)) {
-    uri = uri.slice(basePath.length);
-  }
-
-  return uri;
-};
-
 const isImageOptimizerRequest = (uri: string): boolean =>
   uri.startsWith("/_next/image");
 
@@ -36,7 +31,7 @@ export const handler = async (
   // Compatibility layer required to convert from Node.js req/res <-> API Gateway
   const { req, res, responsePromise } = httpCompat(event);
 
-  const uri = normaliseUri(req.url ?? "");
+  const uri = normaliseUri(req.url ?? "", basePath);
 
   // Handle image optimizer requests
   // TODO: probably can move these to core package