你可以将数十种图像文件类型用于媒体。WordPress 开箱即用,支持大多数更流行的图像文件类型,包括.jpeg.png.gif 等。但是,它不包含对矢量图像的任何支持。

在本文中,我们将再次探讨 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 徽标表示的一系列矢量,并带有一些颜色:

SVG 之所以独特,是因为它们可以保持任何大小(即可扩展)的质量,并且无论使用什么尺寸,它们都仍然看起来完美。这使它成为一些特定用例的理想文件类型:

  • 你经常需要在不同平台上重复使用的徽标。
  • 你需要根据上下文缩放的图标。
  • 你要使用级联样式表(CSS)进行动画处理的图像。

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

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

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

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

问题在于在矢量信息旁边添加 JavaScript 的能力。从理论上讲,这意味着如果有人上传包含恶意代码的文件,则在你的网站上实现 SVG 支持可能会使你容易受到攻击。

虽然你不必遍历整个过程,但要确保有一种方法可以确保上传到 WordPress 的 SVG 代码是安全的,但实施此功能可能会带来更多的问题,而不是带来的好处。

总体而言,在实践中向 WordPress 添加 SVG 支持相对简单。真正的困难在于,这样做不能使你的网站容易受到潜在攻击。

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

在本节中,我们将探讨在 WordPress 中安全使用 SVG 的手动方法和基于插件的方法。然后,你将能够根据需要选择最佳选项。让我们开始吧!

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

你可以在短短几分钟内通过代码片段将 SVG 支持添加到 WordPress。但是,这将使你对我们之前讨论的潜在安全问题持开放态度。SVG 实施的更安全方法包括以下步骤:

  1. 通过修改 functions.php 文件来启用 SVG 支持。
  2. 限制所需的用户角色,使其无法将.svg 文件上传到 WordPress。
  3. 在上载之前,请对每个 SVG 文件进行消毒。

总体而言,第一步和第二步并不难完成。第一项任务是通过文件传输协议(FTP)访问你的网站并导航到 WordPress 根文件夹。在内部,看看你的 functions.php 文件,打开它,并添加以下代码(克里斯 Coyier 的礼貌从 CodePen 和 CSS 技巧):

// 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 的代码,以防止安全问题。

这几乎是一个即插即用的插件,并且绝对是 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. 使用 Safe SVG 插件。