如何在JavaScript中设置innerHTML？含dangerouslySetInnerHTML与useEffect疑问

1. 是否可以通过JavaScript设置innerHTML？ #

完全可以。innerHTML是DOM元素的原生属性，可直接通过JavaScript读写，用来获取或替换元素内部的HTML结构。示例代码：

// 获取目标DOM元素
const targetEl = document.getElementById('my-element');
// 直接设置innerHTML
targetEl.innerHTML = '<div><p>更新后的HTML内容</p></div>';

2. 如何危险地设置innerHTML？ #

核心风险在于插入未过滤的不可信内容，比如用户输入、第三方接口返回的未校验数据，这会直接引发XSS（跨站脚本攻击）。典型危险场景示例：

// 危险：直接将用户输入的内容塞进innerHTML
const userInput = prompt('请输入内容');
targetEl.innerHTML = userInput;
// 若用户输入 <img src=x onerror="stealUserData()">，恶意代码会直接执行

即使没有<script>标签，<iframe>、<svg>等标签配合恶意属性，也能触发攻击行为。

3. 避免使用setState的替代方案（解决useEffect清理异常） #

如果不想依赖React的setState，可以通过直接操作DOM的方式更新内容，同时规避安全风险：

方案1：安全使用innerHTML（过滤不可信内容） #

必须用innerHTML时，先对内容做安全过滤，只保留合法的HTML标签和属性。可以使用DOMPurify处理内容（直接引入使用，不依赖React状态）：

import DOMPurify from 'dompurify';

useEffect(() => {
  const targetEl = document.getElementById('my-element');
  if (!targetEl) return;

  // 过滤后再设置innerHTML
  const unsafeContent = '<p>用户输入的内容</p><img src=x onerror="恶意代码">';
  const safeContent = DOMPurify.sanitize(unsafeContent);
  targetEl.innerHTML = safeContent;

  // 清理时直接清空元素
  return () => {
    if (targetEl) targetEl.innerHTML = '';
  };
}, []); // 按需添加依赖项

方案2：用原生DOM API构建内容（完全避免innerHTML） #

通过createElement、textContent、appendChild等方法直接创建DOM元素，完全跳过HTML字符串解析，从根源避免XSS：

useEffect(() => {
  const targetEl = document.getElementById('my-element');
  if (!targetEl) return;

  // 创建文本元素
  const textEl = document.createElement('p');
  textEl.textContent = '纯文本内容，不会解析任何HTML标签';

  // 创建图片元素
  const imgEl = document.createElement('img');
  imgEl.src = '合法的图片地址';
  imgEl.alt = '图片描述';

  // 将元素添加到目标容器
  targetEl.appendChild(textEl);
  targetEl.appendChild(imgEl);

  // 清理时移除所有子元素
  return () => {
    while (targetEl.firstChild) {
      targetEl.removeChild(targetEl.firstChild);
    }
  };
}, []);

方案3：React中使用useRef直接操作DOM #

在React组件里，用useRef获取DOM元素引用，直接操作元素内容，完全绕过setState：

import { useRef, useEffect } from 'react';

function MyComponent() {
  const contentRef = useRef(null);

  useEffect(() => {
    if (contentRef.current) {
      // 直接通过ref操作DOM元素的innerHTML
      contentRef.current.innerHTML = '<p>通过ref更新内容</p>';
    }

    // 清理函数
    return () => {
      if (contentRef.current) {
        contentRef.current.innerHTML = '';
      }
    };
  }, []);

  return <div ref={contentRef}></div>;
}

直接操作DOM时，要确保元素已完成挂载，同时清理函数需正确处理元素内容，避免内存泄漏或残留节点。

内容的提问来源于stack exchange，提问作者bezzoon