Как использовать SVG-файлы в WordPress

Хотите отобразить логотип или значки в сверхвысоком качестве, но WordPress не принимает файлы SVG? Это разочаровывает, но будьте уверены: вы не одиноки. Тема SVG в ВордПресс вызывает столько же интереса, сколько и разочарования.

Этот легкий формат, идеально подходящий для всех размеров и производительности, по умолчанию заблокирован. Почему так? Как его безопасно активировать? И, прежде всего, как избежать ловушек, которые могут поставить сайт под угрозу?

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

Что такое формат SVG

Вы часто сталкиваетесь с этой аббревиатурой, но что она означает? SVG значит Scalable Vector Graphics (масштабируемая векторная графика).

Это открытый формат, основанный на XML (Extensible Markup Language) и созданный в 1998 году W3C (консорциумом, разрабатывающим стандарты и рекомендации для Интернета).

Что это меняет? Довольно много. Пиксельное изображение имеет фиксированный размер. Увеличьте его, и вы увидите размытые квадраты. Это называется пикселизацией.

SVG — это не набор точек. Это набор математических инструкций, XML-код, который говорит браузеру: «Нарисуй здесь круг, там линию, с этим цветом».

Он идеально подходит для логотипов, значков и простых иллюстраций. Короче говоря, для всех тех графических элементов, которые должны выглядеть безупречно как на маленьком экране смартфона, так и на огромном 4K-дисплее.

Для логотипов, значков и простой графики SVG — это формат выбора для современного высокопроизводительного веб-сайта.

Как работают файлы SVG

Проще говоря, файл SVG — это текстовый документ. Да, вы правильно прочитали. Если откроете файл .svg в простом текстовом редакторе, то не увидите изображение, а строки кода, похожие на HTML. Это XML.

Эта текстовая природа также дает ему суперспособности:

• Легкость. Простой логотип SVG часто весит всего несколько килобайт. Это намного меньше, чем его эквивалент в формате PNG. Это большое преимущество для скорости загрузки страницы и SEO.
• Манипулирование. Поскольку это код, вы можете изменять его напрямую с помощью CSS или JavaScript. Поменять цвет, анимировать форму и т. д.
• Доступность. Текст, содержащийся в SVG, может быть прочитан поисковыми системами и программами чтения с экрана, что является плюсом для доступности.

Эта кодовая структура является одновременно его сильной и слабой стороной, особенно в экосистеме WP.

Почему, спросите вы? Дело в том, что суть проблемы заключается в том, что ВордПресс был разработан для растровых картинок, таких как JPEG или PNG.

Самая популярная в мире CMS изначально не готова интерпретировать и, прежде всего, защищать файл, который на самом деле может быть потенциальным скриптом.

Поддерживает ли WordPress файлы SVG изначально?

Ответ прост и понятен: нет. Если когда-нибудь пытались загрузить SVG в медиатеку WordPress, вам, вероятно, знакомо разочаровывающее сообщение: «Этот файл не может быть обработан веб-сервером».

Это раздражает, не так ли? Так почему же сложилась такая патовая ситуация? Основную причину можно описать одним словом: безопасность.

В отличие от картинок JPG или PNG, SVG основаны на коде XML. Это делает их уязвимыми для атак.

Чтобы избежать худшего, WordPress предпочитает закрыть дверь. Но не паникуйте, мы подробнее рассмотрим связанные с этим риски.

Какие проблемы безопасности связаны с SVG-файлами в WordPress

Это суть проблемы. Как мы уже видели, SVG — это XML-документ. А там, где есть XML, есть возможность скрыть код. Не только инструкции по рисованию, но и потенциально вредоносные скрипты, такие как JavaScript.

Злоумышленник может создать SVG-файл, который выглядит как простой логотип, но содержит скрипт, способный украсть информацию о сеансе, перенаправить пользователей на мошеннический сайт или использовать другие уязвимости проекта.

Вот почему ВордПресс по умолчанию блокирует все. Он не различает чистые SVG-файлы и опасные. Он применяет принцип предосторожности.

Решение? Никогда не разрешайте SVG-файлы без защитной сети. Вы должны «очистить» каждый документ, прежде чем принимать его.

В следующем разделе я объясню, как это сделать. Но прежде чем приступить к делу, давайте рассмотрим наиболее распространенные угрозы, если используете SVG, содержащий скрипт, который может нанести ущерб без вашего ведома:

• Атаки XSS (Cross-Site Scripting). Скрипт JavaScript, скрытый в SVG, может быть выполнен в браузере посетителя. Затем он может украсть конфиденциальные данные, такие как сессионные куки, или перенаправить их на фишинговый сайт.
• Атаки XML External Entity (XXE). Проще говоря, SVG с ловушкой может дать серверу команду предоставить ему доступ к конфиденциальным файлам, таким как важный документ wp-config.php.
• Атаки типа «отказ в обслуживании» (DoS). SVG, разработанный как очень сложный, может исчерпать ресурсы вашего сервера при отображении. В результате сайт становится медленным или даже полностью недоступным.

Решением не является отказ от SVG. Единственным жизнеспособным решением является «санитарная очистка». Это включает чистку кода SVG, чтобы оставить только необходимое и удалить все опасные скрипты. Это обязательный шаг.

Как включить поддержку SVG в WordPress

Итак, вы готовы интегрировать SVG в свой сайт WordPress? Но как это сделать, если WP по умолчанию блокирует их?

Есть 2 основных способа. Один из них прост, безопасен и рекомендуется для 99% пользователей. Другой более технический и, давайте признаем, потенциально рискованный, если его плохо освоить.

