Вступление: или откуда ноги растут

Если вы когда‑нибудь работали с результатами сканирования 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
+-------------------+     +-------------------+     +-------------------+
|   Вкладки          |     |  Рендер активной  |     |  Состояние        |
|   (динамические)  | <-> |  вкладки          | <-> |  фильтров и       |
|   + скролл        |     |  (с сохранением   |     |  сортировки       |
+-------------------+     |  состояния)       |     |  для каждой       |
                          +-------------------+     |  вкладки          |
                                                    +-------------------+
Версия 3.1
Версия 3.1

Теперь можно было открыть несколько отчётов и переключаться между ними — как в браузере. Это кардинально упростило сравнение.


Версия 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 — это:

  1. Полностью клиентский инструмент, не требующий установки.

  2. Поддержка множества файлов с вкладками.

  3. Множественные фильтры (по тексту, уровню, статусу, источнику, дате, наличию CVE).

  4. Группировка по CVE и наглядная статистика.

  5. Экспорт в CSV и печать.

  6. Адаптивный дизайн и тёмная тема.

  7. Сохранение состояния в URL и централизованный обзор всех файлов.

Объём кода — около 1500 строк. Написан на чистом JavaScript без фреймворков. Все данные обрабатываются локально, ничего не уходит на сервер — что важно для конфиденциальной информации.

Как ИИ помог, а где я управлял.

90% кода написано нейросетью. Я генерировал запросы, уточнял, тестировал, исправлял логические ошибки, дорабатывал стили и проверял кроссбраузерность. Без ИИ я бы потратил недели, а так — несколько вечеров.

При этом я сам:

  • Проектировал архитектуру (как хранить данные, как организовать вкладки, фильтры).

  • Определял приоритеты фич (что важно сейчас, что потом).

  • Тестировал на реальных данных и находил баги.

  • Дорабатывал UX и поправлял его код.

Такой тандем «человек‑архитектор + ИИ‑кодер» оказался, как мне кажется, продуктивным. Я получил инструмент, который решает реальные задачи, и при этом могу поделиться им с коллегами.


Чему я научился

Этот проект — отличный пример того, как современные ИИ‑инструменты могут ускорить разработку в разы, если грамотно ставить задачи и проверять результат.

Главные уроки которые вынес я:

  • Не бойтесь начинать с малого. Первая версия была уродливой, но она решала главную проблему.

  • Добавляйте фичи, когда они реально нужны, а не «на всякий случай».

  • ИИ — отличный помощник, но окончательное решение всегда за вами. Проверяйте код, особенно логику и безопасность.

  • Вайбкодинг — это не магия, а партнёрство с машиной. Чем чётче вы формулируете задачу, тем лучше результат.

Если вы столкнулись с похожей задачей — попробуйте такой подход. Это работает!

Комментарии (2)


  1. chemtech
    14.07.2026 11:06

    А где ссылка на github ?


  1. HOMPAIN
    14.07.2026 11:06

    Почему вы для себя решили делать приложение в с красивым вэб интерфейсом, а в статью вставили схемы в текстовом формате?