如何在 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>

简而言之，这些是构成 Adob​​e 徽标表示的一系列矢量，并带有一些颜色：

Adobe 徽标。

SVG 是独一无二的，因为它们在任何尺寸下都能保持其质量（即可缩放），并且无论使用何种尺寸，看起来仍然完美无缺。 这使其成为一些特定用例的理想文件类型：

  • 您经常希望在不同平台上重复使用的徽标。
  • 您需要根据上下文缩放的图标。
  • 您想要使用级联样式表 (CSS) 制作动画的图像。

从技术上讲，有三种方法可以创建 SVG。 您可以自己编写代码，除非您是机器，否则这是不切实际的。 其他方法是从头开始绘制 SVG，或获取现有图像并使用 Illustrator 或 Sketch 等软件将其导出为 SVG。

尽管有优点，但使用 SVG 有两个缺点。 首先，它们不适用于复杂的图形。 例如，一张普通的照片需要数百万个矢量来合成，这将构成一个巨大的 SVG 文件。 使用 SVG 的第二个缺点与安全相关——我们将在下一节中讨论这一点。

为什么使用 SVG 会影响您网站的安全

尽管我们通常将 SVG 称为图像文件，但将它们称为“文档”会更准确。 毕竟，您可以使用文本编辑器轻松打开、阅读和修改 SVG 文件，这类似于常规文档。

问题在于能够将 JavaScript 与矢量信息一起添加。 从理论上讲，这意味着如果有人上传包含恶意代码的文件，在您的网站上实现 SVG 支持可能会让您面临攻击。

对 WordPress 的 SVG 支持已经讨论了六年多，这是一个相当大的问题：

六年前的 Trac 车票。

虽然您不必查看整个票证，但要点是，除非有一种方法可以确保您上传到 WordPress 的 SVG 代码是安全的，但实施该功能可能会带来更多问题而不是好处。

现在，您可以使用多种工具来确保您的 SVG 安全，称为“消毒剂”。 但是，目前似乎没有好的方法可以将其功能实现到 WordPress 中。

总的来说，在实践中为 WordPress 添加 SVG 支持相对简单。 真正的困难在于这样做的方式不会让您的网站容易受到潜在攻击。

在 WordPress 中安全使用矢量图像的 2 种方法

在本节中，我们将探索在 WordPress 中安全使用 SVG 的手动和基于插件的方法。 然后，您就可以根据自己的需要选择最佳选项。 让我们开始吧！

1. 手动添加 SVG 支持并清理您的代码

您可以在几分钟内使用一段代码为 WordPress 添加 SVG 支持。 但是，这会让您对我们之前讨论过的潜在安全问题持开放态度。 更安全的 SVG 实现方法包括以下步骤：

  1. 通过修改functions.php文件启用SVG 支持。
  2. 限制您想要的用户角色将.svg文件上传到 WordPress。
  3. 在上传之前清理每个 SVG 文件。

总的来说，第一步和第二步并不难完成。 第一项任务是通过文件传输协议 (FTP) 访问您的网站并导航到您的 WordPress 根文件夹。 在里面，查找您的functions.php文件，打开它，并添加以下代码（由 CodePen 和 CSS Tricks 的 Chris Coyier 提供）： 

// 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. 使用安全 SVG 插件

通过上述方法，我们想向您展示安全 SVG 实现的复杂程度。 这样您就可以正确理解 Safe SVG 插件的功能。

安全 SVG 插件。

简而言之，这个插件解决了我们之前列出的所有问题，包括：

  • 使您能够首先上传 SVG。
  • 确保您可以在媒体库中看到您的 SVG。
  • 清理您上传的每个 SVG 的代码，以防止出现安全问题。

这几乎是一种即插即用的插件，它绝对是在 WordPress 中安全 SVG 实现的最直接方法。 如果您打算使用 SVG，我们建议您尝试一下。

如何使用 CSS 和插件制作 SVG 动画

如果您经历了在 WordPress 中实现 SVG 的所有麻烦（取决于您使用的} 方法），您可能希望获得最大的收益。 这意味着如果情况需要，可以使用 CSS 为您的 SVG 设置动画。 您可以通过两种方式来完成这个过程，我们在过去已经介绍过：

  1. 像处理任何其他元素一样，使用 CSS 手动为 SVG 设置动画。
  2. 使用 SVGator 等工具来帮助您生成 SVG 并为其设置动画。

如果您愿意进行一些实验，那么这里和那里的一些动画确实可以将您网站的用户体验提升一个档次。 更重要的是，使用 SVG 和 CSS 来实现这一点比添加视频或 GIF 好得多，尤其是对于移动设备。

结论

SVG 是许多情况下的绝佳选择。 举个例子，由于它们的可扩展性，它们是网站徽标的完美选择。 一般而言，使用 SVG 可以帮助您设计响应速度更快的网站，就您的用户而言，这始终是一件好事。

但是，如果您打算向 WordPress 添加 SVG 支持，则需要确保使用一种方法来确保您的站点安全。 有两种方法推荐：

  1. 手动添加 SVG 支持并清理您的代码。
  2. 使用安全 SVG 插件。

您对如何在 WordPress 中安全使用 SVG 有任何疑问吗？ 让我们在下面的评论部分中讨论它们！

文章缩略图：microtic/shutterstock.com