请解释如何安全地使用 innerHTML？

推荐答案

// www.javascriptcn.com code example
// 安全使用 innerHTML 的示例
const sanitizeHTML = (str) => {
  const temp = document.createElement('div');
  temp.textContent = str;
  return temp.innerHTML;
};

const userInput = '<script>alert("XSS")</script>';
const safeHTML = sanitizeHTML(userInput);
document.getElementById('content').innerHTML = safeHTML;

本题详细解读

1. 为什么需要安全使用 innerHTML？

innerHTML 是一个强大的属性，允许开发者直接操作 DOM 元素的 HTML 内容。然而，直接使用 innerHTML 插入未经验证的用户输入可能会导致 跨站脚本攻击（XSS）。攻击者可以通过注入恶意脚本来窃取用户数据或执行其他恶意操作。

2. 如何安全使用 innerHTML？

为了安全地使用 innerHTML，必须对用户输入进行 转义 或 清理，确保任何潜在的恶意代码都不会被执行。以下是几种常见的安全措施：

2.1 使用 textContent 或 innerText

如果不需要插入 HTML 标签，可以使用 textContent 或 innerText 来插入纯文本内容。这样可以避免 HTML 标签被解析为 DOM 元素。

document.getElementById('content').textContent = userInput;

2.2 使用 DOM 方法创建元素

通过 DOM 方法（如 createElement、appendChild 等）动态创建元素，可以避免直接插入未经验证的 HTML 字符串。

const newElement = document.createElement('div');
newElement.textContent = userInput;
document.getElementById('content').appendChild(newElement);

2.3 使用 HTML 清理库

可以使用专门的 HTML 清理库（如 DOMPurify）来清理用户输入的 HTML 内容。这些库会移除潜在的恶意代码，只保留安全的 HTML 标签和属性。

const cleanHTML = DOMPurify.sanitize(userInput);
document.getElementById('content').innerHTML = cleanHTML;

2.4 手动转义 HTML 字符

如果不想依赖外部库，可以手动转义 HTML 字符，将 <、>、& 等字符转换为对应的 HTML 实体。

// www.javascriptcn.com code example
const sanitizeHTML = (str) => {
  return str.replace(/&/g, '&')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
};

const safeHTML = sanitizeHTML(userInput);
document.getElementById('content').innerHTML = safeHTML;

3. 总结

安全使用 innerHTML 的关键在于对用户输入进行严格的验证和清理。通过转义、使用 DOM 方法或借助专门的清理库，可以有效防止 XSS 攻击，确保应用的安全性。