Вступление: или откуда ноги растут
Если вы когда‑нибудь работали с результатами сканирования OpenSCAP или любого другого OVAL‑совместимого сканера, то знаете эту боль: получаете XML‑файл под сотню мегабайт, внутри — тысячи определений уязвимостей. Открыть его в браузере? Бесполезно. В текстовом редакторе? Глаза сломаешь. В Excel? Он просто зависнет, а если и откроет, то структура будет нечитаемой.
Мне, как сотруднику поддержки, пришлось анализировать такие отчёты по запросу нашей ИБ службы. Ну как всегда, им нужно, а мы делаем.
Нужно было быстро понять: сколько критических уязвимостей, какие из них уже устранены, по каким CVE идёт работа. И, конечно, хотелось сравнивать результаты с разных машин. Ручной разбор — это часы работы и гарантированные ошибки.
В общем, я решил написать свой инструмент. Но есть нюанс: я не фронтенд‑разработчик, мой основной стек — Python и Bash. Писать сложный одностраничник на чистом JavaScript с нуля я бы не осилил за разумное время. Да, когда-то пилил сайты, понимание есть, но скилов уже не осталось. Поэтому я пошёл по пути современного разработчика — вайбкодингу. А тому же меня натолкнула статья учителя физики, ссылку не могу дать, не найду уже, который написал собственный инструмент именно таким способом.
Решив, а чем я хуже, стал формулировать задачи, проектировал архитектуру, а код генерировала нейросеть. Взял на себя роли архитектора, тестировщика и продакт‑менеджера в одном лице.
Так родился OVAL Viewer. Сейчас это полноценное веб‑приложение, которое работает прямо в браузере, без сервера, и закрывает 90% моих ежедневных задач. А ИБ тоже довольны.
В этой статье я расскажу, как мы с ИИ эволюционировали инструмент от простого парсера до удобного решения. Где то даже картинки покажу, куда уж без них, чтобы было наглядно видно, как менялся инструмент.
Есть, конечно, стандартный инструмент у Openscap, который через стандартный же вызов делает "красиво". Но....
$ sudo oscap oval eval --report /tmp/oval-report.html /usr/share/openscap/definitions/cve-oval.xml

Коротко об SCAP
SCAP (Security Content Automation Protocol) — спецификация, которая определяет три процесса: поиск и исправление уязвимостей, автоматическую настройку конфигураций, а также оценку уровня безопасности.
SCAP включает четыре языка: XCCDF, OVAL, OCIL, ARF; четыре схемы идентификации: CCE, CPE, SWID, CVE и две метрики: CVSS, CCSS.
Основные компоненты SCAP — языки XCCDF и OVAL. XCCDF и OVAL детально рассмотрены тут.
XCCDF (Extensible Configuration Checklist Description Format) — язык, который описывает контрольные списки настроек безопасности и связывает другие компоненты SCAP.
OVAL (Open Vulnerability and Assessment Language) — декларативный язык логических утверждений. OVAL описывает уязвимости и необходимое состояние конфигурации информационной системы.
XCCDF содержит наборы требований к информационным системам, а OVAL — инструкции для интерпретатора, которые эти требования формализуют. Интерпретатор — специальный сканер, который понимает язык SCAP.
Версия 1.0: «Основы»
Первая версия закладывала фундамент: загрузка OVAL‑результатов в формате XML, парсинг определений уязвимостей и вывод их в виде таблицы. Пользователь мог видеть:
· Идентификатор уязвимости (CVE, BDU, ROS и др.); · Название и описание; · Уровень критичности; · Статус (устранена / не устранена); · Ссылки на внешние источники.

Уже тогда была реализована базовая цветовая индикация для уровней критичности и статусов, что позволяло быстро оценивать общую картину.
Я попросил ИИ сделать страницу, которая загружает XML и выводит таблицу. Нейросеть предложила использовать нативный DOMParser и вытаскивать все теги, смотреть атрибут result: если true — уязвимость есть, если false — исправлена.
По клику на кнопку «Подробнее» открывалось модальное окно с описанием, ссылками и CVE. Это был мой первый диалог с ИИ: я просил — он генерировал, я проверял и правил.

