Canvg库原型链污染问题分析与解决方案

问题概述

Canvg是一个流行的JavaScript库，用于在浏览器中解析和渲染SVG内容。在4.0.2版本中被发现存在原型链污染(Prototype Pollution)安全问题，该问题位于StyleElement类的构造函数中。攻击者可以通过精心构造的CSS输入，向JavaScript对象的原型链注入非预期属性，可能导致应用程序出现风险。

技术背景

原型链污染是一种JavaScript特有的安全问题，当应用程序将用户控制的输入不经过滤地合并到对象原型时就会产生。这种问题可能被利用来修改应用程序行为、绕过安全控制，甚至在某些情况下导致远程代码执行。

在Canvg库中，StyleElement类负责处理SVG文档中的样式元素。当解析CSS内容时，没有对特殊属性名进行适当过滤，使得攻击者能够影响全局对象原型。

问题细节

受影响版本

• Canvg 4.x系列中4.0.2及以下版本
• Canvg 3.x系列中3.0.10及以下版本

问题位置

问题主要存在于StyleElement类的构造函数中，当处理CSS样式规则时，未能对原型链访问进行有效防护。

攻击原理

攻击者可以通过构造包含特殊属性名的CSS规则，将非预期属性注入到Object.prototype中。一旦影响成功，所有JavaScript对象都会继承这些非预期属性，可能导致应用程序出现意外行为或安全问题。

问题验证

通过以下简化示例可以验证该问题的存在：

// 创建非预期CSS输入
const unexpectedCSS = `
__proto__ { affected: "Yes, affected!"; }
`;

// 模拟SVG文档环境
const fakeDocument = {
  styles: {},
  stylesSpecificity: {},
  // 省略其他必要方法...
};

// 创建包含非预期CSS的节点
const fakeNode = {
  childNodes: [{ textContent: unexpectedCSS }]
};

// 实例化StyleElement触发问题
new StyleElement(fakeDocument, fakeNode);

// 验证原型影响是否成功
console.log({}.affected);  // 输出: "Yes, affected!"

解决方案

Canvg团队在后续版本中解决了该问题：

1. 对于4.x系列，解决版本为4.0.3
2. 对于3.x系列，解决版本为3.0.11

解决措施主要包括：

• 在解析CSS属性名时增加了对特殊属性的过滤
• 实现了更严格的属性名验证机制
• 确保样式属性不会意外影响全局原型链

升级建议

所有使用Canvg库的项目应考虑升级到安全版本：

• 使用4.x系列的项目应升级至4.0.3或更高版本
• 使用3.x系列的项目应升级至3.0.11或更高版本

对于无法立即升级的项目，可以考虑以下临时缓解措施：

1. 对输入SVG内容进行过滤，移除可能包含非预期CSS规则的片段
2. 使用Object.freeze()冻结敏感原型对象
3. 在应用层实现额外的输入验证

总结

原型链污染是JavaScript应用中常见的安全问题，Canvg库的这一问题再次提醒开发者需要对用户输入保持警惕，特别是在处理可能影响对象原型的操作时。通过及时升级到解决版本，开发者可以有效消除这一风险，确保应用的安全性。