6411 Емец Т.В. Лаб.2 Вар.2 by Cure232 · Pull Request #121 · itsecd/websec-2

Cure232 · 2026-04-09T10:22:49Z

Это лабораторная работа №2 по дисциплине «Безопасность веб-приложений». По варианту 2 реализован веб-аналог «Прибывалки» для электричек: поиск станций, просмотр расписания по станции, выбор любимых станций, просмотр маршрутов проходящих между станций и через станции и адаптация интерфейса под мобильные устройства. Реализовано при помощи технологий React, Node.js и др. Более полное описание и инструкция по запуску в README.md.

AvtoBBus · 2026-04-10T08:17:30Z

backend/package.json

+    "dev": "nodemon server.js"
+  },
+  "dependencies": {
+    "axios": "^1.6.0",


не совсем рекомендую использовать axios

https://habr.com/ru/companies/first/articles/1017244/

AvtoBBus · 2026-04-10T08:18:49Z

backend/services/yandexApi.js

+const BASE_URL = 'https://api.rasp.yandex.net/v3.0/';
+const STATIONS_CACHE_TTL_MS = 10 * 60 * 1000;


Это тоже можно в .env

AvtoBBus · 2026-04-10T08:19:35Z

frontend/src/api/api.js

@@ -0,0 +1,41 @@
+const BASE = 'http://localhost:5000/api';


Тоже в .env

AvtoBBus · 2026-04-10T08:22:01Z

frontend/src/api/api.js

+export async function searchStation(query) {
+  const data = await requestJson(`${BASE}/search-station?query=${encodeURIComponent(query)}`);
+  return Array.isArray(data) ? data : [];
+}
+
+export async function getStationsInBounds(bounds) {
+  const params = new URLSearchParams({
+    minLat: String(bounds.minLat),
+    minLng: String(bounds.minLng),
+    maxLat: String(bounds.maxLat),
+    maxLng: String(bounds.maxLng),
+    zoom: String(bounds.zoom)
+  });
+  const data = await requestJson(`${BASE}/search-station?${params.toString()}`);
+  return Array.isArray(data) ? data : [];
+}
+
+export async function getSchedule(code) {
+  const data = await requestJson(`${BASE}/station-schedule?station=${encodeURIComponent(code)}`);
+  return Array.isArray(data) ? data : [];
+}
+
+export async function getRoutes(from, to) {
+  const data = await requestJson(
+    `${BASE}/train-route?from=${encodeURIComponent(from)}&to=${encodeURIComponent(to)}`
+  );
+  return Array.isArray(data) ? data : [];
+}


Сборка итогового url для запроса, должна выполнять функция requestJson, остальные, кто вызывают её должны просто отдавать объекты туда предварительно валидировав данные (условно проверять, что при запросе станции по esr_code у вас код точно состоит из N цифр и не содержит букв)

AvtoBBus · 2026-04-10T08:22:58Z

frontend/src/components/StationAutocomplete.jsx

+    if (inputRef.current) {
+      const rect = inputRef.current.getBoundingClientRect();
+      setDropdownStyle({


if (!inputRef.current) return; /* остальной код */

AvtoBBus · 2026-04-10T08:24:41Z

frontend/src/components/StationAutocomplete.jsx

+  let dropdownContent = null;
+  if (loading) {
+    dropdownContent = <div className="autocomplete-loading-item">Поиск…</div>;
+  } else if (suggestions.length === 0 && value.trim() !== '') {
+    dropdownContent = <div className="autocomplete-empty-item">Ничего не найдено</div>;
+  } else if (suggestions.length > 0) {
+    dropdownContent = suggestions.map((station, idx) => (
+      <button
+        key={station.code || idx}
+        type="button"
+        className="autocomplete-item"
+        onClick={() => handleSelect(station)}
+      >
+        {station.displayTitle || station.title}
+      </button>
+    ));
+  }


Вот это лучше организовать как функцию типо renderDropDown

AvtoBBus · 2026-04-10T08:25:05Z

frontend/src/components/StationMap.jsx

+const DEFAULT_CENTER = [53.1959, 50.1008];
+const DEFAULT_ZOOM = 10;


Либо в .env, либо в файл конфига

AvtoBBus · 2026-04-10T08:25:51Z

frontend/src/components/StationMap.jsx

@@ -0,0 +1,122 @@
+import { CircleMarker, MapContainer, Popup, TileLayer, useMapEvents } from 'react-leaflet';
+import { useEffect } from 'react';
+import 'leaflet/dist/leaflet.css';


Не советую использовать Leaflet, так как это достаточно низкоуровневая библиотека для работы с картой (читать про OpenLayers)

AvtoBBus · 2026-04-10T08:30:08Z

frontend/src/pages/RoutePage.jsx

+    const timerId = setTimeout(async () => {
+      try {
+        const stations = await searchStation(value);
+        if (requestId !== fromRequestId.current) return;
+        setFromStations(stations);
+        if (stations.length === 0) setMessage('Станция отправления не найдена.');
+      } catch {
+        if (requestId !== fromRequestId.current) return;
+        setFromStations([]);
+        setMessage('Ошибка поиска станции отправления.');
+      } finally {
+        if (requestId === fromRequestId.current) setFromLoading(false);
+      }
+    }, 350);
+
+    return () => clearTimeout(timerId);


Честно говоря затрудняюсь сказать, что вы хотели этим сделать, выглядит как некий debounce, но если что, такие функции уже готовые и реализованные уже есть

AvtoBBus · 2026-04-10T08:30:14Z

frontend/src/pages/RoutePage.jsx

+    const timerId = setTimeout(async () => {
+      try {
+        const stations = await searchStation(value);
+        if (requestId !== toRequestId.current) return;
+        setToStations(stations);
+        if (stations.length === 0) setMessage('Станция прибытия не найдена.');
+      } catch {
+        if (requestId !== toRequestId.current) return;
+        setToStations([]);
+        setMessage('Ошибка поиска станции прибытия.');
+      } finally {
+        if (requestId === toRequestId.current) setToLoading(false);
+      }
+    }, 350);


Аналогично

AvtoBBus · 2026-04-10T09:03:29Z

frontend/src/pages/RoutePage.jsx

+    setTimeout(async () => {
+      if (requestId !== viewportRequestId.current) return;
+      try {
+        const stations = await getStationsInBounds(viewport);
+        if (requestId !== viewportRequestId.current) return;
+        setMapStations(stations);
+      } catch {
+        if (requestId !== viewportRequestId.current) return;
+        setMapStations([]);
+      }
+    }, 220);


Благодаря вот такой штуке у вас может произойти момент с тем, что вы превысите количество запросов по ключу к API яндекса, если же реализовывать такие вещи в реальном продакшене, где настроено ограничение запросов, то вы будете ловить 429, что негативно скажется на UX.

Самое логичное решение, исходя из вашего желания сделать перезапрос при изменении позиционирования на карте, состоит аж из 2 вариантов:

Запросить один раз все станции и отрисовать их все сразу (тот же OpenLayers не рендерит те объекты, которые не видно)

Выполнять запрос через debounce. Т.е. если меняется видимая зона, то ставиться таймер на условные 1.5 секунды и если в течении этого времени поле видимости не поменялось, то выполнять запрос

AvtoBBus · 2026-04-10T09:04:44Z

frontend/src/pages/StationPage.jsx

+const FAVORITES_STORAGE_KEY = 'favoriteStationSchedules';
+
+function loadFavoritesFromStorage() {
+  if (typeof window === 'undefined') {
+    return [];
+  }
+
+  try {
+    const raw = window.localStorage.getItem(FAVORITES_STORAGE_KEY);
+    if (!raw) {
+      return [];
+    }
+
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) {
+      return [];
+    }
+
+    return parsed
+      .filter(
+        item =>
+          item &&
+          typeof item === 'object' &&
+          item.station &&
+          typeof item.station === 'object' &&
+          typeof item.station.code === 'string'
+      )
+      .map(item => ({ station: item.station }));
+  } catch {
+    return [];
+  }
+}
+
+function saveFavoritesToStorage(favorites) {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  try {
+    window.localStorage.setItem(FAVORITES_STORAGE_KEY, JSON.stringify(favorites));
+  } catch {
+    // Ignore storage errors (private mode, quota, etc.) so schedule page stays usable.
+  }
+}


Всю логику работы с localStorage вынести в отдельный файл.

Проверять доступность localStorage лучше вот так

AvtoBBus · 2026-04-10T09:05:15Z

frontend/src/pages/StationPage.jsx

+  useEffect(() => {
+    const value = query.trim();
+    if (!value) {
+      setSuggestions([]);
+      setSearchLoading(false);
+      return undefined;
+    }
+
+    const requestId = ++searchRequestId.current;
+    setSearchLoading(true);
+    setMessage('');
+
+    const timerId = setTimeout(async () => {
+      try {
+        const foundStations = await searchStation(value);
+        if (requestId !== searchRequestId.current) return;
+        setSuggestions(foundStations);
+        if (foundStations.length === 0) {
+          setMessage('Станции не найдены.');
+        }
+      } catch {
+        if (requestId !== searchRequestId.current) return;
+        setSuggestions([]);
+        setMessage('Не удалось выполнить поиск станции.');
+      } finally {
+        if (requestId === searchRequestId.current) {
+          setSearchLoading(false);
+        }
+      }
+    }, 350);
+
+    return () => clearTimeout(timerId);
+  }, [query]);
+
+  const handleViewportChange = viewport => {
+    const requestId = ++viewportRequestId.current;
+    setTimeout(async () => {
+      if (requestId !== viewportRequestId.current) return;
+      try {
+        const stations = await getStationsInBounds(viewport);
+        if (requestId !== viewportRequestId.current) return;
+        setMapStations(stations);
+      } catch {
+        if (requestId !== viewportRequestId.current) return;
+        setMapStations([]);
+      }
+    }, 220);
+  };


Аналогично про debounce и частоту запросов

AvtoBBus · 2026-04-10T09:05:40Z

frontend/src/App.jsx

+        <Route path="/" element={<StationPage />} />
+        <Route path="/station" element={<StationPage />} />
+        <Route path="/route" element={<RoutePage />} />
+        {/*<Route path="/favorites" element={<FavoritesPage />} />*/}


Если не используете, можно удалить

Cure232 added 2 commits April 6, 2026 05:03

Добавлен backend для работы с API Яндекс.Расписаний

c2d148b

frontend added, backend upgraded for map integration

ef5ad41

AvtoBBus self-requested a review April 10, 2026 08:13

AvtoBBus reviewed Apr 10, 2026

View reviewed changes

AvtoBBus requested changes Apr 10, 2026

View reviewed changes

		const BASE_URL = 'https://api.rasp.yandex.net/v3.0/';
		const STATIONS_CACHE_TTL_MS = 10 * 60 * 1000;

		const DEFAULT_CENTER = [53.1959, 50.1008];
		const DEFAULT_ZOOM = 10;

Conversation

Cure232 commented Apr 9, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants