Как проверить SVG-файл на скрытые JavaScript-скрипты — пошаговая инструкция для безопасного использования - PEFile

Содержание

Как проверить SVG-файл на скрытые JavaScript-скрипты — пошаговая инструкция для безопасного использования
Почему SVG с JavaScript — это опасно
Как найти скрипты в SVG — 3 способа
Способ 1: Откройте SVG в Блокноте (или любом редакторе текста)
Способ 2: Используйте онлайн-инструмент — быстро и безопасно
Способ 3: Проверка через браузер (для продвинутых)
Таблица: Какие способы проверки подходят для разных ситуаций
Что делать, если вы нашли скрипт
Частые ошибки
Как лучше делать — рекомендации
Что выбрать — в зависимости от ситуации
Итог: что делать прямо сейчас

Как проверить SVG-файл на скрытые JavaScript-скрипты — пошаговая инструкция для безопасного использования

Вы скачали SVG-файл с сайта, импортировали его в дизайн-редактор — и вдруг сайт начал вести себя странно: появляются всплывающие окна, уходит трафик, или браузер жалуется на подозрительную активность. Это не ошибка в дизайне. Это может быть вредоносный JavaScript, спрятанный внутри SVG.

SVG — это не просто картинка. Это XML-документ, который может содержать не только формы и цвета, но и полноценный JavaScript. И если вы используете SVG-файлы с ненадёжных источников — вы рискуете открыть дверь в ваш сайт, приложение или даже локальную систему.

Я не говорю «не используйте SVG». Я говорю: проверяйте их, как проверяете exe-файл. И сейчас я покажу, как это сделать быстро, без программирования и без паники.

Почему SVG с JavaScript — это опасно

SVG-файлы — это текст. Их можно открыть в Блокноте. И если вы откроете случайный SVG, скачанный с бесплатного архива, вы можете увидеть что-то вроде этого:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue"/>
  <script>
    alert('Ваш сайт скомпрометирован');
    window.location.href = 'https://malicious-site.com/steal-data';
  </script>
</svg>

Это не шутка. Такие файлы реально используются в атаках. Браузер выполняет JavaScript в SVG так же, как в HTML. Если вы вставляете такой файл на сайт через <img src="logo.svg"> — он не сработает. Но если вы вставляете его как <object>, <iframe> или просто копируете код SVG прямо в HTML — всё, скрипт запустится.

И вот тут начинается проблема:

Вы используете SVG-логотипы с сайта-агрегатора и не проверяете их.
Клиент прислал SVG с иконками, а вы просто вставили его в сайт.
Вы скачали SVG из GitHub, потому что он «выглядит красиво».

Всё это — риски. И они реальны. В 2022 году была атака через SVG-файл в почтовом клиенте: пользователь открывал письмо — и скрипт в SVG автоматически отправлял данные его сессии на сервер злоумышленников.

Как найти скрипты в SVG — 3 способа

Не нужно устанавливать спецсофт. Всё, что вам нужно — это текстовый редактор и 2 минуты.

Способ 1: Откройте SVG в Блокноте (или любом редакторе текста)

Найдите файл на компьютере, кликните правой кнопкой — «Открыть с помощью» — выберите Блокнот, Notepad++, VS Code — что угодно, только не графический редактор.

Ищите теги:

<script>
<script type="text/javascript">
<script xlink:href="..."> — редко, но бывает

Если вы видите что-то вроде:

<script>
  document.addEventListener('click', function() {
    window.open('https://evil.com/tracker?id=' + Math.random());
  });
</script>

— это красный флаг. Не используйте этот файл. Удалите его.

Способ 2: Используйте онлайн-инструмент — быстро и безопасно

Если вы не хотите открывать файлы вручную — используйте SVG Viewer (или аналоги типа SVG Viewer). Это веб-инструменты, которые показывают структуру SVG в виде дерева.

Загрузите файл — и сразу увидите, есть ли в нём скрипты. Большинство таких сервисов выделяют <script> блоки красным или показывают предупреждение.

Плюс: вы не скачиваете файл на компьютер — значит, даже если в нём есть вредоносный код, он не запустится на вашей системе.

Способ 3: Проверка через браузер (для продвинутых)

Создайте пустой HTML-файл:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <!-- Вставьте содержимое SVG прямо сюда -->
  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
    ... ваш SVG-код ...
  </svg>
</body>
</html>

Откройте его в браузере (Chrome, Firefox). Нажмите F12 → вкладка «Консоль».

Если в SVG есть скрипт — он выполнится, и вы увидите ошибку или сообщение в консоли. Если скрипт пытается перенаправить страницу — вы сразу это заметите.

Это не просто проверка — это тест на реальное поведение. Если скрипт работает — он работает. И это плохо.

Таблица: Какие способы проверки подходят для разных ситуаций

