React 中的 <dangerouslysetinnerhtml></dangerouslysetinnerhtml> 属性允许开发者直接设置元素的 innerHTML 属性，无需任何消毒处理。 将不可信的用户输入直接插入此属性极其危险，可能导致严重的跨站脚本 (XSS) 安全漏洞。因此，应始终避免将不可信的用户输入传递给 dangerouslySetInnerHTML 属性。
最佳实践是完全避免使用该属性。如果必须使用用户输入，请务必先对其进行彻底的消毒处理。
示例：安全地渲染 HTML
以下示例展示了如何使用一个自定义组件 SanitizeContent 安全地渲染 HTML 内容：
<code class="javascript">import React, { useEffect, useRef } from "react";
const sanitizeHTML = (html) => {
// 仅在浏览器环境中运行
if (typeof window === 'undefined') return html;
try {
const parser = new DOMParser();
const doc = parser.parseFromString(html, "text/html");
// 定义允许使用的标签
const allowedTags = ["p", "b", "i", "strong", "em"]; // 添加更多允许的标签
const sanitizeNode = (node) => {
if (node.nodeType === Node.ELEMENT_NODE) {
const element = node;
// 首先处理子节点
Array.from(element.childNodes).forEach((child) => sanitizeNode(child));
if (!allowedTags.includes(element.tagName.toLowerCase())) {
// 用子节点替换元素
while (element.firstChild) {
element.parentNode.insertBefore(element.firstChild, element);
}
element.remove();
}
//移除属性，防止XSS攻击
element.removeAttribute("style");
element.removeAttribute("onmouseover");
element.removeAttribute("onclick");
//添加更多需要移除的属性
}
};
sanitizeNode(doc.body);
return doc.body.innerHTML;
} catch (error) {
console.error('HTML 消毒错误:', error);
return html; // 如果消毒失败，返回原始内容
}
};
const SanitizeContent = ({ content }) => {
const ref = useRef(null);
useEffect(() => {
if (ref.current) {
const sanitized = sanitizeHTML(content);
ref.current.innerHTML = sanitized;
}
}, [content]);
return <div ref="{ref}"></div>;
};
const App = () => {
const item = '<p><strong>This is a sample!</strong></p>';
return (
<sanitizecontent content="{item}"></sanitizecontent>
);
};
export default App;</code>
此示例中，sanitizeHTML 函数使用 DOMParser 解析 HTML，并仅允许预定义的标签。 注意： 这个消毒函数只是一个简单的例子，实际应用中可能需要更强大的消毒库来处理更复杂的 HTML 和潜在的 XSS 攻击向量。 建议使用成熟的库如 DOMPurify 来进行更可靠的HTML消毒。 此外，代码中添加了移除属性的操作，进一步增强安全性。 在实际应用中，需要根据具体需求调整允许的标签和属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
