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

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 mapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${city}&zoom=${zoomLevel}&size=${width}x${height}&maptype=${mapType}&key=${apiKey}`
+  const key = env.GOOGLE_STATIC_MAP_KEY
+  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`}
+    />
+  )
 }