Security fixes (#8081)

* use safeloader * use json responses wherever possible * remove CORS and add CSRF token * formatting fixes * add envjs back * fix baseurl test
2025-02-20 11:48:40 -06:00 · 2023-10-06 22:20:30 -05:00 · 2023-10-06 22:20:30 -05:00 · 14d2b79c72
commit 14d2b79c72
parent 9a4f970337
24 changed files with 1357 additions and 488 deletions
--- a/docker/main/rootfs/usr/local/nginx/conf/nginx.conf
+++ b/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;
--- a/docs/docs/development/contributing.md
+++ b/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).
--- a/frigate/http.py
+++ b/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 (
-            "Config successfully saved, restarting (this can take up to one minute)...",
+        return make_response(
+            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:
-        return f"{service} is not a valid service", 404
+    if not service_location:
+        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,
+        )
--- a/frigate/util/builtin.py
+++ b/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):
--- a/web/.eslintrc
+++ b/web/.eslintrc
@ -20,7 +20,6 @@
  },
  "ignorePatterns": ["*.d.ts"],
  "rules": {
-    "indent": ["error", 2, { "SwitchCase": 1 }],
    "comma-dangle": [
      "error",
      {
--- a/web/.prettierrc
+++ b/web/.prettierrc
@ -1,4 +1,5 @@
 {
  "printWidth": 120,
+  "trailingComma": "es5",
  "singleQuote": true
 }
--- a/web/test/handlers.js
+++ b/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([
--- a/web/package-lock.json
+++ b/web/package-lock.json
--- a/web/package.json
+++ b/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",
--- a/web/src/mocks/env.js
+++ b/web/src/mocks/env.js
@ -1,2 +1 @@
 export const ENV = 'test';
-export const API_HOST = 'http://base-url.local:5000/';
--- a/web/src/api/tests/index.test.jsx
+++ b/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();
  });
 });
--- a/web/src/api/baseUrl.js
+++ b/web/src/api/baseUrl.js
@ -1,2 +1 @@
-import { API_HOST } from '../env';
-export const baseUrl = API_HOST || `${window.location.protocol}//${window.location.host}${window.baseUrl || '/'}`;
+export const baseUrl = `${window.location.protocol}//${window.location.host}${window.baseUrl || '/'}`;
--- a/web/src/api/index.jsx
+++ b/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 (
--- a/web/src/components/CameraImage.jsx
+++ b/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 (
--- a/web/src/components/HistoryViewer/HistoryVideo.tsx
+++ b/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();
    }
--- a/web/src/components/MultiSelect.jsx
+++ b/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>
--- a/web/src/components/RecordingPlaylist.jsx
+++ b/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">
--- a/web/src/env.js
+++ b/web/src/env.js
@ -1,2 +1 @@
-export const ENV = import.meta.env.MODE;
-export const API_HOST = ENV === 'production' ? '' : 'http://localhost:5000/';
+export const ENV = import.meta.env.MODE;
--- a/web/src/routes/Camera.jsx
+++ b/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>
--- a/web/src/routes/CameraMap.jsx
+++ b/web/src/routes/CameraMap.jsx
@ -30,8 +30,8 @@ export default function CameraMasks({ camera }) {
    Array.isArray(motionMask)
      ? motionMask.map((mask) => getPolylinePoints(mask))
      : motionMask
-        ? [getPolylinePoints(motionMask)]
-        : []
+      ? [getPolylinePoints(motionMask)]
+      : []
  );

  const [zonePoints, setZonePoints] = useState(
@ -45,8 +45,8 @@ export default function CameraMasks({ camera }) {
        [name]: Array.isArray(objectFilters[name].mask)
          ? objectFilters[name].mask.map((mask) => getPolylinePoints(mask))
          : objectFilters[name].mask
-            ? [getPolylinePoints(objectFilters[name].mask)]
-            : [],
+          ? [getPolylinePoints(objectFilters[name].mask)]
+          : [],
      }),
      {}
    )
@ -146,7 +146,6 @@ export default function CameraMasks({ camera }) {
    }
  }, [camera, motionMaskPoints]);

