Svg файл не разрешен из соображений безопасности
Обновлено: 05.07.2024
По умолчанию в WordPress нельзя загружать SVG в целях безопасности. Но что делать, когда очень надо? Решение есть!
Ищем WP-разработчика! Фулл-тайм, удаленка, хорошая зарплата, соц. пакет. Подробности.Компания Boosta.
Для решения этой задачи через плагин, устанавливайте Safe SVG.
Шаг 1 - Включение SVG в список разрешенных для загрузки файлов
Для этого воспользуемся хуком upload_mimes, позволяющим изменять список доступных для загрузки файлов по MIME-типу.
Иногда этого кода достаточно, но не для всех svg файлов. Разберемся почему так.
Реальный MIME тип svg файла, который в WP определятся php функцией finfo_file() (см. код wp_check_filetype_and_ext() ) может быть двух вариантов:
- image/svg+xml — когда в коде svg есть xml заголовок.
- image/svg — когда в коде svg есть только тег <svg> , без каких либо заголовков.
Сюда нужно добавить оба эти варианта, но добавить можно только один, поэтому только этого кода недостаточно и нужен второй шаг.
Шаг 2 - Подмена mime типа SVG
Как описано выше предыдущего кода для решения проблемы недостаточно. Точнее, в результате проверки и несовпадения указанного MIME типа и реального (полученного самим WP) MIME тип будет просто обнулен. Вернуть его обратно нам поможет хук wp_check_filetype_and_ext.
Если из кода выше убрать проверку на право администратора, то код станет небезопасным и потенциально открывает дыру в защите сайта.
В коде выше добавлена проверка на версию WP. С WP 5.1.0 благодаря тикету автора этого сайта в хуке появился параметр $real_mime . Он позволяет сделать более надежную проверку файла — на уровне определения MIME типа файла по его коду, а не расширению.
Также рекомендую ограничить размер загружаемого svg файла, например не более 50кб. SVG файлы как правило маленькие и большой размер может говорить о том, что в файле какой-либо нехороший код.
Кода выше достаточно, чтобы WоrdPress разрешил загружать SVG в медиабиблиотеку. Следующий шаг чисто визуальный.
Отображение SVG в медиабиблиотеке
После проделанных шагов SVG файлы будут отображаться как документы, а не изображения:
За разметку этих блоков с изображениями отвечает код, генерируемый функцией wp_print_media_templates() из файла wp-includes/media-template.php:
Смысл кода в том, что он отобразит изображение, если
- у него есть свойство src (ссылка на изображение) и оно не равно ссылке на иконку документа (любой файл по сути документ);
- или если у изображения есть размер medium (svg файл вообще не кропается).
Файл SVG не имеет ни первого ни второго, поэтому нам нужно сымитировать самостоятельно один из этих вариантов и в этом нам поможет фильтр wp_prepare_attachment_for_js, используйте любой из вариантов по вкусу.
Вариант 1 - С выводом названия файла
Вариант 2 - Без вывода названия файла
Прекрасная статья, всё написано очень подробно! Кстати svg не всегда были запрещены для загрузки галка в элементоре решала проблеу, но я заметил что сейчас это не так.
Функцию желательно вешать на фильтр "mime_types" - так написано в ядре
прочесть можно в теле функции function wp_get_mime_types(), а фильтр "upload_mimes" использовать при удалении типов медиа.
Можно и где-то это даже наверное правильнее с точки зрения педантичности, но зачем? Задача у нас связана с загрузкой поэтому хук upload_mimes как раз нужный нам. Если просто заменить хук upload_mimes на mime_types , то код работать не будет потому что ранее в ядре на хук upload_mimes вешается функция check_upload_mimes(), которая как раз и срезает все лишнее из списка MIME типов оставляя только картинки.
Т.е. если делать через хук mime_types , как ты предлагаешь, то надо будет:
- Добавить миме тип хуком через mime_types .
- Один фиг заюзать хук upload_mimes , где еще раз сделать тоже самое что в пункте 2.
- Добавить хук на поправку миме типа.
Получается придется писать еще один лишний хук. А для чего?
Тимур, все верно, но факт остается фактом .
Факт 1: удобнее делать как написано в статье.
Факт 2: нет ни одной причины делать через хук mime_types .
Факт 3: в ядре нигде не написано что «Функцию желательно вешать на фильтр "mime_types"» - там написано не надо удалять миме типы на хуке mime_types . Цитата с хука mime_types : "This filter should be used to add, not remove, mime types. To remove mime types, use the filter." Где тут написано что не нужно добавлять миме типы на хуке upload_mimes ? Суть этой заметки в том, что это фундаментальный массив миме типов, который используется повсеместно в ядре и если из него удалить миме тип решая свою какую-то отдельную задачу - это может повлиять на другие участки кода, поэтому удалять с него нельзя ничего.
WordPress не позволяет загружать в медиатеку что попало - защищается. Файлы нестандартных (не разрешенных) типов загрузить невозможно, потому что в WP есть список допустимых форматов файлов, т.е. белый список mime-типов.
Ищем WP-разработчика! Фулл-тайм, удаленка, хорошая зарплата, соц. пакет. Подробности.Компания Boosta.
Иногда такая защита мешает, и несмотря на потенциальную опасность все же нужно иметь возможность загружать файлы нужных нам типов.
Ниже рассмотрим, как добавить тип загружаемого файла в белый список.
Вот так выглядит ошибка, если, например, попытаться загрузить файл в расширением .svg :
Процесс загрузки файла и проверка его типа
Нажали "загрузить", выбрали файл загрузили, WP отправил запрос на файл wp-admin/async-upload.php.
Далее по следующей цепочке до проверки миме типа:
Разрешаем/запрещаем типы файлов для загрузки
Для управления белым списком расширений файлов есть два хука:
upload_mimes - срабатывает раньше чем wp_check_filetype_and_ext .
Пример ниже показывает как разрешить загрузку одних типов файлов ( .doc , .djvu ) и как запретить другие ( .mp4a ) - удалить из белого списка.
По аналогии можно разрешать или запрещать любые другие типы файлов. См. Список MIME типов.
Как загружать SVG файлы
Тип SVG файла может меняться в зависимости от файла, поэтому с ним не все так просто. Подробнее смотрите в отдельной статье.
Там же можно увидеть какие могут нестандартные ситуации могут возникнуть при разрешении загрузки запрещенных типов файлов и как их решать.
Загрузка картинок с неправильным расширением
В WP предусмотрен механизм исправления расширения файла, когда оно указано неправильно. Например, мы загружаем картинку img.jpg реальный формат которой JPG. В этом случае проверка на соответствие реального MIME типа файла и его расширения не проходит и WP, на основе списка подобных соответствий, пытается установить правильное расширение и пройти проверку снова (см: wp_check_filetype_and_ext()). Если проверка проходит, то название файла изменяется на правильное.
Описанный выше механизм работает давно и многие о нём даже не догадываются. Однако его нужно учитывать, когда мы добавляем новые форматы изображений для загрузки.
Например, мы добавили WEBP формат в фильтр upload_mimes , нам также нужно учесть и этот механизм проверки соответствия расширения и mime типа, иначе мы просто не сможем загрузить картинку WEBP формата, если в названии у неё указано отличное от .webp расширение.
Сделать это можно с помощью фильтра getimagesize_mimes_to_exts, подробнее про то как все это работает, читайте в описании фильтра.
После этого хука, вы сможете загружать картинки WEBP формата, даже если в их названии указано другое расширение, например image.jpg .
Включение права unfiltered_upload
Право unfiltered_upload позволяет пользователям (ролям) загружать любые файлы, без проверки их типа.
- В обычном режиме: Редактор, Админ
- В режиме мультисайт: Супер-админ
Однако это право по умолчанию заблокировано, т.е. указанные роли не пройдут проверку if( current_user_can('unfiltered_upload') ) , несмотря на наличие у них такого права.
Как мы объясняли выше, конфигурация WordPress по умолчанию ограничивает типы файлов, которые вы можете загружать на свой сайт по соображениям безопасности.
WordPress ограничивает типы файлов, которые вы можете загружать через администратора вашего сайта – изображения, видео, документы, аудио.
По умолчанию вы можете загружать следующие типы файлов:
Картинки:
Видео :
Документы :
- .doc
- .ppt, .pptx, .pps, .ppsx
- .odt
- .xls, .xlsx
- .psd
Аудио :
Если вы пытаетесь загрузить тип файла, которого нет в приведенном выше списке, вы, скорее всего, столкнетесь с ошибкой «Извините, этот тип файла запрещен по соображениям безопасности». Или вы также увидите, что «[имя файла] не удалось загрузить».
Вот пример, где мы пытались загрузить файл .woff на наш тестовый сайт:
1. Добавьте новые разрешенные типы файлов, используя wp-config.php
WordPress включает опцию ALLOW_UNFILTERED_UPLOADS, которую вы можете включить в файле wp-config.php вашего сайта. После включения вы сможете загружать файлы любого типа в медиатеку WordPress.
Вот как это сделать, но сначала, поскольку вы будете редактировать файл wp-config.php, мы рекомендуем выполнить резервное копирование сайта, прежде чем продолжить.
Для начала подключитесь к своему сайту WordPress через FTP / SFTP. Файл wp-config.php вашего сайта находится в корневой папке, в той же папке, где находятся папки wp-admin и wp-include.
Щелкните правой кнопкой мыши, чтобы отредактировать файл или загрузить его на свой компьютер:
Как отредактировать файл wp-config.php
Затем, редактируя файл wp-config.php, добавьте следующий фрагмент кода строка:
define( 'ALLOW_UNFILTERED_UPLOADS' , true );
Где добавить код в ваш файл wp-config.php
Обязательно сохраните изменения и повторно загрузите файл, если это необходимо.
Чтобы завершить процесс, вам нужно перейти на панель управления WordPress и выйти из своей учетной записи WordPress. Затем вы можете сразу же войти в систему.
Успешная загрузка файла .woff
2. Используйте бесплатный плагин WP WP Extra Types
После установки и активации плагина перейдите в « Настройки» → «Дополнительные типы файлов» на панели инструментов WordPress.
Там вы увидите длинный список типов файлов. Установите флажок рядом с типами файлов, которые вы хотите загружать, и нажмите «Сохранить изменения» внизу:
Как разрешить типы файлов в настройках плагина
Если вы не видите тип файла, который вы хотите загрузить в список, вы также можете добавить свои собственные типы файлов внизу списка настроек плагина:
Как добавить свой собственный тип файла
Альтернативные плагины
В некоторых случаях могут быть более эффективные альтернативные плагины для включения определенных типов файлов. Например бесплатный плагин Safe SVG. Он не только включает SVG-тип файла в медиатеке WordPress, но также очищает их при загрузке.
Резюме
По умолчанию WordPress ограничивает типы файлов, которые вы можете загружать на свой сайт по соображениям безопасности.
SVG – это векторные изображения, основанные на XML, которые нередко используются сайтами и компаниями для вывода различных логотипов и иконок. Главная причина, почему они стали популярными среди разработчиков и дизайнеров – они являются масштабируемыми, меньше по размеру по сравнению с другими форматами изображений, а также имеют прекрасный вид на ретина-дисплеях. По умолчанию WordPress не позволяет загружать SVG-файлы, что связано с проблемами безопасности. Сегодня мы рассмотрим способы включения SVG в WordPress, обсудим вопросы, связанные с браузерной поддержкой формата, а также отметим проблемы, с которыми вы можете столкнуться при использовании векторного формата изображений.
Надеемся, что когда-нибудь SVG станет частью ядра WordPress, однако пока мы находимся далеко от этого.
Что такое SVG?
Как утверждает Википедия, SVG (scalable vector graphics) – это формат векторных изображений, основанный на XML. Он используется для вывода двумерной графики, поддерживает интерактивность и анимацию. Вы можете управлять изображениями с помощью кода или вашего текстового редактора. Спецификация SVG представляет собой открытый стандарт, разработанный Консорциумом Всемирной паутины в 1999 году. В настоящее время SVG используется только на 3,4% всех сайтов сети, однако, как вы можете видеть ниже, скорость его принятия растет быстрыми темами. Популярные сайты, такие как Google, Reddit, Dropbox, ESPN уже используют SVG.
Поддержка SVG браузерами
В данный момент SVG поддерживается всеми крупными десктопными и мобильными браузерами. Единственная проблема, с которой вы можете столкнуться, связана с использованием IE8. Однако в данный момент IE8 официально не поддерживается и имеет рыночную долю, равную 0,36%. Если же по какой-то причине вам требуется охватить IE8, вы можете задать резервное изображение (PNG или JPG) для ваших SVG, однако мы не будем рассматривать этот аспект. Ниже приведен список поддерживаемых браузеров:
- Internet Explorer 9, 10, 11+ и Edge
- Firefox 3+
- Chrome 4+
- Safari 3.2+
- Opera 10+
- iOS Safari 3.2+
- Opera Mini (все версии)
- Android Browser 4.4+
Преимущества SVG
SVG – векторный формат. Это означает, что изображения автоматически масштабируются в браузерах. По этой причине SVG нередко используется дизайнерами. Если вы попытаетесь увеличить масштаб PNG или JPG в таких инструментах, как Photoshop или Paint, вы не сможете этого сделать без пикселизации. С помощью SVG вы можете масштабировать изображение до бесконечности, причем оно будет выглядеть безупречно. Именно поэтому они представляют собой лучший формат изображений для использования с ретина-дисплеями.
Google индексирует SVG, что является прекрасной новостью для SEO-оптимизаторов. SVG-контент, вне зависимости от того, встроен ли он в HTML или представлен в виде отдельного файла, будет индексироваться и выводиться в поиске по изображениям Google.
SVG традиционно (не всегда) меньше по размеру, нежели PNG или JPG. С помощью SVG вы можете ускорить свой WordPress-сайт, снизив общий размер страницы. Ниже представлен один и тот же файл в разных форматах:
Как вы можете видеть, SVG позволяет добиться снижения размера в 92,51% по сравнению с JPG. По сравнению с PNG этот показатель будет 92,83%. Это достаточно впечатляющая разница в размерах файлов. Тем не менее, есть одно предостережение по этому поводу.
SVG нередко используют для не слишком детализированных изображений, таких как логотипы, иконки и т.д. В этом случае можно добиться значительного снижения размера файлов. Однако для изображений с массой деталей лучше всего использовать PNG или JPG. В этом случае SVG-изображения будут весить гораздо больше. На многих сайтах применяется гибридный подход – оба типа файлов используются для разных целей.
Также стоит упомянуть о том, что социальные сети, такие как Facebook и Twitter, не поддерживают SVG для шаринга. Поэтому, если вы используете SVG-файлы в качестве миниатюр изображений, вам придется использовать Yoast SEO и задавать PNG или JPG для OG и мета-тегов.
Почему защита SVG важна
Многие SVG-плагины в хранилище WordPress используют следующий код, который подключает MIME-тип для загрузки SVG в библиотеку WordPress. Этот способ является небезопасным! Потому не стоит использовать первые попавшиеся бесплатные WordPress-плагины для подключения SVG.
SVG обязательно должны быть очищены. Очистка (санитизация) позволяет избежать проблем с безопасностью (к примеру, инъекции кода), обойти любые конфликты и ошибки. В процессе очистки происходит шифрование данных, фильтрация и валидация строк и т.д. Для этого используется библиотека SVG-Sanitizer, которая представляет собой, как говорит сам ее автор, «достойный PHP-инструмент для очистки SVG». Вы можете посмотреть демо, чтобы увидеть библиотеку в действии.
Также очень важно проверить, кто именно имеет доступ к загрузке SVG на вашем сайте. К примеру, если у вас сайт с несколькими авторами, то в таком случае вы не будете знать, какие именно SVG-файлы были загружены, тем самым ваш сайт будет подвержен риску. Мы рекомендуем ограничивать загрузку SVG, разрешая ее только администраторам и тем, кто знаком с проблемами безопасности.
Как безопасно включить SVG в WordPress
Существует плагин WP SVG (также известный как Safe SVG), который использует библиотеку SVG-Sanitizer для загрузки изображений SVG в медиатеку WordPress. Плагин также позволяет просматривать SVG-файлы в виде обычных изображений. Вы можете скачать плагин бесплатно из каталога плагинов WordPress.
Логотип выглядит отлично на ретина-дисплеях:
Нам пришлось сделать еще одну дополнительную настройку. В браузерах IE9-11 SVG-файлы не масштабировались должным образом. Добавление ширины и высоты позволило решить эту проблему. Мы открыли header.php и внесли в него нужные параметры.
Готово! Теперь мы безопасно включили поддержку SVG в WordPress. Этот плагин не одобряется и не поддерживается разработчиками ядра WordPress, потому используйте его на свой страх и риск. Если же вы уже раньше загружали SVG, включив MIME-тип, то в таком случае обязательно перейдите на описанный выше плагин.
Если вы раньше не использовали SVG, убедитесь в том, что на вашем сервере включено GZIP-сжатие для типа файлов «image/svg+xml». Это обеспечит их компрессию и позволит загружать их гораздо быстрее. Обычно системные администраторы включают только стандартные типы файлов.
Читайте также: