React中接口获取XML转HTML渲染的替代实现方案咨询

原有实现存在几个可优化点：直接操作DOM不符合React设计规范、插入的script标签不会自动执行、无加载/错误状态提示、缺少XSS防护、无副作用清理逻辑。下面给出两套可直接使用的替代方案：

方案1：最小改动兼容版（适配原有逻辑，适合可信XML来源） #

这个方案基本保留原有业务逻辑，仅做规范优化，不需要引入额外依赖：

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function Header() {
  const [headerContent, setHeaderContent] = useState('');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    const DOMParse = new DOMParser();

    axios.get('你的XML接口地址', {
      headers: { 'Content-Type': 'application/xml; charset=utf-8' },
      signal: controller.signal
    })
    .then(response => {
      const xmlDoc = DOMParse.parseFromString(response.data, 'text/xml');
      // 拼接所有需要插入的内容
      const content = `
        ${xmlDoc.querySelector('cssIncludes').textContent}
        ${xmlDoc.querySelector('javascriptIncludes').textContent}
        ${xmlDoc.querySelector('headerHtml').textContent}
      `;
      setHeaderContent(content);
      setLoading(false);
      
      // 手动执行插入的script标签，不需要执行脚本可删除此段逻辑
      const tempDiv = document.createElement('div');
      tempDiv.innerHTML = content;
      tempDiv.querySelectorAll('script').forEach(oldScript => {
        const newScript = document.createElement('script');
        Array.from(oldScript.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value));
        newScript.textContent = oldScript.textContent;
        document.body.appendChild(newScript);
      });
    })
    .catch(err => {
      if (err.name !== 'CanceledError') {
        setError('头部资源加载失败');
        setLoading(false);
        console.log(err);
      }
    });

    // 组件卸载时中断请求，防止内存泄漏
    return () => controller.abort();
  }, []);

  if (loading) return <div>头部加载中...</div>;
  if (error) return <div>{error}</div>;

  return (
    <div>
      <div dangerouslySetInnerHTML={{ __html: headerContent }} />
    </div>
  )
}

export default Header;

方案2：安全增强版（适合不可信/半可信XML来源，防止XSS攻击） #

如果你的XML数据来源不是完全内部可信的，推荐加入XSS内容过滤，需要先安装依赖npm install dompurify：

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

function Header() {
  const [headerContent, setHeaderContent] = useState('');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    const DOMParse = new DOMParser();

    axios.get('你的XML接口地址', {
      headers: { 'Content-Type': 'application/xml; charset=utf-8' },
      signal: controller.signal
    })
    .then(response => {
      const xmlDoc = DOMParse.parseFromString(response.data, 'text/xml');
      const rawContent = `
        ${xmlDoc.querySelector('cssIncludes').textContent}
        ${xmlDoc.querySelector('javascriptIncludes').textContent}
        ${xmlDoc.querySelector('headerHtml').textContent}
      `;
      // 过滤危险内容，可根据业务需要配置过滤规则
      const safeContent = DOMPurify.sanitize(rawContent, {
        ADD_TAGS: ['script', 'style'],
        ADD_ATTR: ['src', 'href', 'rel']
      });
      setHeaderContent(safeContent);
      setLoading(false);
    })
    .catch(err => {
      if (err.name !== 'CanceledError') {
        setError('头部资源加载失败');
        setLoading(false);
        console.log(err);
      }
    });

    return () => controller.abort();
  }, []);

  if (loading) return <div>头部加载中...</div>;
  if (error) return <div>{error}</div>;

  return (
    <div>
      <div dangerouslySetInnerHTML={{ __html: headerContent }} />
    </div>
  )
}

export default Header;

核心优化说明 #

• 采用React官方dangerouslySetInnerHTMLAPI代替手动DOM操作，符合React生命周期管理规则，避免意外的DOM节点异常
• 新增请求中断逻辑，组件卸载时自动取消未完成的请求，避免内存泄漏和控制台报错
• 新增加载、错误状态提示，提升用户体验
• 修复原有实现中直接插入script标签不会执行的问题（如果不需要执行脚本可删除对应逻辑）
• 可选配置XSS过滤，适配不同安全等级的使用场景

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