当前位置：首页 > news >正文

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

news 2025/10/5 8:06:48

举个例子：

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

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

方案1：使用数据属性（推荐）

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

方案2：使用事件委托

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

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

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

完整的HTML转义函数

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创建元素
const li = document.createElement('li');
li.textContent = song;
li.addEventListener('click', () => clicksong(song));
p.appendChild(li);

最佳实践示例

// 安全的歌曲列表渲染函数
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);
}