在JavaScript / HTML中,转移字符导致js生成的html出错

举个例子:

javascript 复制代码
// 当song中存在英文单引号时,会导致无法正确处理:
p.innerHTML = `<li onclick="clicksong('${song}')">${song}</li>`;

这是一个典型的XSS漏洞和安全问题。当song变量包含单引号时,会破坏JavaScript字符串,导致语法错误或安全漏洞。以下是几种改进方案:

方案1:使用数据属性(推荐)

javascript 复制代码
p.innerHTML = `<li data-song="${escapeHTML(song)}">${escapeHTML(song)}</li>`;
p.querySelector('li').addEventListener('click', function() {
    clicksong(this.dataset.song);
});

方案2:使用事件委托

javascript 复制代码
p.innerHTML = `<li>${escapeHTML(song)}</li>`;
p.querySelector('li').addEventListener('click', () => {
    clicksong(song);
});

方案3:如果必须保持内联事件,使用JSON序列化

javascript 复制代码
p.innerHTML = `<li onclick="clicksong(${JSON.stringify(song)})">${escapeHTML(song)}</li>`;

完整的HTML转义函数

javascript 复制代码
function escapeHTML(str) {
    const div = document.createElement('div');
    div.textContent = str;
    return div.innerHTML;
}

// 或者使用更全面的转义
function escapeHTML(str) {
    return str.replace(/[&<>"']/g, function(match) {
        const escape = {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#39;'
        };
        return escape[match];
    });
}

方案4:使用模板引擎或框架

javascript 复制代码
// 使用现代JavaScript创建元素
const li = document.createElement('li');
li.textContent = song;
li.addEventListener('click', () => clicksong(song));
p.appendChild(li);

最佳实践示例

javascript 复制代码
// 安全的歌曲列表渲染函数
function renderSongList(songs, container) {
    const fragment = document.createDocumentFragment();
    
    songs.forEach(song => {
        const li = document.createElement('li');
        li.textContent = song;
        li.addEventListener('click', () => clicksong(song));
        fragment.appendChild(li);
    });
    
    container.innerHTML = ''; // 清空容器
    container.appendChild(fragment);
}

关键改进点

  1. 分离HTML和JavaScript:避免在HTML中嵌入JavaScript代码
  2. 正确转义:对动态内容进行适当的HTML转义
  3. 使用事件监听器 :代替内联的onclick属性
  4. 数据属性:安全地存储需要的数据

推荐使用方案1或方案4,它们完全避免了字符串拼接带来的安全问题,代码也更易维护。

相关推荐
Jyywww1214 小时前
Python基于实战练习的知识点回顾
开发语言·python
Tony Bai4 小时前
【Go 网络编程全解】14 QUIC 与 HTTP/3:探索下一代互联网协议
开发语言·网络·后端·http·golang
爱吃小胖橘4 小时前
高效对象池设计:提升Unity性能的关键
开发语言·unity·c#·游戏引擎
是苏浙4 小时前
零基础入门C语言之深入了解指针2
c语言·开发语言
程序员黄同学4 小时前
Python中的列表推导式、字典推导式和集合推导式的性能和应用场景?
开发语言·python
AI小云4 小时前
【Python高级编程】类和实例化
开发语言·人工智能·python
道之极万物灭5 小时前
Python uv虚拟环境管理工具详解
开发语言·python·uv
OC溥哥9995 小时前
C++2D地铁跑酷代码
开发语言·c++
theOtherSky5 小时前
element+vue3 table上下左右键切换input和select
javascript·vue.js·elementui·1024程序员节
会联营的陆逊5 小时前
JavaScript 如何优雅的实现一个时间处理插件
javascript