在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,它们完全避免了字符串拼接带来的安全问题,代码也更易维护。

相关推荐
hui函数2 小时前
python全栈(基础篇)——day04:后端内容(字符编码+list与tuple+条件判断+实战演示+每日一题)
开发语言·数据结构·python·全栈
羚羊角uou2 小时前
【Linux】POSIX信号量、环形队列、基于环形队列实现生产者消费者模型
java·开发语言
知识分享小能手2 小时前
微信小程序入门学习教程,从入门到精通,WXS语法详解(10)
前端·javascript·学习·微信小程序·小程序·vue·团队开发
数据知道3 小时前
Go语言:用Go操作SQLite详解
开发语言·后端·golang·sqlite·go语言
晨非辰4 小时前
《剑指Offer:单链表操作入门——从“头删”开始破解面试》
c语言·开发语言·数据结构·c++·笔记·算法·面试
csgo打的菜又爱玩6 小时前
Vue 基础(实战模板与命名指南)
前端·javascript·vue.js
sheji34168 小时前
【开题答辩全过程】以 python杭州亚运会数据分析与可视化开题为例,包含答辩的问题和答案
开发语言·python·数据分析
gerrgwg9 小时前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端·javascript·vue.js
开心不就得了11 小时前
自定义脚手架
前端·javascript