Мой экспертный совет? Не рисуйте. Давайте посмотрим, почему метод с плагином является лучшим способом совместить простоту и безопасность.

Метод 1: добавьте файл SVG в WordPress с помощью плагина SVG Support

Поговорим о самом простом и безопасном способе загрузить файл SVG в WordPress: с помощью специального плагина.

SVG Support является эталоном в этой области (в качестве альтернативы также есть Safe SVG).

Это очень популярный плагин (более 1 млн активных установок), с хорошим рейтингом (4,8 из 5 звезд) и, что самое главное, активно поддерживаемый. Это является гарантией безопасности.

Главное преимущество этого расширения? Он не просто открывает дверь для SVG. Он делает гораздо больше: автоматически очищает их при каждой загрузке.

Чтобы воспользоваться этим, перейдите в меню «Плагины» > «Добавить плагины» на дашборде WordPress.

В строке поиска введите «SVG Support», затем установите и активируйте его.

Благодаря встроенной библиотеке очистки SVG Support нейтрализует любой вредоносный код, который может скрываться в файле.

При желании можете выполнить более сложную настройку через меню «Настройки» > «SVG Support».

По умолчанию только администратор сайта может загружать SVG в ВордПресс (опция «Ограничить загрузку SVG для?»).

Если по какой-то конкретной причине понадобится добавить другого пользователя, сделать это можно здесь:

В остальном можно обойтись настройками по умолчанию. Это должно успокоить вас.

В принципе, больше не должно появляться следующее сообщение при перетаскивании файла в формате SVG в редактор контента WP.

Метод 2: добавление файла SVG с фрагментом кода в functions.php

Если у вас уже есть солидные технические знания и профиль разработчика, метод 2 предполагает добавление фрагмента кода в файл functions.php темы WordPress.

Для этого понадобятся:

• Редактор кода, такой как Notepad++, Visual Studio Code, Brackets или Sublime Text.
• Доступ к вашему FTP-клиенту (Filezilla, Cyberduck, Transmit и т. д.) для отправки файла на сайт.

Не изменяйте functions.php напрямую. Нужно использовать дочернюю тему. В качестве альтернативы, плагин, такой как Code Snippets, позволяет добавлять функциональность из админ-панели WordPress. В любом случае, это подходит только для опытных пользователей.

Прежде чем я предоставлю код для использования, необходимо помнить о 2 важных моментах:

1. Используйте этот фрагмент кода только в том случае, если уверены в своих силах и хорошо знаете PHP. В противном случае избегайте этого способа и выберите надежный плагин, такой как SVG Support.
2. Перед добавлением любого кода сделайте резервную копию сайта (файлы + база данных) с помощью специального плагина, такого как UpdraftPlus, или специализированного инструмента для обслуживания проектов WP, такого как WP Umbrella.

Теперь давайте посмотрим на рассматриваемый фрагмент кода:

<?php
/**
 * Authorize the import of SVG files in WordPress
 */

// 1. Authorize the SVG MIME type
function wpmarmite_allow_svg_uploads( $mimes ) {
    $mimes['svg']  = 'image/svg+xml';
    $mimes['svgz'] = 'image/svg+xml';
    return $mimes;
}
add_filter( 'upload_mimes', 'wpmarmite_allow_svg_uploads' );

// 2. Secure the display in the media library
function wpmarmite_fix_svg_display() {
    echo '
        .attachment-266x266, .thumbnail img {
            width: 100% !important;
            height: auto !important;
        }
        .media-icon img[src$=".svg"] {
            width: 100% !important;
            height: auto !important;
        }
    ';
}
add_action( 'admin_head', 'wpmarmite_fix_svg_display' );

// 3. Basic sanitizing and securing of uploaded SVGs
function wpmarmite_sanitize_svg( $file ) {
    if ( isset($file['type']) && $file['type'] === 'image/svg+xml' ) {

        // Reading file
        $svg = file_get_contents( $file['tmp_name'] );

        // Simple verification (true security requires complete sanitization)
        if ( stripos( $svg, '<script' ) !== false ) {
            $file['error'] = 'The SVG contains scripts and has been blocked for security reasons.';
        }
    }
    return $file;
}
add_filter( 'wp_handle_upload_prefilter', 'wpmarmite_sanitize_svg' );

SVG в WordPress: лучшие практики

Теперь у вас есть четкое представление о проблемах, связанных с использованием файлов SVG в WP.

Это не так уж и сложно. Просто нужно принять правильные меры предосторожности, чтобы воспользоваться их легкостью и гибкостью, не создавая проблем с безопасностью.

Чтобы вы ничего не забыли, давайте завершим статью списком важных моментов, о которых нужно помнить. Считайте его своей страховкой перед каждой загрузкой:

• Всегда очищайте SVG-файлы: будь то с помощью плагина или вручную, никогда не загружайте документы без их предварительной очистки. Это обязательное условие.
• Ограничьте права доступа. Только администраторы сайта должны иметь право загружать SVG-файлы. Настройте свои плагины соответствующим образом.
• Используйте надежные источники. Отдавайте предпочтение SVG-файлам, которые создали сами или загрузили из надежных источников. Будьте осторожны с случайными SVG-документами, найденными в Интернете.
• Подумайте об отображении. Если ваши миниатюры SVG не показываются правильно в медиатеке, некоторые плагины или фрагменты кода могут исправить эту проблему, принудительно запустив определение размеров.

Заключение

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