Security fixes (#8081)

* use safeloader

* use json responses wherever possible

* remove CORS and add CSRF token

* formatting fixes

* add envjs back

* fix baseurl test

docker/main/rootfs/usr/local/nginx/conf/nginx.conf

@@ -93,10 +93,6 @@ http {
             secure_token $args;
             secure_token_types application/vnd.apple.mpegurl;
 
-            add_header Access-Control-Allow-Headers '*';
-            add_header Access-Control-Expose-Headers 'Server,range,Content-Length,Content-Range';
-            add_header Access-Control-Allow-Methods 'GET, HEAD, OPTIONS';
-            add_header Access-Control-Allow-Origin '*';
             add_header Cache-Control "no-store";
             expires off;
         }
@@ -104,16 +100,6 @@ http {
         location /stream/ {
             add_header Cache-Control "no-store";
             expires off;
-            add_header 'Access-Control-Allow-Origin' "$http_origin" always;
-            add_header 'Access-Control-Allow-Credentials' 'true';
-            add_header 'Access-Control-Expose-Headers' 'Content-Length';
-            if ($request_method = 'OPTIONS') {
-                add_header 'Access-Control-Allow-Origin' "$http_origin";
-                add_header 'Access-Control-Max-Age' 1728000;
-                add_header 'Content-Type' 'text/plain charset=UTF-8';
-                add_header 'Content-Length' 0;
-                return 204;
-            }
 
             types {
                 application/dash+xml mpd;
@@ -126,16 +112,6 @@ http {
         }
 
         location /clips/ {
-            add_header 'Access-Control-Allow-Origin' "$http_origin" always;
-            add_header 'Access-Control-Allow-Credentials' 'true';
-            add_header 'Access-Control-Expose-Headers' 'Content-Length';
-            if ($request_method = 'OPTIONS') {
-                add_header 'Access-Control-Allow-Origin' "$http_origin";
-                add_header 'Access-Control-Max-Age' 1728000;
-                add_header 'Content-Type' 'text/plain charset=UTF-8';
-                add_header 'Content-Length' 0;
-                return 204;
-            }
 
             types {
                 video/mp4 mp4;
@@ -152,17 +128,6 @@ http {
         }
 
         location /recordings/ {
-            add_header 'Access-Control-Allow-Origin' "$http_origin" always;
-            add_header 'Access-Control-Allow-Credentials' 'true';
-            add_header 'Access-Control-Expose-Headers' 'Content-Length';
-            if ($request_method = 'OPTIONS') {
-                add_header 'Access-Control-Allow-Origin' "$http_origin";
-                add_header 'Access-Control-Max-Age' 1728000;
-                add_header 'Content-Type' 'text/plain charset=UTF-8';
-                add_header 'Content-Length' 0;
-                return 204;
-            }
-
             types {
                 video/mp4 mp4;
             }
@@ -173,17 +138,6 @@ http {
         }
 
         location /exports/ {
-            add_header 'Access-Control-Allow-Origin' "$http_origin" always;
-            add_header 'Access-Control-Allow-Credentials' 'true';
-            add_header 'Access-Control-Expose-Headers' 'Content-Length';
-            if ($request_method = 'OPTIONS') {
-                add_header 'Access-Control-Allow-Origin' "$http_origin";
-                add_header 'Access-Control-Max-Age' 1728000;
-                add_header 'Content-Type' 'text/plain charset=UTF-8';
-                add_header 'Content-Length' 0;
-                return 204;
-            }
-
             types {
                 video/mp4 mp4;
             }
@@ -235,8 +189,6 @@ http {
         }
 
         location ~* /api/.*\.(jpg|jpeg|png)$ {
-            add_header 'Access-Control-Allow-Origin' '*';
-            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
             rewrite ^/api/(.*)$ $1 break;
             proxy_pass http://frigate_api;
             proxy_pass_request_headers on;
@@ -248,10 +200,6 @@ http {
         location /api/ {
             add_header Cache-Control "no-store";
             expires off;
-
-            add_header 'Access-Control-Allow-Origin' '*';
-            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
-            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
             proxy_pass http://frigate_api/;
             proxy_pass_request_headers on;
             proxy_set_header Host $host;

docs/docs/development/contributing.md

@@ -155,10 +155,6 @@ cd web && npm install
 cd web && npm run dev
 ```
 
-#### 3a. Run the development server against a non-local instance
-
-To run the development server against a non-local instance, you will need to modify the API_HOST default return in `web/src/env.js`.
-
 #### 4. Making changes
 
 The Web UI is built using [Vite](https://vitejs.dev/), [Preact](https://preactjs.com), and [Tailwind CSS](https://tailwindcss.com).

frigate/http.py

@@ -20,6 +20,7 @@ from flask import (
     Flask,
     Response,
     current_app,
+    escape,
     jsonify,
     make_response,
     request,
@@ -73,6 +74,13 @@ def create_app(
 ):
     app = Flask(__name__)
 
+    @app.before_request
+    def check_csrf():
+        if request.method in ["GET", "HEAD", "OPTIONS", "TRACE"]:
+            pass
+        if "origin" in request.headers and "x-csrf-token" not in request.headers:
+            return jsonify({"success": False, "message": "Missing CSRF header"}), 401
+
     @app.before_request
     def _db_connect():
         if database.is_closed():
@@ -532,10 +540,14 @@ def event_thumbnail(id, max_cache_age=2592000):
                     if tracked_obj is not None:
                         thumbnail_bytes = tracked_obj.get_thumbnail()
         except Exception:
-            return "Event not found", 404
+            return make_response(
+                jsonify({"success": False, "message": "Event not found"}), 404
+            )
 
     if thumbnail_bytes is None:
-        return "Event not found", 404
+        return make_response(
+            jsonify({"success": False, "message": "Event not found"}), 404
+        )
 
     # android notifications prefer a 2:1 ratio
     if format == "android":
@@ -630,7 +642,9 @@ def event_snapshot(id):
         event = Event.get(Event.id == id, Event.end_time != None)
         event_complete = True
         if not event.has_snapshot:
-            return "Snapshot not available", 404
+            return make_response(
+                jsonify({"success": False, "message": "Snapshot not available"}), 404
+            )
         # read snapshot from disk
         with open(
             os.path.join(CLIPS_DIR, f"{event.camera}-{id}.jpg"), "rb"
@@ -652,12 +666,18 @@ def event_snapshot(id):
                             quality=request.args.get("quality", default=70, type=int),
                         )
         except Exception:
-            return "Event not found", 404
+            return make_response(
+                jsonify({"success": False, "message": "Event not found"}), 404
+            )
     except Exception:
-        return "Event not found", 404
+        return make_response(
+            jsonify({"success": False, "message": "Event not found"}), 404
+        )
 
     if jpg_bytes is None:
-        return "Event not found", 404
+        return make_response(
+            jsonify({"success": False, "message": "Event not found"}), 404
+        )
 
     response = make_response(jpg_bytes)
     response.headers["Content-Type"] = "image/jpeg"
@@ -710,10 +730,14 @@ def event_clip(id):
     try:
         event: Event = Event.get(Event.id == id)
     except DoesNotExist:
-        return "Event not found.", 404
+        return make_response(
+            jsonify({"success": False, "message": "Event not found"}), 404
+        )
 
     if not event.has_clip:
-        return "Clip not available", 404
+        return make_response(
+            jsonify({"success": False, "message": "Clip not available"}), 404
+        )
 
     file_name = f"{event.camera}-{id}.mp4"
     clip_path = os.path.join(CLIPS_DIR, file_name)
@@ -1019,7 +1043,9 @@ def config_raw():
         config_file = config_file_yaml
 
     if not os.path.isfile(config_file):
-        return "Could not find file", 410
+        return make_response(
+            jsonify({"success": False, "message": "Could not find file"}), 404
+        )
 
     with open(config_file, "r") as f:
         raw_config = f.read()
@@ -1035,7 +1061,12 @@ def config_save():
     new_config = request.get_data().decode()
 
     if not new_config:
-        return "Config with body param is required", 400
+        return make_response(
+            jsonify(
+                {"success": False, "message": "Config with body param is required"}
+            ),
+            400,
+        )
 
     # Validate the config schema
     try:
@@ -1045,7 +1076,7 @@ def config_save():
             jsonify(
                 {
                     "success": False,
-                    "message": f"\nConfig Error:\n\n{str(traceback.format_exc())}",
+                    "message": f"\nConfig Error:\n\n{escape(str(traceback.format_exc()))}",
                 }
             ),
             400,
@@ -1080,14 +1111,30 @@ def config_save():
             restart_frigate()
         except Exception as e:
             logging.error(f"Error restarting Frigate: {e}")
-            return "Config successfully saved, unable to restart Frigate", 200
+            return make_response(
+                jsonify(
+                    {
+                        "success": True,
+                        "message": "Config successfully saved, unable to restart Frigate",
+                    }
+                ),
+                200,
+            )
 
-        return (
+        return make_response(
-            "Config successfully saved, restarting (this can take up to one minute)...",
+            jsonify(
+                {
+                    "success": True,
+                    "message": "Config successfully saved, restarting (this can take up to one minute)...",
+                }
+            ),
             200,
         )
     else:
-        return "Config successfully saved.", 200
+        return make_response(
+            jsonify({"success": True, "message": "Config successfully saved."}),
+            200,
+        )
 
 
 @bp.route("/config/set", methods=["PUT"])
@@ -1127,9 +1174,20 @@ def config_set():
             )
     except Exception as e:
         logging.error(f"Error updating config: {e}")
-        return "Error updating config", 500
+        return make_response(
+            jsonify({"success": False, "message": "Error updating config"}),
+            500,
+        )
 
-    return "Config successfully updated, restart to apply", 200
+    return make_response(
+        jsonify(
+            {
+                "success": True,
+                "message": "Config successfully updated, restart to apply",
+            }
+        ),
+        200,
+    )
 
 
 @bp.route("/config/schema.json")
@@ -1179,7 +1237,10 @@ def mjpeg_feed(camera_name):
             mimetype="multipart/x-mixed-replace; boundary=frame",
         )
     else:
-        return "Camera named {} not found".format(camera_name), 404
+        return make_response(
+            jsonify({"success": False, "message": "Camera not found"}),
+            404,
+        )
 
 
 @bp.route("/<camera_name>/ptz/info")
@@ -1187,7 +1248,10 @@ def camera_ptz_info(camera_name):
     if camera_name in current_app.frigate_config.cameras:
         return jsonify(current_app.onvif.get_camera_info(camera_name))
     else:
-        return "Camera named {} not found".format(camera_name), 404
+        return make_response(
+            jsonify({"success": False, "message": "Camera not found"}),
+            404,
+        )
 
 
 @bp.route("/<camera_name>/latest.jpg")
@@ -1229,7 +1293,10 @@ def latest_frame(camera_name):
         width = int(height * frame.shape[1] / frame.shape[0])
 
         if frame is None:
-            return "Unable to get valid frame from {}".format(camera_name), 500
+            return make_response(
+                jsonify({"success": False, "message": "Unable to get valid frame"}),
+                500,
+            )
 
         if height < 1 or width < 1:
             return (
@@ -1265,7 +1332,10 @@ def latest_frame(camera_name):
         response.headers["Cache-Control"] = "no-store"
         return response
     else:
-        return "Camera named {} not found".format(camera_name), 404
+        return make_response(
+            jsonify({"success": False, "message": "Camera not found"}),
+            404,
+        )
 
 
 @bp.route("/<camera_name>/recordings/<frame_time>/snapshot.png")
@@ -1315,7 +1385,15 @@ def get_snapshot_from_recording(camera_name: str, frame_time: str):
         response.headers["Content-Type"] = "image/png"
         return response
     except DoesNotExist:
-        return "Recording not found for {} at {}".format(camera_name, frame_time), 404
+        return make_response(
+            jsonify(
+                {
+                    "success": False,
+                    "message": "Recording not found at {}".format(frame_time),
+                }
+            ),
+            404,
+        )
 
 
 @bp.route("/recordings/storage", methods=["GET"])
@@ -1517,7 +1595,15 @@ def recording_clip(camera_name, start_ts, end_ts):
 
         if p.returncode != 0:
             logger.error(p.stderr)
-            return f"Could not create clip from recordings for {camera_name}.", 500
+            return make_response(
+                jsonify(
+                    {
+                        "success": False,
+                        "message": "Could not create clip from recordings",
+                    }
+                ),
+                500,
+            )
     else:
         logger.debug(
             f"Ignoring subsequent request for {path} as it already exists in the cache."
@@ -1573,7 +1659,15 @@ def vod_ts(camera_name, start_ts, end_ts):
 
     if not clips:
         logger.error("No recordings found for the requested time range")
-        return "No recordings found.", 404
+        return make_response(
+            jsonify(
+                {
+                    "success": False,
+                    "message": "No recordings found.",
+                }
+            ),
+            404,
+        )
 
     hour_ago = datetime.now() - timedelta(hours=1)
     return jsonify(
@@ -1616,11 +1710,27 @@ def vod_event(id):
         event: Event = Event.get(Event.id == id)
     except DoesNotExist:
         logger.error(f"Event not found: {id}")
-        return "Event not found.", 404
+        return make_response(
+            jsonify(
+                {
+                    "success": False,
+                    "message": "Event not found.",
+                }
+            ),
+            404,
+        )
 
     if not event.has_clip:
         logger.error(f"Event does not have recordings: {id}")
-        return "Recordings not available", 404
+        return make_response(
+            jsonify(
+                {
+                    "success": False,
+                    "message": "Recordings not available.",
+                }
+            ),
+            404,
+        )
 
     clip_path = os.path.join(CLIPS_DIR, f"{event.camera}-{id}.mp4")
 
@@ -1697,7 +1807,15 @@ def export_recording(camera_name: str, start_time, end_time):
         else PlaybackFactorEnum.realtime,
     )
     exporter.start()
-    return "Starting export of recording", 200
+    return make_response(
+        jsonify(
+            {
+                "success": True,
+                "message": "Starting export of recording.",
+            }
+        ),
+        200,
+    )
 
 
 @bp.route("/export/<file_name>", methods=["DELETE"])
@@ -1711,7 +1829,15 @@ def export_delete(file_name: str):
         )
 
     os.unlink(file)
-    return "Successfully deleted file", 200
+    return make_response(
+        jsonify(
+            {
+                "success": True,
+                "message": "Successfully deleted file.",
+            }
+        ),
+        200,
+    )
 
 
 def imagestream(detected_frames_processor, camera_name, fps, height, draw_options):
@@ -1811,8 +1937,11 @@ def logs(service: str):
     }
     service_location = log_locations.get(service)
 
-    if not service:
+    if not service_location:
-        return f"{service} is not a valid service", 404
+        return make_response(
+            jsonify({"success": False, "message": "Not a valid service"}),
+            404,
+        )
 
     try:
         file = open(service_location, "r")
@@ -1820,4 +1949,7 @@ def logs(service: str):
         file.close()
         return contents, 200
     except FileNotFoundError as e:
-        return f"Could not find log file: {e}", 500
+        return make_response(
+            jsonify({"success": False, "message": f"Could not find log file: {e}"}),
+            500,
+        )

frigate/util/builtin.py

@@ -87,7 +87,8 @@ def load_config_with_no_duplicates(raw_config) -> dict:
     """Get config ensuring duplicate keys are not allowed."""
 
     # https://stackoverflow.com/a/71751051
-    class PreserveDuplicatesLoader(yaml.loader.Loader):
+    # important to use SafeLoader here to avoid RCE
+    class PreserveDuplicatesLoader(yaml.loader.SafeLoader):
         pass
 
     def map_constructor(loader, node, deep=False):

web/.eslintrc

@@ -20,7 +20,6 @@
   },
   "ignorePatterns": ["*.d.ts"],
   "rules": {
-    "indent": ["error", 2, { "SwitchCase": 1 }],
     "comma-dangle": [
       "error",
       {

web/.prettierrc

@@ -1,4 +1,5 @@
 {
   "printWidth": 120,
+  "trailingComma": "es5",
   "singleQuote": true
 }

web/__test__/handlers.js

@@ -1,8 +1,8 @@
 import { rest } from 'msw';
-import { API_HOST } from '../src/env';
+// import { API_HOST } from '../src/env';
 
 export const handlers = [
-  rest.get(`${API_HOST}api/config`, (req, res, ctx) => {
+  rest.get(`api/config`, (req, res, ctx) => {
     return res(
       ctx.status(200),
       ctx.json({
@@ -37,7 +37,7 @@ export const handlers = [
       })
     );
   }),
-  rest.get(`${API_HOST}api/stats`, (req, res, ctx) => {
+  rest.get(`api/stats`, (req, res, ctx) => {
     return res(
       ctx.status(200),
       ctx.json({
@@ -58,7 +58,7 @@ export const handlers = [
       })
     );
   }),
-  rest.get(`${API_HOST}api/events`, (req, res, ctx) => {
+  rest.get(`api/events`, (req, res, ctx) => {
     return res(
       ctx.status(200),
       ctx.json(
@@ -77,7 +77,7 @@ export const handlers = [
       )
     );
   }),
-  rest.get(`${API_HOST}api/sub_labels`, (req, res, ctx) => {
+  rest.get(`api/sub_labels`, (req, res, ctx) => {
     return res(
       ctx.status(200),
       ctx.json([

web/package.json

@@ -45,6 +45,7 @@
     "eslint-config-preact": "^1.3.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-jest": "^27.2.3",
+    "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-vitest-globals": "^1.4.0",
     "fake-indexeddb": "^4.0.1",
     "jsdom": "^22.0.0",

web/src/__mocks__/env.js

@@ -1,2 +1 @@
 export const ENV = 'test';
-export const API_HOST = 'http://base-url.local:5000/';

web/src/api/__tests__/index.test.jsx

@@ -18,6 +18,6 @@ describe('useApiHost', () => {
         <Test />
       </ApiProvider>
     );
-    expect(screen.queryByText('http://base-url.local:5000/')).toBeInTheDocument();
+    expect(screen.queryByText('http://localhost:3000/')).toBeInTheDocument();
   });
 });

web/src/api/baseUrl.js

@@ -1,2 +1 @@
-import { API_HOST } from '../env';
+export const baseUrl = `${window.location.protocol}//${window.location.host}${window.baseUrl || '/'}`;
-export const baseUrl = API_HOST || `${window.location.protocol}//${window.location.host}${window.baseUrl || '/'}`;

web/src/api/index.jsx

@@ -5,6 +5,9 @@ import { WsProvider } from './ws';
 import axios from 'axios';
 
 axios.defaults.baseURL = `${baseUrl}api/`;
+axios.defaults.headers.common = {
+  'X-CSRF-TOKEN': 1,
+};
 
 export function ApiProvider({ children, options }) {
   return (

web/src/components/CameraImage.jsx

@@ -58,7 +58,7 @@ export default function CameraImage({ camera, onload, searchParams = '', stretch
     if (!config || scaledHeight === 0 || !canvasRef.current) {
       return;
     }
-    img.src = `${apiHost}/api/${name}/latest.jpg?h=${scaledHeight}${searchParams ? `&${searchParams}` : ''}`;
+    img.src = `${apiHost}api/${name}/latest.jpg?h=${scaledHeight}${searchParams ? `&${searchParams}` : ''}`;
   }, [apiHost, canvasRef, name, img, searchParams, scaledHeight, config]);
 
   return (

web/src/components/HistoryViewer/HistoryVideo.tsx

@@ -56,10 +56,10 @@ export const HistoryVideo = ({
     }
 
     video.src({
-      src: `${apiHost}/vod/event/${id}/master.m3u8`,
+      src: `${apiHost}vod/event/${id}/master.m3u8`,
       type: 'application/vnd.apple.mpegurl',
     });
-    video.poster(`${apiHost}/api/events/${id}/snapshot.jpg`);
+    video.poster(`${apiHost}api/events/${id}/snapshot.jpg`);
     if (videoIsPlaying) {
       video.play();
     }

web/src/components/MultiSelect.jsx

@@ -61,8 +61,7 @@ export default function MultiSelect({ className, title, options, selection, onTo
                   className="max-h-[35px] mx-2"
                   onClick={() => onSelectSingle(item)}
                 >
-                  { (title === "Labels" && config.audio.listen.includes(item)) ? ( <SpeakerIcon /> ) : ( <CameraIcon /> ) }
+                  {title === 'Labels' && config.audio.listen.includes(item) ? <SpeakerIcon /> : <CameraIcon />}
-                  
                 </Button>
               </div>
             </div>

web/src/components/RecordingPlaylist.jsx

@@ -153,7 +153,7 @@ export function EventCard({ camera, event }) {
     <Link className="" href={`/recording/${camera}/${format(start, 'yyyy-MM-dd/HH/mm/ss')}`}>
       <div className="flex flex-row mb-2">
         <div className="w-28 mr-4">
-          <img className="antialiased" loading="lazy" src={`${apiHost}/api/events/${event.id}/thumbnail.jpg`} />
+          <img className="antialiased" loading="lazy" src={`${apiHost}api/events/${event.id}/thumbnail.jpg`} />
         </div>
         <div className="flex flex-row w-full border-b">
           <div className="w-full text-gray-700 font-semibold relative pt-0">

web/src/env.js

@@ -1,2 +1 @@
 export const ENV = import.meta.env.MODE;
-export const API_HOST = ENV === 'production' ? '' : 'http://localhost:5000/';

web/src/routes/Camera.jsx

@@ -212,7 +212,7 @@ export default function Camera({ camera }) {
               key={objectType}
               header={objectType}
               href={`/events?cameras=${camera}&labels=${encodeURIComponent(objectType)}`}
-              media={<img src={`${apiHost}/api/${camera}/${encodeURIComponent(objectType)}/thumbnail.jpg`} />}
+              media={<img src={`${apiHost}api/${camera}/${encodeURIComponent(objectType)}/thumbnail.jpg`} />}
             />
           ))}
         </div>

web/src/routes/CameraMap.jsx

@@ -146,7 +146,6 @@ export default function CameraMasks({ camera }) {
     }
   }, [camera, motionMaskPoints]);
 
-
   // Zone methods
   const handleEditZone = useCallback(
     (key) => {
@@ -177,7 +176,9 @@ export default function CameraMasks({ camera }) {
 ${Object.keys(zonePoints)
   .map(
     (zoneName) => `    ${zoneName}:
-      coordinates: ${polylinePointsToPolyline(zonePoints[zoneName])}`).join('\n')}`;
+      coordinates: ${polylinePointsToPolyline(zonePoints[zoneName])}`
+  )
+  .join('\n')}`;
 
     if (window.navigator.clipboard && window.navigator.clipboard.writeText) {
       // Use Clipboard API if available
@@ -207,7 +208,10 @@ ${Object.keys(zonePoints)
   const handleSaveZones = useCallback(async () => {
     try {
       const queryParameters = Object.keys(zonePoints)
-        .map((zoneName) => `cameras.${camera}.zones.${zoneName}.coordinates=${polylinePointsToPolyline(zonePoints[zoneName])}`)
+        .map(
+          (zoneName) =>
+            `cameras.${camera}.zones.${zoneName}.coordinates=${polylinePointsToPolyline(zonePoints[zoneName])}`
+        )
         .join('&');
       const endpoint = `config/set?${queryParameters}`;
       const response = await axios.put(endpoint);
@@ -266,7 +270,12 @@ ${Object.keys(objectMaskPoints)
     try {
       const queryParameters = Object.keys(objectMaskPoints)
         .filter((objectName) => objectMaskPoints[objectName].length > 0)
-        .map((objectName, index) => `cameras.${camera}.objects.filters.${objectName}.mask.${index}=${polylinePointsToPolyline(objectMaskPoints[objectName])}`)
+        .map(
+          (objectName, index) =>
+            `cameras.${camera}.objects.filters.${objectName}.mask.${index}=${polylinePointsToPolyline(
+              objectMaskPoints[objectName]
+            )}`
+        )
         .join('&');
       const endpoint = `config/set?${queryParameters}`;
       const response = await axios.put(endpoint);
@@ -324,8 +333,8 @@ ${Object.keys(objectMaskPoints)
       <Card
         content={
           <p>
-            When done, copy each mask configuration into your <code className="font-mono">config.yml</code> file
+            When done, copy each mask configuration into your <code className="font-mono">config.yml</code> file restart
-            restart your Frigate instance to save your changes.
+            your Frigate instance to save your changes.
           </p>
         }
         header="Warning"
@@ -336,7 +345,7 @@ ${Object.keys(objectMaskPoints)
 
       <div className="space-y-4">
         <div className="relative">
-          <img ref={imageRef} src={`${apiHost}/api/${camera}/latest.jpg`} />
+          <img ref={imageRef} src={`${apiHost}api/${camera}/latest.jpg`} />
           <EditableMask
             onChange={handleUpdateEditable}
             points={'subkey' in editing ? editing.set[editing.key][editing.subkey] : editing.set[editing.key]}
@@ -569,8 +578,6 @@ function MaskValues({
     [onAdd]
   );
 
-
-
   return (
     <div className="overflow-hidden" onMouseOver={handleMousein} onMouseOut={handleMouseout}>
       <div className="flex space-x-4">

web/src/routes/Config.jsx

@@ -61,9 +61,9 @@ export default function Config() {
 
     let yamlModel;
     if (editor.getModels().length > 0) {
-      yamlModel = editor.getModel(modelUri)
+      yamlModel = editor.getModel(modelUri);
     } else {
-      yamlModel = editor.createModel(config, 'yaml', modelUri)
+      yamlModel = editor.createModel(config, 'yaml', modelUri);
     }
 
     setDiagnosticsOptions({
@@ -74,7 +74,7 @@ export default function Config() {
       format: true,
       schemas: [
         {
-          uri: `${apiHost}/api/config/schema.json`,
+          uri: `${apiHost}api/config/schema.json`,
           fileMatch: [String(modelUri)],
         },
       ],
@@ -100,10 +100,10 @@ export default function Config() {
           <Button className="mx-2" onClick={(e) => handleCopyConfig(e)}>
             Copy Config
           </Button>
-          <Button className="mx-2" onClick={(e) => onHandleSaveConfig(e, "restart")}>
+          <Button className="mx-2" onClick={(e) => onHandleSaveConfig(e, 'restart')}>
             Save & Restart
           </Button>
-          <Button className="mx-2" onClick={(e) => onHandleSaveConfig(e, "saveonly")}>
+          <Button className="mx-2" onClick={(e) => onHandleSaveConfig(e, 'saveonly')}>
             Save Only
           </Button>
         </div>

web/src/routes/Events.jsx

@@ -402,7 +402,7 @@ export default function Events({ path, ...props }) {
               icon={Snapshot}
               label="Download Snapshot"
               value="snapshot"
-              href={`${apiHost}/api/events/${downloadEvent.id}/snapshot.jpg?download=true`}
+              href={`${apiHost}api/events/${downloadEvent.id}/snapshot.jpg?download=true`}
               download
             />
           )}
@@ -411,7 +411,7 @@ export default function Events({ path, ...props }) {
               icon={Clip}
               label="Download Clip"
               value="clip"
-              href={`${apiHost}/api/events/${downloadEvent.id}/clip.mp4?download=true`}
+              href={`${apiHost}api/events/${downloadEvent.id}/clip.mp4?download=true`}
               download
             />
           )}
@@ -492,7 +492,7 @@ export default function Events({ path, ...props }) {
 
                 <img
                   className="flex-grow-0"
-                  src={`${apiHost}/api/events/${plusSubmitEvent.id}/snapshot.jpg`}
+                  src={`${apiHost}api/events/${plusSubmitEvent.id}/snapshot.jpg`}
                   alt={`${plusSubmitEvent.label}`}
                 />
 
@@ -619,7 +619,7 @@ export default function Events({ path, ...props }) {
                     <div
                       className="relative rounded-l flex-initial min-w-[125px] h-[125px] bg-contain bg-no-repeat bg-center"
                       style={{
-                        'background-image': `url(${apiHost}/api/events/${event.id}/thumbnail.jpg)`,
+                        'background-image': `url(${apiHost}api/events/${event.id}/thumbnail.jpg)`,
                       }}
                     >
                       <StarRecording
@@ -776,8 +776,8 @@ export default function Events({ path, ...props }) {
                                 className="flex-grow-0"
                                 src={
                                   event.has_snapshot
-                                    ? `${apiHost}/api/events/${event.id}/snapshot.jpg`
+                                    ? `${apiHost}api/events/${event.id}/snapshot.jpg`
-                                    : `${apiHost}/api/events/${event.id}/thumbnail.jpg`
+                                    : `${apiHost}api/events/${event.id}/thumbnail.jpg`
                                 }
                                 alt={`${event.label} at ${((event?.data?.top_score || event.top_score) * 100).toFixed(
                                   0

web/src/routes/System.jsx

@@ -334,8 +334,13 @@ export default function System() {
             <ActivityIndicator />
           ) : (
             <div data-testid="cameras" className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4">
-              {cameraNames.map((camera) => ( config.cameras[camera]["enabled"] && (
+              {cameraNames.map(
-                <div key={camera} className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow">
+                (camera) =>
+                  config.cameras[camera]['enabled'] && (
+                    <div
+                      key={camera}
+                      className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow"
+                    >
                       <div className="capitalize text-lg flex justify-between p-4">
                         <Link href={`/cameras/${camera}`}>{camera.replaceAll('_', ' ')}</Link>
                         <Button onClick={(e) => onHandleFfprobe(camera, e)}>ffprobe</Button>
@@ -406,8 +411,9 @@ export default function System() {
                           </Tbody>
                         </Table>
                       </div>
-                </div> )
+                    </div>
-              ))}
+                  )
+              )}
             </div>
           )}
 

web/vite.config.ts

@@ -9,6 +9,13 @@ export default defineConfig({
   define: {
     'import.meta.vitest': 'undefined',
   },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:5000'
+      }
+    }
+  },
   plugins: [
     preact(),
     monacoEditorPlugin.default({