Use env vars and proxy for maps

app/routes/bso-management.js

@@ -6,10 +6,32 @@ const router = express.Router()
 
 */
 
-router.get('/bso-objects/bso/bso-internal-details', function (req, res) {
-  res.render('bso-objects/bso/bso-internal-details.html', {
-    mapsAPI: process.env.MAPS_API
-  })
+const OS_VTS_BASE = 'https://api.os.uk/maps/vector/v1/vts'
+
+// Proxies OS Vector Tile API requests so the API key never reaches the browser
+router.get(['/os-maps', '/os-maps/*path'], async function (req, res) {
+  const apiKey = process.env.MAPS_API
+  if (!apiKey) return res.status(500).send('MAPS_API is not set')
+
+  const path = (req.params.path || []).join('/')
+  if (path.includes('..')) return res.sendStatus(400)
+
+  const upstream = new URL(path ? `${OS_VTS_BASE}/${path}` : OS_VTS_BASE)
+  for (const [k, v] of Object.entries(req.query)) {
+    if (k !== 'key') upstream.searchParams.set(k, String(v))
+  }
+  upstream.searchParams.set('key', apiKey)
+
+  const response = await fetch(upstream)
+  const contentType = response.headers.get('content-type') || 'application/octet-stream'
+  res.status(response.status)
+  res.set('Content-Type', contentType)
+
+  // OS embeds the key in URLs inside style/TileJSON responses, so strip it out
+  if (/json|xml|text/.test(contentType)) {
+    return res.send((await response.text()).replaceAll(`key=${apiKey}`, 'key='))
+  }
+  res.send(Buffer.from(await response.arrayBuffer()))
 })
 
 module.exports = router

app/views/bso-objects/bso/bso-internal-details.html

@@ -218,16 +218,17 @@ <h2 class="nhsuk-heading-m">BSO area</h2>
 
   <script>
 
-    const apiKey = '';
-
     landmarks.forEach(({ lat, lng, type, name }) => {
       const icon = landmarkIcons[type] || landmarkIcons.default;
       L.marker([lat, lng], { icon }).bindPopup(name).addTo(map);
     });
 
     // Load and display vector tile layer on the map.
     const gl = L.maplibreGL({
-        style: 'https://api.os.uk/maps/vector/v1/vts/resources/styles?srs=3857&key=' + apiKey
+        style: '/os-maps/resources/styles?srs=3857',
+        transformRequest: (url) => ({
+          url: url.replace('https://api.os.uk/maps/vector/v1/vts', location.origin + '/os-maps')
+        })
     }).addTo(map);
 
     const geojsonLayer = L.geoJSON(geojsonData, {

app/views/bso-objects/locations/location-details.html

@@ -203,8 +203,6 @@ <h2 class="nhsuk-heading-s nhsuk-u-margin-bottom-0">Location notes for participa
   </script>
 
   <script>
-    const apiKey = '';
-
     const landmarks = [
       { lat: 50.817976594630125, lng: -0.36331999221959543, type: 'location', name: 'Worthing Hospital' }
     ];
@@ -216,7 +214,10 @@ <h2 class="nhsuk-heading-s nhsuk-u-margin-bottom-0">Location notes for participa
 
     // Load and display vector tile layer on the map.
     const gl = L.maplibreGL({
-        style: 'https://api.os.uk/maps/vector/v1/vts/resources/styles?srs=3857&key=' + apiKey
+        style: '/os-maps/resources/styles?srs=3857',
+        transformRequest: (url) => ({
+          url: url.replace('https://api.os.uk/maps/vector/v1/vts', location.origin + '/os-maps')
+        })
     }).addTo(map);
 
     map.setView([landmarks[0].lat, landmarks[0].lng], 13);