长治建站：如何与WordPress一起安全地使用矢量图像

2019.07.02 长治网站建设

170

有几十种图像文件类型可以用于媒体。WordPress支持大多数比较流行的图像文件类型，包括jpeg, .png, .gif，还有更多。但是，它不包括对矢量图像的任何支持。

在过去，我们讨论过如何创建可伸缩矢量图形(SVGS)，以及它们的好处。对于本文，我们将再次讨论SVG的概念，为什么错误地使用它们可能是不安全的，以及如何在不损害您的网站的情况下实现它们。

我们开始工作吧!

SVGS简介

SVG不是基于像素，而是基于向量，正如您从名称中可能猜到的那样。如果您尝试使用文本编辑器打开常规图像文件，您将看到相对的胡言乱语。但是，如果您尝试打开SVG，您可能会看到如下代码(摘自我们关于SVGS的第一篇文章):

</svg>

简而言之，这些向量是组成Adobe徽标的表示的一系列向量，带有少量的颜色：

长治建站

SVG之所以独特，是因为它们在任何大小(即可伸缩)上都能保持质量，而且不管使用的维度是什么，它们看起来都是完美的。这使得它成为一些特定用例的理想文件类型：

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

从技术上讲，有三种方法可以创建SVG。您可以自己编写代码，这是不切实际的，除非您是一台机器。其他方法是从头开始绘制svg，或者获取现有的映像并使用软件，如插画或素描将其导出为SVG。

尽管有这些优点，但使用SVG有两个缺点。首先，它们不适用于复杂的图形。例如，一张普通的照片需要数以百万计的向量才能组成，这就构成了一个巨大的SVG文件。使用svgs的第二个缺点是与安全相关的-我们将在下一节中讨论这一点。

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

虽然我们通常将svg称为图像文件，但称它们为“documents”更为准确。毕竟，您可以使用文本编辑器轻松地打开、读取和修改SVG文件，这与常规文档类似。

问题在于是否能够在向量信息的同时添加JavaScript。从理论上讲，这意味着在您的网站上实现SVG支持，如果有人上传包含恶意代码的文件，您可能会受到攻击。

这是一个相当大的关注，SVG对WordPress的支持一直在讨论中过关六年:

长治建站

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

现在，您可以使用几个工具来确保svg是安全的，称为“消毒剂”..然而，目前似乎没有很好的方法将它们的功能实现到WordPress中。

总之，在实践中向WordPress添加SVG支持是相对简单的。真正的困难在于这样做不会让你的网站受到潜在的攻击。

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

在本节中，我们将探索在WordPress中使用安全SVG长治建站的手册和基于插件的方法。然后，您将能够选择最佳的选择，以满足您的需要。我们开始吧！

1.手动添加SVG支持并净化代码

您可以在几分钟内通过代码片段向WordPress添加SVG支持。然而，这将使您对我们之前讨论过的潜在安全问题持开放态度。更安全的SVG实现方法包括以下步骤：

通过修改
Functions.php
档案。
限制希望上传的用户角色
.svg
文件到WordPress。
在上传SVG文件之前，对它进行消毒。

总的来说，第一步和第二步不难完成。第一个任务是通过文件传输协议(FTP)访问您的网站然后导航到WordPress根文件夹。在里面，找你的Functions.php文件，打开它，并添加以下代码(克里斯·科伊尔(Chris Coyier)从…代码笔和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。例如，您可能信任您的编辑器和作者上传正确的文件，而不是您的贡献者。有两种方法可以做到这一点：

创建自定义用户角色
访问媒体库的权限有限或不可访问。
用一个插件，
例如WP上传限制
，以限制每个用户角色可以上载的文件类型。

两种方法做有它们的缺陷，这也是手动SVG实现变得棘手的原因之一。但是，一旦您确定了一个方法，以确保没有人可以上传恶意svg，您还需要确保你，你们也不要错误地这样做。

理想情况下，您将运行每个SVG您上传到您的网站通过消毒工具之前，你这样做。这将接受您的文件，确保它不包含任何不正常的内容，如果包含任何不对的内容，则将其删除。最终，这给您留下了一个干净的SVG文件，您可以最终上传到WordPress。

2.使用安全的SVG插件

使用上述方法，我们希望向您展示SVG实现的复杂性。这是为了让您正确地了解安全SVG插件有。

长治建站

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

允许您首先上传SVG。
确保您可以在媒体库中看到您的SVG。
清理您上传的每个SVG的代码以防止安全问题。

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

如何使用CSS和插件动画SVG

如果您经历了在WordPress中实现SVGS的所有麻烦(取决于您使用的}方法)，那么您可能希望得到最大的回报。这意味着如果情况需要的话，使用CSS来动画你的SVG。有两种方法可以进行这个过程，我们在过去已经讨论过了：

手动动画SVG
与任何其他元素一样，使用CSS。
使用工具
比如SVGator
以帮助您生成和动画SVG。

如果你准备进行一些实验，这里和那长治建站里的一些动画可以让你的网站的用户体验提升一个档次。更重要的是，使用SVG和CSS来实现这一点要比添加视频或GIF要好得多，特别是对于移动设备。

长治建站：如何与WordPress一起安全地使用矢量图像

SVGS简介

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

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

1.手动添加SVG支持并净化代码

2.使用安全的SVG插件

如何使用CSS和插件动画SVG

相关推荐