SVG，网站的定时炸弹？

可缩放矢量图形SVG（Scalable Vector Graphics），很多人或许对它有刻板印象，认为它就是跟JPG、PNG等类型一样的图片格式类型。你有所不知的是，它实际上是一种文档格式，严格来说，它是一种基于XML的开放标准矢量图形语言。

那为什么有人说SVG是网站的定时炸弹？WordPress网站上传SVG到底安不安全？

SVG释义

SVG是用XML定义的文档格式。SVG图形可以是交互的、动态的，在其中嵌入动画元素或者通过脚本来定义动画也是可以的。倘若你想要查看SVG文件的内容，可以用任何能读取XML文件的应用程序或者文本编辑器打开阅读。

SVG独家秘笈

• SVG由数学描述的线条和形状组成，可以随意放大缩小，在任何屏幕上都不会模糊；
• 对于图标、Logo、简单插画这类图形，SVG的文件通常比同等清晰度的PNG更小，有助于提升网站的整体性能和加载速度；不过照片类的复杂图像并不适合做成SVG，用WebP或AVIF更合适；
• 可以直接用CSS修改颜色，做悬停变色等效果；
• 所有现代浏览器都完整支持SVG，兼容性已经不是问题（只有早已停止维护的老版本IE等浏览器存在缺陷）。

为什么说SVG是网站定时炸弹？

上面有提到，SVG实际上是一种文档格式，可以内嵌CSS和JavaScript代码。风险就出在这里，但要分情况看：

对比SVG里的脚本，什么时候会执行

脚本不会执行

用 <img> 标签加载

用CSS背景图加载

脚本会执行

直接在浏览器中打开SVG文件的网址

把SVG代码内联写进网页

用 <object>、<iframe> 嵌入

• 用 <img> 标签或CSS背景图加载的SVG：浏览器会禁用其中的JavaScript，也不会加载外部资源，所以文件里即使藏了脚本也不会执行。网页上大部分图片都是这样显示的。
• 直接在浏览器中打开SVG文件的网址，或者把SVG代码内联写进网页、用 <object>、<iframe> 嵌入：这时SVG里的脚本会正常执行，而且是以你网站的身份执行。

所以真正的风险是跨站脚本攻击（XSS）：假设有人把一个带恶意脚本的SVG上传到你的网站，再诱导管理员打开这个文件的网址，脚本就可能窃取登录状态、修改网站内容。网站一旦被植入垃圾链接或恶意跳转，Google可能会在搜索结果中提示「此网站可能已遭到入侵」，排名和询盘都会受到影响。网站已经出现这类情况时，可以参考网站被黑后的应急处理指南。

怎么拆除「定时炸弹」？

在默认情况下，出于安全考虑，WordPress是不允许上传SVG文件的。如果确实需要使用SVG，可以按风险从低到高选择：

• 只由开发人员把SVG放进主题文件：图标、Logo等由开发团队检查后直接放在主题里，不开放后台上传。这是最安全的做法。
• 使用会「净化」文件的上传插件：例如由10up维护的 Safe SVG 插件，它会在上传时自动清除SVG中的脚本等危险代码，并允许限制只有哪些用户角色可以上传。不要为了方便，直接在代码里放开SVG的上传类型而不做任何过滤。
• 只允许信任的用户上传：如果网站允许客户或注册用户上传文件，就不要允许上传SVG；需要矢量图时，可以让他们上传PDF或转成PNG。

WordPress的其他安全要点，可以参考为什么选择WordPress建站一文中关于插件和登录安全的部分。

常见问题

WordPress为什么默认不能上传SVG？

因为SVG可以包含脚本，WordPress核心没有内置SVG净化功能，所以出于安全考虑默认禁止上传。需要使用时，应通过会净化文件的插件或由开发人员处理。

用 <img> 显示的SVG还需要净化吗？

需要。虽然 <img> 里的脚本不会执行，但文件本身仍然保存在你的服务器上，任何人都可以直接打开它的网址；而且主题或插件将来可能会以内联方式输出这个文件。上传时净化，才能从源头消除风险。

SVG对SEO有影响吗？

SVG本身不会让网站被判为垃圾网站。作为图片使用时，给它加上清晰的替代文本（alt），和其他图片一样可以被搜索引擎理解。真正影响SEO的是网站被入侵后被植入的垃圾内容。

归纳

SVG文件利弊兼之：用在图标和Logo上，它清晰、轻量、好维护；上传和输出的方式不对，它就可能成为XSS攻击的入口。只要控制好谁能上传、上传时做好净化，并尽量用 <img> 方式显示，定时炸弹就成了哑弹。如果您的WordPress网站需要安全地使用SVG图标或做整体的安全检查，欢迎了解我们的WordPress定制开发与维护服务。