Как безопасно использовать векторные изображения в WordPress

Опубликовано: 2019-06-12

Есть десятки типов файлов изображений, которые вы можете использовать для своих медиафайлов. По умолчанию WordPress поддерживает большинство наиболее популярных типов файлов изображений, включая .jpeg , .png , .gif и другие. Однако он не поддерживает векторные изображения.

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

Давай приступим к работе!

Подпишитесь на наш канал Youtube

Введение в SVG

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

<svg viewBox='0 0 105 93' xmlns='http://www.w3.org/2000/svg'></pre>
<path d='M66,0h39v93zM38,0h-38v93zM52,35l25,58h-16l-8-18h-18z' fill='#ED1C24'/>
</svg>

Вкратце, они представляют собой серию векторов, которые составляют представление логотипа Adobe с добавлением цвета:

Логотип Adobe.

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

  • Логотипы, которые вы часто захотите повторно использовать на разных платформах.
  • Значки, которые вы захотите масштабировать в зависимости от контекста.
  • Изображения, которые вы хотите анимировать, используя каскадные таблицы стилей (CSS).

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

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

Почему использование SVG может повлиять на безопасность вашего сайта

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

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

Это настолько серьезная проблема, что поддержка SVG для WordPress обсуждается уже более шести лет :

Билет Trac шестилетней давности.

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

Прямо сейчас есть несколько инструментов, которые вы можете использовать для обеспечения безопасности SVG, называемых «дезинфицирующими средствами». Однако в настоящее время, похоже, нет хороших способов реализовать их функциональность в WordPress.

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

2 способа безопасного использования векторных изображений в WordPress

В этом разделе мы рассмотрим как ручной, так и подключаемый подход к безопасному использованию SVG в WordPress. После этого вы сможете выбрать лучший вариант для своих нужд. Давайте приступим к делу!

1. Добавьте поддержку SVG вручную и очистите свой код

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

  1. Включите поддержку SVG, изменив файл functions.php .
  2. Ограничьте роли пользователей, которым вы хотите разрешить загружать файлы .svg в WordPress.
  3. Перед загрузкой продезинфицируйте каждый файл SVG.

В целом, шаги один и два выполнить несложно. Первая задача - получить доступ к вашему сайту через протокол передачи файлов (FTP) и перейти в корневую папку WordPress. Внутри найдите свой файл functions.php , откройте его и добавьте следующий код (любезно предоставлен Крисом Койером из CodePen и CSS Tricks): 

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {

  global $wp_version;
  if ( $wp_version !== '4.7.1' ) {
     return $data;
  }

  $filetype = wp_check_filetype( $filename, $mimes );

  return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
  ];

}, 10, 4 );

function cc_mime_types( $mimes ){
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );

function fix_svg() {
  echo '<style type="text/css">
        .attachment-266x266, .thumbnail img {
             width: 100% !important;
             height: auto !important;
        }
        </style>';
}
add_action( 'admin_head', 'fix_svg' );

Он выполняет две функции - позволяет загружать файлы SVG в WordPress и визуализировать их в своей медиатеке. После добавления кода сохраните изменения в файле functions.php и закройте его.

Теперь все становится немного сложнее, поскольку нам нужно предотвратить загрузку поврежденных SVG-файлов пользователями, которым мы не доверяем. Например, вы можете доверять своим редакторам и авторам загрузку правильных файлов, но не своим соавторам. Это можно сделать двумя способами:

  1. Создавайте собственные роли пользователей с ограниченным доступом или без доступа к библиотеке мультимедиа.
  2. Используйте плагин, например WP Upload Restriction, чтобы ограничить типы файлов, которые может загружать каждая роль пользователя.

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

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

2. Используйте плагин Safe SVG.

С помощью описанного выше подхода мы хотели показать вам, насколько сложной может быть безопасная реализация SVG. Это сделано для того, чтобы вы могли правильно оценить то, что делает плагин Safe SVG.

Плагин Safe SVG.

Вкратце, этот плагин решает все перечисленные ранее проблемы, в том числе:

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

Это в значительной степени плагин типа plug-and-play, и это, безусловно, самый простой подход к безопасной реализации SVG в WordPress. Если вы намерены использовать SVG, мы рекомендуем вам попробовать.

Как анимировать SVG с помощью CSS и плагинов

Если вы столкнетесь со всеми проблемами (в зависимости от используемого метода}) по внедрению SVG в WordPress, вы, вероятно, захотите получить максимальную отдачу от вложенных средств. Это означает использование CSS для анимации ваших SVG, если того требует ситуация. Есть два способа выполнить этот процесс, о котором мы говорили ранее:

  1. Анимируйте SVG вручную с помощью CSS, как и любой другой элемент.
  2. Используйте такие инструменты, как SVGator, чтобы создавать и анимировать SVG.

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

Заключение

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

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

  1. Добавьте поддержку SVG вручную и очистите свой код.
  2. Используйте плагин Safe SVG.

У вас есть вопросы о том, как безопасно использовать SVG в WordPress? Давайте поговорим о них в разделе комментариев ниже!

Миниатюра статьи: microtic / shutterstock.com