为什么您应该避免在REACT中避免使用危险的lysetinnerhtml？

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} />;
};

const App = () => {
    const item = '<p><strong>This is a sample!</strong></p>';
    return (
        <SanitizeContent content={item} />
    );
};

export default App;