feat(SW-68): add digital signature to request

.env.local.example

@@ -43,4 +43,5 @@ PUBLIC_URL="http://localhost:3000"
 AUTH_URL="$PUBLIC_URL/api/web/auth"
 NEXTAUTH_URL="$PUBLIC_URL/api/web/auth"
 
-NEXT_PUBLIC_GOOGLE_STATIC_MAP_KEY=""
+GOOGLE_STATIC_MAP_KEY=""
+GOOGLE_STATIC_MAP_SECRET=""

components/Maps/StaticMap/index.tsx

@@ -1,6 +1,34 @@
 /* eslint-disable @next/next/no-img-element */
+import { env } from "@/env/server"
+
 import { StaticMapProps } from "@/types/components/maps/staticMap/staticMap"
 
+const crypto = require("crypto")
+const url = require("url")
+
+function removeWebSafe(safeEncodedString: string) {
+  return safeEncodedString.replace(/-/g, "+").replace(/_/g, "/")
+}
+
+function makeWebSafe(encodedString: string) {
+  return encodedString.replace(/\+/g, "-").replace(/\//g, "_")
+}
+
+function decodeBase64Hash(code: string) {
+  return Buffer.from(code, "base64")
+}
+
+function encodeBase64Hash(key: Buffer, data: string) {
+  return crypto.createHmac("sha1", key).update(data).digest("base64")
+}
+
+const createRequestUrl = function (path: string, secret: string) {
+  const uri = url.parse(path)
+  const safeSecret = decodeBase64Hash(removeWebSafe(secret))
+  const hashedSignature = makeWebSafe(encodeBase64Hash(safeSecret, uri.path))
+  return url.format(uri) + "&signature=" + hashedSignature
+}
+
 export default function StaticMap({
   city,
   width,
@@ -8,8 +36,14 @@ export default function StaticMap({
   zoomLevel,
   mapType,
 }: StaticMapProps) {
-  const apiKey = process.env.NEXT_PUBLIC_GOOGLE_STATIC_MAP_KEY
+  const key = env.GOOGLE_STATIC_MAP_KEY
-  const mapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${city}&zoom=${zoomLevel}&size=${width}x${height}&maptype=${mapType}&key=${apiKey}`
+  const secret = env.GOOGLE_STATIC_MAP_SECRET
+  const url = `https://maps.googleapis.com/maps/api/staticmap?center=${city}&zoom=${zoomLevel}&size=${width}x${height}&maptype=${mapType}&key=${key}`
 
-  return <img src={mapUrl} alt={`Map of ${city} city center`} />
+  return (
+    <img
+      src={createRequestUrl(url, secret)}
+      alt={`Map of ${city} city center`}
+    />
+  )
 }

env/server.ts

@@ -58,6 +58,8 @@ export const env = createEnv({
     SEAMLESS_LOGOUT_SV: z.string(),
     WEBVIEW_ENCRYPTION_KEY: z.string(),
     BOOKING_ENCRYPTION_KEY: z.string(),
+    GOOGLE_STATIC_MAP_KEY: z.string(),
+    GOOGLE_STATIC_MAP_SECRET: z.string(),
   },
   emptyStringAsUndefined: true,
   runtimeEnv: {
@@ -102,5 +104,7 @@ export const env = createEnv({
     SEAMLESS_LOGOUT_SV: process.env.SEAMLESS_LOGOUT_SV,
     WEBVIEW_ENCRYPTION_KEY: process.env.WEBVIEW_ENCRYPTION_KEY,
     BOOKING_ENCRYPTION_KEY: process.env.BOOKING_ENCRYPTION_KEY,
+    GOOGLE_STATIC_MAP_KEY: process.env.GOOGLE_STATIC_MAP_KEY,
+    GOOGLE_STATIC_MAP_SECRET: process.env.GOOGLE_STATIC_MAP_SECRET,
   },
 })