fix(security): move mapbox token to env variable

.env.example

@@ -0,0 +1,2 @@
+DEV_URL=https://hmda-development-server.example.com
+MAPBOX_ACCESS_TOKEN=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

.eslintrc.json

@@ -119,5 +119,11 @@
   "ignorePatterns": [
     "**/*.min.js",
     "src/common/uswds/**"
-  ]
+  ],
+  "languageOptions": {
+    "globals": {
+      "import": "readonly",
+      "import.meta": "readonly"
+    }
+  }
 }

README.md

@@ -140,7 +140,12 @@ Several components of the Frontend (ex. Filing, Data Browser) require a connecti
 
 HMDA Help requires a connection to the [HMDA Institutions API](https://github.com/cfpb/hmda-platform/tree/master/institutions-api) in order to operate. You can find instructions for the running the HMDA Institutions API locally [in the README](https://github.com/cfpb/hmda-platform/blob/master/institutions-api/README.md). Note that having the HMDA Platform running is a pre-requisite to starting the HDMA Institutions API.
 
-If your development does not require this integration, `yarn start` will run the development server, opening a browser window to http://localhost:3000.
+If your development does not require this integration, you can simply:
+
+1. Copy `.env.example` to `.env` and edit the environment variables.
+  - `DEV_URL` is the URL that the frontend app will use for API requests. It should not have a trailing slash.
+  - `MAPBOX_ACCESS_TOKEN` is the access token provided by Mapbox.com for the app's embedded maps. CFPB's token can be found in our [GitHub Enterprise wiki](https://GHE/HMDA-Operations/hmda-devops/wiki/Mapbox-credentials).
+2. Run `yarn start` to start a local development server at http://localhost:3000.
 
 #### Integrating with the Filing application
 

src/data-browser/maps/MapContainer.jsx

@@ -1,43 +1,42 @@
-import React, {
-  useState,
-  useEffect,
+import mapbox from 'mapbox-gl'
+import {
+  createContext,
   useCallback,
+  useEffect,
   useRef,
-  createContext,
+  useState,
 } from 'react'
 import Alert from '../../common/Alert.jsx'
+import { getCSV, runFetch } from '../api.js'
+import fips2Shortcode from '../constants/fipsToShortcode.js'
+import DatasetDocsLink from '../datasets/DatasetDocsLink.jsx'
+import { FilterReports } from './FilterReports'
+import { MapsController } from './MapsController'
+import { MapsNavBar } from './MapsNavBar'
+import { ReportSummary } from './ReportSummary'
+import { fetchFilterData } from './filterUtils.jsx'
+import {
+  addLayers,
+  getOrigPer1000,
+  makeLegend,
+  makeStops,
+  setOutline,
+  useBias,
+} from './layerUtils.jsx'
+import './mapbox.css'
+import { buildPopupHTML, popup } from './popupUtils.jsx'
 import {
   geographies,
-  variables,
-  getValuesForVariable,
   getSelectData,
+  getValuesForVariable,
   makeCombinedDefaultValue,
   parseCombinedFilter,
+  variables,
   varNameMapping,
 } from './selectUtils.jsx'
-import {
-  setOutline,
-  getOrigPer1000,
-  makeLegend,
-  makeStops,
-  addLayers,
-  useBias,
-} from './layerUtils.jsx'
-import { popup, buildPopupHTML } from './popupUtils.jsx'
-import { fetchFilterData } from './filterUtils.jsx'
-import { runFetch, getCSV } from '../api.js'
-import fips2Shortcode from '../constants/fipsToShortcode.js'
-import mapbox from 'mapbox-gl'
 import { useReportData } from './useReportData.jsx'
-import { FilterReports } from './FilterReports'
-import { MapsNavBar } from './MapsNavBar'
-import { MapsController } from './MapsController'
-import { ReportSummary } from './ReportSummary'
-import './mapbox.css'
-import DatasetDocsLink from '../datasets/DatasetDocsLink.jsx'
 
-mapbox.accessToken =
-  'pk.eyJ1IjoiY2ZwYiIsImEiOiJodmtiSk5zIn0.VkCynzmVYcLBxbyHzlvaQw'
+mapbox.accessToken = import.meta.env.MAPBOX_ACCESS_TOKEN
 
 export const MapContext = createContext({})
 

vite.config.js

@@ -1,17 +1,45 @@
-import { defineConfig } from 'vite'
-import dotenv from 'dotenv'
 import react from '@vitejs/plugin-react'
-import svgr from 'vite-plugin-svgr'
-import { nodePolyfills } from 'vite-plugin-node-polyfills'
 import dns from 'dns'
+import dotenv from 'dotenv'
+import { defineConfig } from 'vite'
+import { nodePolyfills } from 'vite-plugin-node-polyfills'
+import svgr from 'vite-plugin-svgr'
 
 dotenv.config()
 
+if (!process.env.MAPBOX_ACCESS_TOKEN) {
+  throw new Error(
+    `
+ __   __  _______  __   __    _______  _______  ______    _______  _______  _______
+|  | |  ||       ||  | |  |  |       ||       ||    _ |  |       ||       ||       |
+|  |_|  ||   _   ||  | |  |  |    ___||   _   ||   | ||  |    ___||   _   ||_     _|
+|       ||  | |  ||  |_|  |  |   |___ |  | |  ||   |_||_ |   | __ |  | |  |  |   |
+|_     _||  |_|  ||       |  |    ___||  |_|  ||    __  ||   ||  ||  |_|  |  |   |
+  |   |  |       ||       |  |   |    |       ||   |  | ||   |_| ||       |  |   |
+  |___|  |_______||_______|  |___|    |_______||___|  |_||_______||_______|  |___|
+ _______  _______  __   __  _______  _______  __   __  ___   __    _  _______
+|       ||       ||  |_|  ||       ||       ||  | |  ||   | |  |  | ||       |
+|  _____||   _   ||       ||    ___||_     _||  |_|  ||   | |   |_| ||    ___|
+| |_____ |  | |  ||       ||   |___   |   |  |       ||   | |       ||   | __
+|_____  ||  |_|  ||       ||    ___|  |   |  |       ||   | |  _    ||   ||  |
+ _____| ||       || ||_|| ||   |___   |   |  |   _   ||   | | | |   ||   |_| |
+|_______||_______||_|   |_||_______|  |___|  |__| |__||___| |_|  |__||_______|
+
+👉 MAPBOX_ACCESS_TOKEN environment variable is not defined. Please set it in your .env file. 👈
+`,
+  )
+}
+
 dns.setDefaultResultOrder('verbatim')
 
 export default () => {
   return defineConfig({
     plugins: [react(), svgr(), nodePolyfills()],
+    define: {
+      'import.meta.env.MAPBOX_ACCESS_TOKEN': JSON.stringify(
+        process.env.MAPBOX_ACCESS_TOKEN,
+      ),
+    },
     css: {
       preprocessorOptions: {
         scss: {