避免HTML标签注入：使用JavaScript/jQuery正确包装DOM元素
在Web开发中，我们经常需要动态创建或操作DOM元素，将内容插入到页面中。如果处理不当，很容易出现HTML标签注入问题，不仅会导致页面布局错乱，还可能引发XSS（跨站脚本）攻击，带来严重的安全风险。本文将介绍如何使用JavaScript和jQuery正确包装DOM元素，避免HTML标签注入问题。
什么是HTML标签注入
HTML标签注入是指当我们将包含HTML特殊字符（如<、>、&等）的内容直接作为HTML解析插入到页面时，浏览器会将这些字符识别为HTML标签的一部分，从而执行非预期的HTML或脚本代码。例如，如果用户输入的内容包含<script>alert('xss')</script>，直接插入到页面中就会执行这段脚本。
原生JavaScript的正确处理方式
原生JavaScript提供了多种安全的DOM操作方式，避免直接将内容解析为HTML。
1. 使用textContent属性
如果只需要插入纯文本内容，使用元素的textContent属性是最安全的方式，它会将内容中的HTML特殊字符自动转义，只作为纯文本显示。
// 不安全的方式：直接设置innerHTML，会解析HTML
const unsafeDiv = document.getElementById('unsafe');
const unsafeContent = '<strong>这是加粗文本</strong><script>alert("注入")</script>';
unsafeDiv.innerHTML = unsafeContent;会显示加粗文本，且执行脚本
// 安全的方式：使用textContent
const safeDiv = document.getElementById('safe');
const safeContent = '<strong>这是加粗文本</strong><script>alert("注入")</script>';
safeDiv.textContent = safeContent; // 页面会纯文本显示整个内容，不会执行脚本2. 使用createElement和appendChild创建元素
如果需要动态创建DOM元素并插入内容，可以先创建元素节点，再通过textContent设置内容，最后插入到父节点中。
// 动态创建一个div元素并插入安全内容
function createSafeElement(tagName, content, parentId) {
const element = document.createElement(tagName);
element.textContent = content; // 安全设置文本
const parent = document.getElementById(parentId);
if (parent) {
parent.appendChild(element);
}
return element;
}
// 使用示例
createSafeElement('div', '用户输入的内容：<img src="x" onerror="alert(1)">', 'container');
// 插入的内容会被当作纯文本，不会执行onerror中的脚本3. 需要解析HTML时的安全处理
如果确实需要插入包含HTML标签的内容（例如富文本展示），需要先对不可信内容进行转义，再插入到安全的HTML结构中。
// HTML特殊字符转义函数
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
// 使用示例：只转义不可信的用户输入部分
const userInput = '<script>alert("xss")</script>';
const safeHtml = `<div class="user-content">${escapeHtml(userInput)}</div>`;
document.getElementById('richContainer').innerHTML = safeHtml; // 安全插入jQuery的正确处理方式
jQuery简化了DOM操作，但同样需要注意避免HTML注入问题，核心原则是区分纯文本插入和HTML插入的场景。
1. 使用text()方法插入纯文本
jQuery的text()方法对应原生JavaScript的textContent，会自动转义HTML特殊字符，适合插入纯文本内容。
// 不安全的方式：使用html()方法插入不可信内容
$('#unsafeJquery').html('<strong>测试</strong><script>alert(1)</script>'); // 有风险
// 安全的方式：使用text()方法
$('#safeJquery').text('<strong>测试</strong><script>alert(1)</script>'); // 纯文本显示，无风险2. 动态创建元素时的安全处理
使用jQuery创建元素时，如果内容包含不可信数据，同样需要先转义，或者使用text()方法设置内容。
// 安全创建元素并插入内容
function createSafeJqueryElement(tagName, content, parentSelector) {
const $element = $(`<${tagName}></${tagName}>`);
$element.text(content); // 安全设置文本
$(parentSelector).append($element);
}
// 使用示例
createSafeJqueryElement('p', '用户输入：<a href="https://www.ipipp.com">点击</a>', '#jqueryContainer');
// 链接会以纯文本形式显示，不会成为可点击的链接3. 需要解析HTML时的处理
如果必须插入HTML内容，需要对不可信部分进行转义，只将可信的HTML结构直接插入。
// 结合转义函数使用jQuery
const userInput = '<img src="x" onerror="alert(1)">';
const escapedInput = escapeHtml(userInput); // 复用之前的转义函数
const $safeHtml = $('<div class="content"></div>').html(`用户内容：${escapedInput}`);
$('#jqueryRichContainer').append($safeHtml); // 安全插入常见误区与注意事项
不要将用户输入的内容直接通过
innerHTML或jQuery的html()方法插入页面，除非已经经过严格的转义或信任校验。即使内容是后端返回的，也需要确认后端是否已经做了转义处理，避免前后端转义逻辑不一致导致问题。
如果页面需要展示富文本，建议使用专门的富文本消毒库（如DOMPurify）对内容进行过滤，只允许安全的HTML标签和属性，而不是简单的字符转义。
在处理URL类型的用户输入时，除了转义HTML特殊字符，还需要校验URL的协议，避免javascript:等危险协议导致的脚本执行。
总结
避免HTML标签注入的核心是区分内容的类型：纯文本内容使用textContent（原生）或text()（jQuery）方法，需要解析HTML的内容对不可信部分进行转义或使用专业消毒库过滤。正确的DOM元素包装和操作方式，既能保证页面功能正常，也能有效防范XSS等安全风险。