-
  // Zone methods
  const handleEditZone = useCallback(
    (key) => {
@ -175,9 +174,11 @@ export default function CameraMasks({ camera }) {
  const handleCopyZones = useCallback(async () => {
    const textToCopy = `  zones:
 ${Object.keys(zonePoints)
-    .map(
-      (zoneName) => `    ${zoneName}:
-      coordinates: ${polylinePointsToPolyline(zonePoints[zoneName])}`).join('\n')}`;
+  .map(
+    (zoneName) => `    ${zoneName}:
+      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);
@ -252,21 +256,26 @@ ${Object.keys(zonePoints)
    await window.navigator.clipboard.writeText(`  objects:
    filters:
 ${Object.keys(objectMaskPoints)
-    .map((objectName) =>
-      objectMaskPoints[objectName].length
-        ? `      ${objectName}:
+  .map((objectName) =>
+    objectMaskPoints[objectName].length
+      ? `      ${objectName}:
        mask: ${polylinePointsToPolyline(objectMaskPoints[objectName])}`
-        : ''
-    )
-    .filter(Boolean)
-    .join('\n')}`);
+      : ''
+  )
+  .filter(Boolean)
+  .join('\n')}`);
  }, [objectMaskPoints]);

  const handleSaveObjectMasks = useCallback(async () => {
    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
-            restart your Frigate instance to save your changes.
+            When done, copy each mask configuration into your <code className="font-mono">config.yml</code> file restart
+            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]}
@ -487,16 +496,16 @@ function EditableMask({ onChange, points, scale, snap, width, height }) {
      {!scaledPoints
        ? null
        : scaledPoints.map(([x, y], i) => (
-          <PolyPoint
-            key={i}
-            boundingRef={boundingRef}
-            index={i}
-            onMove={handleMovePoint}
-            onRemove={handleRemovePoint}
-            x={x + MaskInset}
-            y={y + MaskInset}
-          />
-        ))}
+            <PolyPoint
+              key={i}
+              boundingRef={boundingRef}
+              index={i}
+              onMove={handleMovePoint}
+              onRemove={handleRemovePoint}
+              x={x + MaskInset}
+              y={y + MaskInset}
+            />
+          ))}
      <div className="absolute inset-0 right-0 bottom-0" onClick={handleAddPoint} ref={boundingRef} />
      <svg
        width="100%"
@ -569,8 +578,6 @@ function MaskValues({
    [onAdd]
  );

-
-
  return (
    <div className="overflow-hidden" onMouseOver={handleMousein} onMouseOut={handleMouseout}>
      <div className="flex space-x-4">
--- a/web/src/routes/Config.jsx
+++ b/web/src/routes/Config.jsx
@ -34,7 +34,7 @@ export default function Config() {
      })
      .catch((error) => {
        setSuccess('');
-        
+
        if (error.response) {
          setError(error.response.data.message);
        } else {
@ -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>
--- a/web/src/routes/Events.jsx
+++ b/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
            />
          )}
@ -419,13 +419,13 @@ export default function Events({ path, ...props }) {
            downloadEvent.end_time &&
            downloadEvent.has_snapshot &&
            !downloadEvent.plus_id && (
-            <MenuItem
-              icon={UploadPlus}
-              label={uploading.includes(downloadEvent.id) ? 'Uploading...' : 'Send to Frigate+'}
-              value="plus"
-              onSelect={() => showSubmitToPlus(downloadEvent.id, downloadEvent.label, downloadEvent.box)}
-            />
-          )}
+              <MenuItem
+                icon={UploadPlus}
+                label={uploading.includes(downloadEvent.id) ? 'Uploading...' : 'Send to Frigate+'}
+                value="plus"
+                onSelect={() => showSubmitToPlus(downloadEvent.id, downloadEvent.label, downloadEvent.box)}
+              />
+            )}
          {downloadEvent.plus_id && (
            <MenuItem
              icon={UploadPlus}
@ -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}/thumbnail.jpg`
+                                    ? `${apiHost}api/events/${event.id}/snapshot.jpg`
+                                    : `${apiHost}api/events/${event.id}/thumbnail.jpg`
                                }
                                alt={`${event.label} at ${((event?.data?.top_score || event.top_score) * 100).toFixed(
                                  0
--- a/web/src/routes/System.jsx
+++ b/web/src/routes/System.jsx
@ -334,80 +334,86 @@ 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"] && (
-                <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>
-                  </div>
-                  <div className="p-2">
-                    <Table className="w-full">
-                      <Thead>
-                        <Tr>
-                          <Th>Process</Th>
-                          <Th>P-ID</Th>
-                          <Th>FPS</Th>
-                          <Th>CPU %</Th>
-                          <Th>Memory %</Th>
-                          {config.telemetry.network_bandwidth && <Th>Network Bandwidth</Th>}
-                        </Tr>
-                      </Thead>
-                      <Tbody>
-                        <Tr key="ffmpeg" index="0">
-                          <Td>
-                            ffmpeg
-                            <Button
-                              className="rounded-full"
-                              type="text"
-                              color="gray"
-                              aria-label={cpu_usages[cameras[camera]['ffmpeg_pid']]?.['cmdline']}
-                              onClick={() => copy(cpu_usages[cameras[camera]['ffmpeg_pid']]?.['cmdline'])}
-                            >
-                              <About className="w-3" />
-                            </Button>
-                          </Td>
-                          <Td>{cameras[camera]['ffmpeg_pid'] || '- '}</Td>
-                          <Td>{cameras[camera]['camera_fps'] || '- '}</Td>
-                          <Td>{cpu_usages[cameras[camera]['ffmpeg_pid']]?.['cpu'] || '- '}%</Td>
-                          <Td>{cpu_usages[cameras[camera]['ffmpeg_pid']]?.['mem'] || '- '}%</Td>
-                          {config.telemetry.network_bandwidth && (
-                            <Td>{bandwidth_usages[cameras[camera]['ffmpeg_pid']]?.['bandwidth'] || '- '}KB/s</Td>
-                          )}
-                        </Tr>
-                        <Tr key="capture" index="1">
-                          <Td>Capture</Td>
-                          <Td>{cameras[camera]['capture_pid'] || '- '}</Td>
-                          <Td>{cameras[camera]['process_fps'] || '- '}</Td>
-                          <Td>{cpu_usages[cameras[camera]['capture_pid']]?.['cpu'] || '- '}%</Td>
-                          <Td>{cpu_usages[cameras[camera]['capture_pid']]?.['mem'] || '- '}%</Td>
-                          {config.telemetry.network_bandwidth && <Td>-</Td>}
-                        </Tr>
-                        <Tr key="detect" index="2">
-                          <Td>Detect</Td>
-                          <Td>{cameras[camera]['pid'] || '- '}</Td>
+              {cameraNames.map(
+                (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>
+                      </div>
+                      <div className="p-2">
+                        <Table className="w-full">
+                          <Thead>
+                            <Tr>
+                              <Th>Process</Th>
+                              <Th>P-ID</Th>
+                              <Th>FPS</Th>
+                              <Th>CPU %</Th>
+                              <Th>Memory %</Th>
+                              {config.telemetry.network_bandwidth && <Th>Network Bandwidth</Th>}
+                            </Tr>
+                          </Thead>
+                          <Tbody>
+                            <Tr key="ffmpeg" index="0">
+                              <Td>
+                                ffmpeg
+                                <Button
+                                  className="rounded-full"
+                                  type="text"
+                                  color="gray"
+                                  aria-label={cpu_usages[cameras[camera]['ffmpeg_pid']]?.['cmdline']}
+                                  onClick={() => copy(cpu_usages[cameras[camera]['ffmpeg_pid']]?.['cmdline'])}
+                                >
+                                  <About className="w-3" />
+                                </Button>
+                              </Td>
+                              <Td>{cameras[camera]['ffmpeg_pid'] || '- '}</Td>
+                              <Td>{cameras[camera]['camera_fps'] || '- '}</Td>
+                              <Td>{cpu_usages[cameras[camera]['ffmpeg_pid']]?.['cpu'] || '- '}%</Td>
+                              <Td>{cpu_usages[cameras[camera]['ffmpeg_pid']]?.['mem'] || '- '}%</Td>
+                              {config.telemetry.network_bandwidth && (
+                                <Td>{bandwidth_usages[cameras[camera]['ffmpeg_pid']]?.['bandwidth'] || '- '}KB/s</Td>
+                              )}
+                            </Tr>
+                            <Tr key="capture" index="1">
+                              <Td>Capture</Td>
+                              <Td>{cameras[camera]['capture_pid'] || '- '}</Td>
+                              <Td>{cameras[camera]['process_fps'] || '- '}</Td>
+                              <Td>{cpu_usages[cameras[camera]['capture_pid']]?.['cpu'] || '- '}%</Td>
+                              <Td>{cpu_usages[cameras[camera]['capture_pid']]?.['mem'] || '- '}%</Td>
+                              {config.telemetry.network_bandwidth && <Td>-</Td>}
+                            </Tr>
+                            <Tr key="detect" index="2">
+                              <Td>Detect</Td>
+                              <Td>{cameras[camera]['pid'] || '- '}</Td>

-                          {(() => {
-                            if (cameras[camera]['pid'] && cameras[camera]['detection_enabled'] == 1)
-                              return (
-                                <Td>
-                                  {cameras[camera]['detection_fps']} ({cameras[camera]['skipped_fps']} skipped)
-                                </Td>
-                              );
-                            else if (cameras[camera]['pid'] && cameras[camera]['detection_enabled'] == 0)
-                              return <Td>disabled</Td>;
+                              {(() => {
+                                if (cameras[camera]['pid'] && cameras[camera]['detection_enabled'] == 1)
+                                  return (
+                                    <Td>
+                                      {cameras[camera]['detection_fps']} ({cameras[camera]['skipped_fps']} skipped)
+                                    </Td>
+                                  );
+                                else if (cameras[camera]['pid'] && cameras[camera]['detection_enabled'] == 0)
+                                  return <Td>disabled</Td>;

-                            return <Td>- </Td>;
-                          })()}
+                                return <Td>- </Td>;
+                              })()}

-                          <Td>{cpu_usages[cameras[camera]['pid']]?.['cpu'] || '- '}%</Td>
-                          <Td>{cpu_usages[cameras[camera]['pid']]?.['mem'] || '- '}%</Td>
-                          {config.telemetry.network_bandwidth && <Td>-</Td>}
-                        </Tr>
-                      </Tbody>
-                    </Table>
-                  </div>
-                </div> )
-              ))}
+                              <Td>{cpu_usages[cameras[camera]['pid']]?.['cpu'] || '- '}%</Td>
+                              <Td>{cpu_usages[cameras[camera]['pid']]?.['mem'] || '- '}%</Td>
+                              {config.telemetry.network_bandwidth && <Td>-</Td>}
+                            </Tr>
+                          </Tbody>
+                        </Table>
+                      </div>
+                    </div>
+                  )
+              )}
            </div>
          )}

--- a/web/vite.config.ts
+++ b/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({