React最佳实践：如何安全渲染后端HTML且不影响页面其他内容

可用的类WebView安全渲染方案 #

方案1：沙箱iframe（Web端首选，完全隔离上下文） #

iframe的Sandbox属性可以创建完全独立的运行环境，和父页面DOM、JS上下文完全隔离，是目前Web端最接近原生WebView的安全渲染方案，完全规避父页面被注入的风险。
使用示例代码如下：

import React, { useEffect, useRef } from 'react';
import DOMPurify from 'dompurify';

const SafeHtmlRenderer = ({ rawHtml }) => {
  const iframeRef = useRef(null);

  useEffect(() => {
    if (iframeRef.current) {
      // 先消毒再传入iframe，双层安全保障
      const sanitizedHtml = DOMPurify.sanitize(rawHtml, {
        FORBID_TAGS: ['style', 'script', 'iframe'],
        FORBID_ATTR: ['onerror', 'onload', 'onclick', 'style', 'onmouseover']
      });
      iframeRef.current.srcdoc = sanitizedHtml;
    }
  }, [rawHtml]);

  return (
    <iframe
      ref={iframeRef}
      sandbox="" // 空配置禁用所有权限，可按需追加：allow-same-origin（允许加载同源资源）、allow-scripts（允许执行JS，非必要不开启）
      style={{ width: '100%', border: 'none', minHeight: '400px' }}
      title="外部HTML内容渲染容器"
    />
  );
};

export default SafeHtmlRenderer;

配置注意事项：

• 非必要不要开启allow-scripts权限，禁用JS后可以规避99%的注入攻击
• 可以通过iframe的高度自适应逻辑，根据内容高度动态调整容器高度，避免出现嵌套滚动条

方案2：原生WebView（混合开发场景） #

如果是在移动端App混合开发场景，直接使用平台原生的WebView组件即可：

• 安卓端使用WebView组件，非必要场景下设置setJavaScriptEnabled(false)禁用JS，同时配置WebSettings限制文件访问权限
• iOS端使用WKWebView组件，通过WKContentRuleList配置内容拦截规则，过滤不安全的资源和脚本

原方案失效排查方向 #

当前使用的dangerouslySetInnerHTML方案出现异常，通常是以下原因导致：

• DOMPurify配置规则过松：仅禁用了style标签，没有过滤script、iframe等高风险标签，也没有拦截on*开头的事件属性
• 特殊Payload绕过：部分包含SVG、MathML的特殊攻击Payload可能绕过默认规则，需要针对性添加禁止规则
• 内容编码问题：后端返回的HTML如果存在实体编码未正确解码的情况，会导致DOMPurify无法正确识别标签

示例报错参考：

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