Этот минимальный цикл уже решал главную задачу: я мог загрузить файл и за пару секунд увидеть общую картину. Конечно, это был сырой прототип. Но он уже экономил мне время на анализ.
Версия 2.0: «Фильтрация и поиск»
Второй релиз внешне не поменялся, но добавил возможности, без которых сложно представить работу с большими объёмами данных:
Поиск по всем текстовым полям (ID, название, CVE, описание);
Фильтры по уровню критичности, статусу, источнику (CVE, BDU, ROS);
Фильтр по дате выявления уязвимости;
Сортировка по любому столбцу таблицы (ID, название, уровень, дата, статус).
Это превратило OVAL Viewer из статичного просмотрщика в инструмент для целенаправленного анализа. ИИ помог реализовать все эти фильтры и сортировку на чистом JavaScript, а я добавил интерфейсные элементы (выпадающие списки, поля ввода, иконки сортировки).
Псевдосхема версии 2.0:
+-------------------+ +-------------------+ +-------------------+ | Загрузка XML | | Парсинг | | Хранилище: | | (один файл) | --> | + извлечение | --> | массив entries | +-------------------+ | всех полей | +-------------------+ +-------------------+ | v +-------------------+ +-------------------+ +-------------------+ | Фильтры: | | Рендер таблицы | | Сортировка по | | - поиск | <-> | (с учетом | <-> | столбцам | | - уровень | | фильтров) | | (клик по | | - статус | +-------------------+ | заголовку) | | - источник | | +-------------------+ | - дата | v +-------------------+ +-------------------+ | Модальное окно | | (детали) | +-------------------+
Теперь я мог быстро находить конкретные уязвимости и фокусироваться на самых критичных.
Версия 3.0: «Многодокументный интерфейс (вкладки)»
Критическим улучшением стала поддержка одновременной работы с несколькими файлами. Теперь можно загружать несколько OVAL‑отчётов и переключаться между ними через вкладки. Каждая вкладка сохраняет собственное состояние фильтров и сортировки, что позволяет сравнивать результаты сканирования без потери контекста.
Для удобства навигации по множеству открытых вкладок была реализована прокрутка и кнопки скролла.
Я попросил ИИ переработать структуру: хранилище данных в Map, динамическое создание вкладок, уникальные идентификаторы. Нейросеть справилась быстро, я лишь подправил обработку дублирующихся имён файлов.
Псевдосхема версии 3.0:
+-------------------+ +-------------------+ +-------------------+ | Загрузка XML | | Парсинг | | Хранилище: | | (несколько | --> | + извлечение | --> | Map<tabId, data> | | файлов) | | системной инфо | +-------------------+ +-------------------+ +-------------------+ | v +-------------------+ +-------------------+ +-------------------+ | Вкладки | | Рендер активной | | Состояние | | (динамические) | <-> | вкладки | <-> | фильтров и | | + скролл | | (с сохранением | | сортировки | +-------------------+ | состояния) | | для каждой | +-------------------+ | вкладки | +-------------------+

Теперь можно было открыть несколько отчётов и переключаться между ними — как в браузере. Это кардинально упростило сравнение.
Версия 4.0: «Детализация и группировка»
Версия 4.0 была нацелена на углублённый анализ каждой уязвимости:
Модальное окно с подробной информацией по выбранной уязвимости: полное описание, критерии проверки (XML‑блок criteria) и исходный XML‑код определения.

Группировка по CVE — если несколько определений ссылаются на один CVE, они объединяются в одну строку, что упрощает подсчёт уникальных проблем.
Экспорт отфильтрованных данных в CSV для дальнейшей обработки в табличных редакторах.
ИИ написал логику группировки с использованием Map, а также добавил вкладки внутри модального окна для переключения между информацией, критериями и исходным XML.
Псевдосхема версии 4.0:
+-------------------+ +-------------------+ +-------------------+ | Загрузка XML | | Парсинг | | Хранилище: | | (несколько) | --> | + извлечение | --> | Map<tabId, data> | +-------------------+ | системной инфо | +-------------------+ +-------------------+ | v +-------------------+ +-------------------+ +-------------------+ | Группировка | | Рендер таблицы | | Фильтры, | | по CVE | <-> | (объединённые | <-> | поиск, | | (переключатель) | | строки) | | сортировка | +-------------------+ +-------------------+ +-------------------+ | v +-------------------+ +-------------------+ +-------------------+ | Модальное окно | | Экспорт CSV | | Пагинация | | (3 вкладки: | | (кнопка) | | (постраничный | | инфо, критерии, | +-------------------+ | вывод) | | XML) | +-------------------+ +-------------------+
Так же этот релиз сделал интерфейс более дружелюбным и информативным:

Тёмная тема — автоматическое переключение и сохранение выбора в localStorage.
Системная информация (имя хоста, ОС, версия, архитектура, сетевые интерфейсы) теперь отображается в свёрнутом блоке над таблицей.
Статистика по уязвимостям — общее количество, устранённые / не устранённые, а также гистограмма распределения по уровням критичности.
Улучшенная навигация — скролл вкладок, счётчик открытых файлов.
Умные теги для идентификаторов (CVE, BDU, ROS) с возможностью копирования по клику и ссылками на внешние базы (ROS, BDU, ФСТЭК).

ИИ сгенерировал CSS для тёмной темы, а также логику статистики и гистограмм. Теги с копированием и ссылками были реализованы с помощью обработчиков событий.
Этот релиз превратил OVAL Viewer в приятный и удобный инструмент, которым хотелось пользоваться каждый день.
Версия 5.0.0: «Сводная информация и навигация по файлам»
Его собственный код был передан ему же на анализ и выявлено, что можно его улучшить. Код был переписан практически полностью.
Эта версия вывела OVAL Viewer на новый уровень управления множеством отчётов:
·Кнопка «?» в шапке открывает модальное окно со сводной таблицей по всем загруженным файлам. В таблице выводятся:

Имя файла (суффикс -oval-results.xml автоматически удаляется);
Количество не устранённых уязвимостей (только файлы с ненулевым значением);
Время проверки (извлекается из скана или генератора).
Сортировка в модальном окне — по имени файла (по возрастанию) и по количеству не устранённых уязвимостей (по убыванию по умолчанию, чтобы самые проблемные файлы были сверху).
Кликабельные имена файлов — при клике на имя в сводной таблице модальное окно закрывается, а соответствующая вкладка активируется, что позволяет мгновенно перейти к детальному анализу нужного отчёта.
Цветовая индикация вкладок: · Зелёный — 0 не устранённых уязвимостей; · Оранжевый — от 1 до 100; · Красный — более 100.
Фильтрация файлов — в сводном окне отображаются только файлы с хотя бы одной не устранённой уязвимостью; если таких нет — выводится информационное сообщение.

ИИ написал код для сбора статистики по всем вкладкам, сортировки в модальном окне, а также логику переключения вкладок по клику. Цветовая индикация реализована через динамическое добавление классов CSS.

Псевдосхема версии 5.0.0:
+-------------------+ +-------------------+ +-------------------+ | Загрузка XML | | Парсинг | | Хранилище: | | (несколько) | --> | + извлечение | --> | Map<tabId, data> | +-------------------+ | системной инфо | +-------------------+ +-------------------+ | v +-------------------+ +-------------------+ +-------------------+ | Индикация | | Рендер таблицы | | Все фильтры, | | вкладок | <-> | (все фичи v4) | <-> | группировка, | | (цвет по | +-------------------+ | пагинация | | количеству | | +-------------------+ | уязвимостей) | v +-------------------+ +-------------------+ +-------------------+ | Модальное окно | | Центральный | | "Информация о | <-> | обзор всех | | файлах" | | файлов с | | (список всех | | уязвимостями | | файлов с >0 | | (сортировка, | | неустранённых) | | переход) | +-------------------+ +-------------------+
Теперь можно было одним кликом увидеть, на какие хосты нужно обратить внимание в первую очередь, и мгновенно перейти к нужному отчёту.
Что в итоге?
Сейчас OVAL Viewer — это:
Полностью клиентский инструмент, не требующий установки.
Поддержка множества файлов с вкладками.
Множественные фильтры (по тексту, уровню, статусу, источнику, дате, наличию CVE).
Группировка по CVE и наглядная статистика.
Экспорт в CSV и печать.
Адаптивный дизайн и тёмная тема.
Сохранение состояния в URL и централизованный обзор всех файлов.
Объём кода — около 1500 строк. Написан на чистом JavaScript без фреймворков. Все данные обрабатываются локально, ничего не уходит на сервер — что важно для конфиденциальной информации.
Как ИИ помог, а где я управлял.
90% кода написано нейросетью. Я генерировал запросы, уточнял, тестировал, исправлял логические ошибки, дорабатывал стили и проверял кроссбраузерность. Без ИИ я бы потратил недели, а так — несколько вечеров.
При этом я сам:
Проектировал архитектуру (как хранить данные, как организовать вкладки, фильтры).
Определял приоритеты фич (что важно сейчас, что потом).
Тестировал на реальных данных и находил баги.
Дорабатывал UX и поправлял его код.
Такой тандем «человек‑архитектор + ИИ‑кодер» оказался, как мне кажется, продуктивным. Я получил инструмент, который решает реальные задачи, и при этом могу поделиться им с коллегами.
Чему я научился
Этот проект — отличный пример того, как современные ИИ‑инструменты могут ускорить разработку в разы, если грамотно ставить задачи и проверять результат.
Главные уроки которые вынес я:
Не бойтесь начинать с малого. Первая версия была уродливой, но она решала главную проблему.
Добавляйте фичи, когда они реально нужны, а не «на всякий случай».
ИИ — отличный помощник, но окончательное решение всегда за вами. Проверяйте код, особенно логику и безопасность.
Вайбкодинг — это не магия, а партнёрство с машиной. Чем чётче вы формулируете задачу, тем лучше результат.
Если вы столкнулись с похожей задачей — попробуйте такой подход. Это работает!
Комментарии (2)

HOMPAIN
14.07.2026 11:06Почему вы для себя решили делать приложение в с красивым вэб интерфейсом, а в статью вставили схемы в текстовом формате?
chemtech
А где ссылка на github ?