彻底解决qrcode.js安全漏洞：从原理到实战的防护指南

2026-02-04 04:07:41作者：劳婵绚Shirley

你是否曾因二维码生成器的安全隐患而担忧？在数字化时代，二维码（QR Code）已成为信息传递的重要载体，但开源库的安全漏洞可能导致数据泄露、恶意链接传播等风险。本文将深入分析qrcode.js的潜在安全风险，提供从漏洞原理到实际修复的完整解决方案，帮助开发者构建更安全的二维码应用。

项目背景与安全现状

qrcode.js是一个跨浏览器的JavaScript二维码生成库（项目路径：gh_mirrors/qr/qrcodejs），广泛应用于网页和移动应用中。其核心文件包括qrcode.js（未压缩源码）和qrcode.min.js（压缩版），提供了简单易用的API接口。

安全漏洞的潜在影响范围

XSS攻击风险：通过恶意输入构造可能导致跨站脚本攻击
数据注入：未过滤的用户输入可能被嵌入二维码，引导用户访问恶意链接
内存溢出：处理超大尺寸二维码时可能存在的性能隐患

漏洞原理深度剖析

输入验证机制缺陷

在qrcode.js的QR8bitByte类实现中（第34-64行），虽然对UTF-8字符进行了处理，但缺乏严格的输入长度和内容验证：

// QR8bitByte构造函数中的字符处理逻辑
for (var i = 0, l = this.data.length; i < l; i++) {
    var byteArray = [];
    var code = this.data.charCodeAt(i);
    // ... UTF-8编码处理 ...
    this.parsedData.push(byteArray);
}

当处理超长或特殊构造的字符串时，可能导致解析异常，为恶意代码执行提供机会。

默认配置安全隐患

项目示例文件index.html中的默认实现（第15-42行）直接将用户输入传递给二维码生成函数，未做任何安全过滤：

var qrcode = new QRCode(document.getElementById("qrcode"), {
    width : 100,
    height : 100
});

function makeCode () {		
    var elText = document.getElementById("text");
    if (!elText.value) {
        alert("Input a text");
        elText.focus();
        return;
    }
    qrcode.makeCode(elText.value); // 直接使用用户输入
}

实战防护方案

1. 输入验证与过滤机制实现

修改QR8bitByte类的构造函数，添加输入长度限制和特殊字符过滤：

// 在qrcode.js第34行添加输入验证
if (this.data.length > 500) { // 设置合理的长度限制
    throw new Error("Input too long. Maximum length is 500 characters.");
}
// 过滤危险字符
this.data = this.data.replace(/[<>"'\\\/]/g, '');

2. CSP策略集成

在HTML文档头部添加内容安全策略（CSP），限制脚本执行源：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://cdn.bootcdn.net">

3. 安全配置示例

修改index.html，实现安全的二维码生成流程：

function makeCode () {		
    var elText = document.getElementById("text");
    
    if (!elText.value) {
        alert("Input a text");
        elText.focus();
        return;
    }
    
    // 添加安全验证
    if (elText.value.length > 500) {
        alert("输入过长，请控制在500字符以内");
        return;
    }
    
    // 过滤危险内容
    var safeText = elText.value.replace(/[<>"'\\\/]/g, '');
    qrcode.makeCode(safeText);
}