Ситуация	Лучший способ проверки	Скорость	Безопасность	Требует навыков
Вы скачали SVG с сайта и хотите быстро проверить	Онлайн-сервис (SVG Viewer)	10–30 сек	Высокая (файл не скачивается)	Нет
Вы работаете с сотнями SVG-файлов	Открытие в текстовом редакторе + поиск по <script>	1–2 мин на файл	Средняя (файл открыт локально)	Нет
Вы разработчик и встраиваете SVG в HTML	Проверка в браузере с консолью	1–3 мин	Высокая (видно реальное поведение)	Немного
Вы получили SVG от клиента и не доверяете источнику	Все три способа — подряд	5–10 мин	Максимальная	Нет

Что делать, если вы нашли скрипт

Сценарии:

Скрипт — это ваш код. Вы его сами добавили. Тогда: убедитесь, что он безопасен, не обращается к внешним доменам, не собирает данные. Удалите всё, что не нужно.
Скрипт — это анимация. Иногда SVG-анимации используют JavaScript для плавных переходов. Но это редкость. Почти всегда анимация делается через CSS или атрибуты SVG (например, <animate>). Если вы видите document.getElementById или addEventListener — это не анимация, это потенциальный вред.
Скрипт — чужой, неизвестный. Удалите его. Не пытайтесь «починить» или «обезвредить». Удалите файл. Закажите новый SVG без скриптов. Или создайте его сами.

Если вы используете SVG как иконки — не нужно JavaScript. Никогда. Иконки — это формы, цвета, пути. Всё. Никаких событий, никаких скриптов. Если вы видите скрипт в иконке — это ошибка или угроза.

Частые ошибки

Вот что делают люди — и почему это плохо:

«Я просто вставил SVG как картинку — он не сработает». Неверно. Если вы вставляете SVG как <img> — скрипты не работают. Но если вы вставляете его как <object>, <embed>, <iframe> или копируете код SVG прямо в HTML — всё работает. И вы не всегда это понимаете.
«Я открыл в Figma — всё выглядит нормально». Figma и другие редакторы игнорируют JavaScript. Они показывают только визуальную часть. Скрипт остаётся, но вы его не видите. Это ложное чувство безопасности.
«Это же бесплатный SVG с сайта». Бесплатные архивы — частая цель для вредоносных файлов. Люди загружают SVG, чтобы сэкономить время — и получают бэкдор.
«Я удалил тег <script> — всё в порядке». Не всегда. Иногда скрипт встроен в атрибуты: onload="alert(1)" или onclick="location.href='...'". Проверяйте все атрибуты, начинающиеся с on.

Как лучше делать — рекомендации

Вот ваш чек-лист для безопасного использования SVG:

Всегда проверяйте SVG с ненадёжных источников. Даже если он «от клиента» — проверьте.
Используйте SVG только как <img> или CSS-фоны. Это самый безопасный способ. Скрипты в таких случаях не выполняются.
Если вы встраиваете SVG прямо в HTML — убедитесь, что он чистый. Удалите всё, что не относится к визуальной части: <script>, <style>, on* атрибуты.
Используйте инструменты для очистки SVG. Например, SVGOMG — он не только уменьшает размер, но и удаляет скрипты, комментарии, ненужные метаданные. Включите опцию «Remove Script Elements».
Создавайте свои SVG-иконки. Используйте Figma, Illustrator, Inkscape — и экспортируйте как «Minify SVG» или «Optimize». Не копируйте код из интернета без проверки.
Настройте CI/CD. Если вы разработчик — добавьте в сборку проверку SVG на наличие скриптов. Например, с помощью svgo с плагином removeScriptElement.

Что выбрать — в зависимости от ситуации

Если вы:

Дизайнер, который получает SVG от клиента — откройте файл в SVGOMG, включите «Remove Script Elements», экспортируйте и отправьте обратно. Не используйте оригинал.
Веб-разработчик, вставляющий SVG в сайт — всегда используйте <img src="icon.svg">, если SVG не должен быть интерактивным. Если нужна анимация — используйте CSS-анимации внутри SVG, а не JavaScript.
Администратор, который проверяет сайт на уязвимости — сканируйте все SVG-файлы на сервере с помощью grep -r "<script>" /path/to/your/site/ в терминале. Удалите все, что найдёте.
Пользователь, который скачал SVG с сайта — не открывайте его в браузере. Не вставляйте в сайт. Проверьте в SVG Viewer или Блокноте — и если есть скрипт — удалите.

Итог: что делать прямо сейчас

Вы не должны бояться SVG. Но вы должны к ним относиться как к исполняемым файлам. Не как к картинкам. Как к программам.

Вот что вам нужно сделать:

Найдите все SVG-файлы, которые вы используете на сайте или в проекте.
Откройте каждый в текстовом редакторе.
Найдите <script> или атрибуты вроде onload, onclick.
Если нашли — удалите файл. Или очистите его через SVGOMG.
В будущем — никогда не используйте SVG с ненадёжных источников без проверки.

Один проверенный SVG-файл — безопаснее 100 случайных. Лучше потратить 2 минуты на проверку, чем неделю на восстановление сайта после взлома.

Информация в этой статье носит ознакомительный характер. Если вы не уверены в безопасности файла или не знаете, как правильно его обработать — обратитесь к специалисту по кибербезопасности или веб-разработке.