如何使用 Cloudflare 的 svg-hush：一个SVG安全过滤工具

如何使用 Cloudflare 的 svg-hush：一个SVG安全过滤工具

svg-hushMake it safe to serve untrusted SVG files项目地址:https://gitcode.com/gh_mirrors/sv/svg-hush

项目介绍

svg-hush 是一个用于清理和安全化处理SVG文件的Rust库及命令行工具。它设计用来确保任意SVG文件在作为Web图像服务时尽可能地无害和安全。此工具通过去除潜在风险特性，如脚本执行能力，防止跨站脚本攻击(XSS)，并限制资源引用至同源，从而保障网站的安全性。它适用于清洗不受信任的SVG数据，以避免SEO垃圾信息、钓鱼攻击及第三方追踪。

项目快速启动

安装

首先，确保您已安装了Rust环境。然后，可以通过Cargo全局安装svg-hush：

cargo install svg-hush

使用示例

安装完成后，您可以立即使用它来处理SVG文件。例如，假设我们有一个名为example.svg的SVG文件：

svg-hush example.svg clean-example.svg

这将会创建一个经过过滤的新SVG文件

clean-example.svg

，移除了潜在不安全的内容。

应用案例和最佳实践

场景一：静态网站部署

对于那些希望提供用户上传SVG图标功能的静态站点，svg-hush可以作为一个后处理步骤，确保所有上传的SVG文件在发布前被净化，防止恶意代码注入。

最佳实践：

• 在服务器端使用svg-hush处理上传的SVG文件。
• 结合使用Content-Security-Policy(CSP)头部，增强安全性策略。
• 对于动态渲染SVG的场景，先进行svg-hush过滤，再嵌入页面。

典型生态项目集成

虽然svg-hush本身是独立使用的，但在Web开发领域中，它可以很容易地被集成到自动化构建流程中，比如使用Gulp或Webpack等前端构建工具链。通过配置脚本，在每次构建或部署之前自动对SVG资源进行安全处理，确保生产环境中的SVG内容安全可靠。

示例：与Gulp集成

如果您使用Gulp来管理前端资源，可以通过引入自定义任务来调用svg-hush：

const gulp = require('gulp');
const spawn = require('child_process').spawn;

gulp.task('secure-svg', function(done) {
    const child = spawn('svg-hush', ['--input=path/to/source/svg', '--output=path/to/clean/svg']);
    
    child.on('close', (code) => {
        if (code === 0) done();
        else done(new Error(`svg-hush exited with code ${code}`));
    });
});

// 然后将此任务加入到您的gulp默认或其他任务中

请注意，上述代码仅为示例，实际使用时需根据项目具体路径调整。

通过遵循这些指导原则和实践，您可以有效地利用svg-hush确保您的Web应用程序在使用SVG内容时保持高度的安全性。

svg-hushMake it safe to serve untrusted SVG files项目地址:https://gitcode.com/gh_mirrors/sv/svg-hush