React中如何隔离API返回HTML的CSS样式并禁用JS执行

针对你遇到的外部HTML样式污染全局、JS执行报错的问题，下面给出两种可靠的解决方案，基于你的现有React代码进行改造：

方案一：使用Shadow DOM实现样式隔离 + 移除JS脚本 #

Shadow DOM是浏览器原生的样式隔离方案，能让嵌入的HTML拥有独立的样式上下文，同时我们可以在插入前过滤掉所有<script>标签来禁用JS执行。

实现HTMLRenderer组件 #

创建HTMLRenderer.jsx，代码如下：

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

const HTMLRenderer = ({ htmlContent }) => {
  const containerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current || !htmlContent) return;

    // 清空容器
    containerRef.current.innerHTML = '';

    // 创建Shadow DOM根节点
    const shadowRoot = containerRef.current.attachShadow({ mode: 'open' });

    // 过滤HTML中的所有script标签
    const filteredHtml = htmlContent.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');

    // 将处理后的HTML插入Shadow DOM
    shadowRoot.innerHTML = filteredHtml;

    // 可选：添加基础样式让内容自适应容器
    const style = document.createElement('style');
    style.textContent = `
      :host {
        display: block;
        width: 100%;
        height: 100%;
        overflow: auto;
      }
      * {
        box-sizing: border-box;
      }
    `;
    shadowRoot.appendChild(style);
  }, [htmlContent]);

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

export default HTMLRenderer;

修改App组件（适配你的业务流程） #

替换成实际的Axios POST请求逻辑：

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

function App() {
  const [htmlContent, setHtmlContent] = useState('');
  const [userUrl, setUserUrl] = useState('');

  // 用户提交URL的处理函数
  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('your_api_endpoint', { url: userUrl });
      setHtmlContent(response.data);
    } catch (error) {
      console.error('Error fetching HTML:', error);
    }
  };

  return (
    <div className="app">
      {/* 用户输入URL的表单 */}
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={userUrl}
          onChange={(e) => setUserUrl(e.target.value)}
          placeholder="输入要查看的网站URL"
        />
        <button type="submit">加载页面</button>
      </form>

      {/* 你的其他组件 */}
      <div className="webview" style={{ width: '100%', height: '80vh', border: '1px solid #ccc' }}>
        <HTMLRenderer htmlContent={htmlContent} />
      </div>
    </div>
  );
}

export default App;

方案二：使用iframe实现隔离（更简单的替代方案） #

iframe天然具备样式和上下文隔离能力，通过sandbox属性可以直接禁用JS，配置更简单：

修改HTMLRenderer组件为iframe版本 #

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

const HTMLRenderer = ({ htmlContent }) => {
  const iframeRef = useRef(null);

  useEffect(() => {
    if (!iframeRef.current || !htmlContent) return;

    // 过滤script标签（双重保障，sandbox已禁用JS）
    const filteredHtml = htmlContent.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');

    // 写入iframe内容
    const iframeDoc = iframeRef.current.contentDocument || iframeRef.current.contentWindow.document;
    iframeDoc.open();
    iframeDoc.write(filteredHtml);
    iframeDoc.close();
  }, [htmlContent]);

  return (
    <iframe
      ref={iframeRef}
      style={{ width: '100%', height: '100%', border: 'none' }}
      sandbox="allow-same-origin allow-top-navigation allow-forms"
    />
  );
};

export default HTMLRenderer;

关键说明 #

• Shadow DOM方案：更轻量，与主页面DOM上下文更贴近，适合需要精细控制的场景
• iframe方案：配置简单，天然隔离样式和JS，但存在独立的窗口上下文，交互逻辑需注意差异
• 两种方案都通过正则过滤了<script>标签，双重保障禁用外部JS执行

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