跨域获取 iframe 选中文本？自己写个代理中间层，再也不求后端！

RAGFlow 跨域文本选中无法获取？自己写个代理中间层，零后端搞定！

教育志项目需要嵌入 RAGFlow 的原文预览，并获取用户选中的文本插入编辑器。RAGFlow 无后端接口、无法修改代码，跨域三要素全占，怎么办？自己写个 Node 代理中间层，轻松破局！

前言

最近参与了一个教育志编修项目，核心需求是多人协同编写教育年鉴，并依赖 RAGFlow 对原始文献进行切片管理。作者在编写文档时，需要随时检索、查看 RAGFlow 中的原始文献，并能够将原文中选中的片段直接插入到正在编写的文档中。

技术方案很自然：在编辑器旁边通过 iframe 嵌入 RAGFlow 的原文预览页面，用户选中文字，点击“引用”按钮，即可将选中内容插入编辑器。然而，现实给了我们一记重拳——跨域。

RAGFlow 是独立部署的系统，与教育志项目的主应用完全不同源（协议、域名、端口三要素全占）。更棘手的是：RAGFlow 没有提供任何后端接口，没有技术支持，我们无法修改它的代码，也没有办法通过后端代理去抓取页面（因为涉及动态交互） 。浏览器同源策略像一堵无法逾越的墙，父窗口无法通过 contentWindow.document 访问 iframe 内的 DOM，更别说监听选中事件了。

常规方案纷纷失效

方案	为什么不行
postMessage	需要目标页面内配合发送消息，但 RAGFlow 代码无法修改
CORS 跨域资源共享	只适用于接口请求，对 DOM 操作无效
服务器端代理	由后端抓取页面再返回，但 RAGFlow 页面是动态交互的，无法模拟用户选中行为

项目工期紧，前端必须自己杀出一条血路。最终，我们采用了一个“骚操作”——自建 Node 代理中间层，在代理层动态修改 HTML，注入我们需要的脚本，让 iframe 和父窗口“同源”，从而实现跨域 DOM 操作。

本文将完整还原这一方案，并附上可直接运行的源码。无论你遇到的是 RAGFlow 还是任何其他跨域页面，只要你想获取 iframe 内的用户选区，这套方法都能帮你“曲线救国”。

最终效果

我们搭建的代理服务运行在本地 3002 端口，前端只需将 iframe 的 src 指向代理地址，例如：

html

<iframe src="http://localhost:3002/ragflow/docs/123.html"></iframe>

当用户在 iframe 内选中任何文本，父窗口就能收到包含文本内容、位置、上下文等详细信息的消息：

json

{
  "type": "TEXT_SELECTED",
  "text": "光绪二十四年（1898年），京师大学堂成立...",
  "context": {
    "before": "此前，中国近代教育...",
    "after": "此后，各省纷纷设立学堂..."
  },
  "position": { "x": 150, "y": 200 },
  "meta": { "charCount": 48, "wordCount": 9 }
}

父窗口收到消息后，可以立即将文本插入编辑器中，整个过程对用户透明，RAGFlow 无需任何改动，教育志项目后端也无需介入。

原理图解

整个方案的核心是：利用 Node.js 创建一个代理服务器，将 RAGFlow 的页面“偷”回来，然后在返回前注入我们自己的脚本。

text

浏览器 (教育志项目) 
    │
    │ iframe src="http://localhost:3002/ragflow/docs/..."
    ▼
代理服务 (Node.js)  ← 这是我们自己写的，独立部署
    │
    │ 1. 向 RAGFlow 服务器发起请求（无任何修改）
    ▼
RAGFlow 服务器 (https://ragflow.example.com)  ← 完全不知情
    │
    │ 2. 返回 HTML 内容
    ▼
代理服务
    │
    │ 3. 解压、修改 HTML
    │    ├─ 插入 <base> 标签（修正资源路径）
    │    └─ 注入自定义脚本（不仅限于文本选中，可以是任意你需要的脚本）
    │ 4. 返回修改后的 HTML 给 iframe
    ▼
iframe 加载修改后的页面，注入的脚本开始工作
    │
    │ 5. 根据注入脚本的功能执行操作（如监听 mouseup、捕获选中文本）
    │ 6. 通过 window.parent.postMessage 发送给父窗口
    ▼
父窗口收到消息，将文本插入编辑器

通过这种方式，iframe 的源变成了代理服务的源（例如 http://localhost:3002），与父窗口同源，postMessage 通信畅通无阻，且脚本可以自由操作 iframe 的 DOM。整个过程对 RAGFlow 完全透明，它甚至不知道自己被代理了。

更关键的是：注入的脚本不限于文本选择——你可以利用这个能力，在目标页面中植入任何你想要的功能，例如：

• 自动填充表单
• 追踪用户点击行为
• 修改页面样式
• 劫持 Ajax 请求
• 甚至是一个完整的调试工具

代理层就像是一个“中间人”，让你在不修改原始页面的前提下，为它增加任意前端能力。

核心代码逐段解析

1. 启动 HTTP 服务器

javascript

const http = require("http");
const url = require("url");

const PORT = process.env.PROXY_PORT || 3002;
const TARGET_HOST = process.env.TARGET_HOST || "ragflow.example.com"; // 你的 RAGFlow 域名

const server = http.createServer((req, res) => {
  const parsed = url.parse(req.url, true);
  const pathname = parsed.pathname;

  // 健康检查
  if (pathname === "/health") {
    res.writeHead(200, { "Content-Type": "application/json" });
    res.end(JSON.stringify({ status: "ok" }));
  } else {
    // 其他所有请求都交给代理函数处理
    proxyRequest(pathname + (parsed.search || ""), res).catch(err => {
      res.writeHead(502);
      res.end("Proxy Error: " + err.message);
    });
  }
});

server.listen(PORT, () => {
  console.log(`Proxy running at http://localhost:${PORT}`);
});

2. 代理请求函数 proxyRequest

这是最核心的部分，负责向 RAGFlow 发起请求，并根据返回内容做不同处理。

javascript

const https = require("https");
const zlib = require("zlib");

async function proxyRequest(targetPath, res) {
  const options = {
    hostname: TARGET_HOST,
    port: 443,
    protocol: "https:",
    path: targetPath,
    headers: {
      "User-Agent": "Mozilla/5.0 ...",
      "Accept-Encoding": "gzip, deflate, br",
      // ... 其他头
    },
    rejectUnauthorized: false, // 忽略证书错误（调试用）
  };

  return new Promise((resolve, reject) => {
    const proxyReq = https.request(options, async (proxyRes) => {
      // 收集数据
      const chunks = [];
      proxyRes.on("data", chunk => chunks.push(chunk));
      proxyRes.on("end", async () => {
        const buffer = Buffer.concat(chunks);
        const encoding = proxyRes.headers["content-encoding"];
        const decompressed = await decompress(buffer, encoding);

        const contentType = proxyRes.headers["content-type"] || "";
        const statusCode = proxyRes.statusCode;

        // 处理重定向
        if (statusCode >= 300 && statusCode < 400 && proxyRes.headers.location) {
          const location = proxyRes.headers.location;
          const newPath = location.startsWith("http")
            ? url.parse(location).path
            : location;
          return proxyRequest(newPath, res).then(resolve).catch(reject);
        }

        // 非200错误
        if (statusCode !== 200) {
          res.writeHead(statusCode, { "Content-Type": "text/plain" });
          res.end("Error: " + statusCode);
          return resolve();
        }

        // 判断是否为 HTML（RAGFlow 的原文页面通常是 HTML）
        const isHtml = contentType.includes("text/html");

        const headers = { "Access-Control-Allow-Origin": "*" };

        if (isHtml) {
          // 修改 HTML 并注入脚本
          let html = decompressed.toString("utf-8");
          html = modifyHtml(html, TARGET_HOST);
          headers["Content-Type"] = "text/html; charset=utf-8";
          headers["Content-Length"] = Buffer.byteLength(html);
          res.writeHead(200, headers);
          res.end(html);
        } else {
          // 非 HTML 资源（CSS、JS、图片等）直接透传
          headers["Content-Type"] = contentType || "application/octet-stream";
          res.writeHead(200, headers);
          res.end(decompressed);
        }
        resolve();
      });
    });

    proxyReq.on("error", reject);
    proxyReq.on("timeout", () => {
      proxyReq.destroy();
      reject(new Error("Timeout"));
    });
    proxyReq.end();
  });
}

3. 解压函数 decompress

支持 gzip、deflate、br 解压。

javascript

function decompress(buffer, encoding) {
  return new Promise((resolve, reject) => {
    if (!encoding || encoding === "identity") resolve(buffer);
    else if (encoding === "gzip") zlib.gunzip(buffer, (e, r) => e ? reject(e) : resolve(r));
    else if (encoding === "deflate") zlib.inflate(buffer, (e, r) => e ? reject(e) : resolve(r));
    else if (encoding === "br") zlib.brotliDecompress(buffer, (e, r) => e ? reject(e) : resolve(r));
    else resolve(buffer);
  });
}

4. 修改 HTML 并注入脚本 modifyHtml

这里做了两件事：替换相对路径为绝对路径（防止资源加载失败），并注入我们的自定义脚本。你可以把脚本换成任何你需要的功能，不局限于文本选择。

javascript

// 注入脚本 - 这里以文本选择捕获为例
// 你可以根据需求替换为其他任意功能
const INJECTED_SCRIPT = `<script>
(function() {
    if (window.__knowledgeProxyInjected) return;
    window.__knowledgeProxyInjected = true;

    console.log('[RAGFlow Proxy] 脚本已注入');

    // 示例：监听文本选择
    document.addEventListener('mouseup', function(e) {
        const selection = window.getSelection();
        const text = selection.toString().trim();
        if (!text) return;

        // 获取选区位置、上下文等信息
        const range = selection.getRangeAt(0);
        const rect = range.getBoundingClientRect();

        // 提取上下文（前后各100字符）
        const container = range.commonAncestorContainer;
        const fullText = container.textContent || '';
        const index = fullText.indexOf(text);
        const before = index > 0 ? fullText.substring(Math.max(0, index - 100), index) : '';
        const after = index + text.length < fullText.length ? fullText.substring(index + text.length, index + text.length + 100) : '';

        window.parent.postMessage({
            type: 'TEXT_SELECTED',
            text: text,
            context: { before, after },
            position: {
                x: e.clientX,
                y: e.clientY,
                rect: { left: rect.left, top: rect.top, width: rect.width, height: rect.height }
            },
            meta: {
                charCount: text.length,
                wordCount: text.split(/\s+/).filter(w => w.length > 0).length,
                timestamp: Date.now()
            }
        }, '*');
    });

    // 也可以注入其他功能，比如：
    // - 监听点击事件并上报
    // - 自动填充表单
    // - 修改页面样式
    // - 劫持 fetch 请求
    // - 添加调试面板

    // 通知父窗口 iframe 已就绪
    window.parent.postMessage({ type: 'IFRAME_READY' }, '*');
})();
</script>`;

function modifyHtml(html, targetHost) {
  // 替换相对路径为绝对路径
  html = html.replace(/(href|src)=["']/([^"']+)["']/gi, '$1="https://' + targetHost + '/$2"');
  html = html.replace(/url(["']?/([^"')]+)["']?)/gi, 'url(https://' + targetHost + '/$1)');

  // 插入 base 标签和脚本
  const baseTag = '<base href="https://' + targetHost + '/">';
  const headEndIndex = html.toLowerCase().indexOf('</head>');
  if (headEndIndex !== -1) {
    html = html.slice(0, headEndIndex) + baseTag + INJECTED_SCRIPT + html.slice(headEndIndex);
  } else {
    html = baseTag + INJECTED_SCRIPT + html;
  }
  return html;
}

5. （可选）DOCX 等二进制文件的友好处理

RAGFlow 中可能包含 Word 文档，浏览器无法直接预览，我们可以返回一个下载提示页，并提供“请求转换”的扩展点（用于调用后端转换服务）。

javascript

function generateDocxPage(targetHost, targetPath) {
  return `<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>文档下载</title><style>...</style></head>
<body>
  <div class="box">
    <h2>Word 文档</h2>
    <p>该文档为 DOCX 格式，无法直接在浏览器中预览</p>
    <a class="btn" href="https://${targetHost}${targetPath}" download>下载文档</a>
    <button class="btn" onclick="window.parent.postMessage({type:'REQUEST_DOCX_CONVERT',url:window.location.href},'*')">请求转换</button>
  </div>
</body>
</html>`;
}

如何集成到教育志项目中

1. 部署代理服务
   将上述 server.js 部署到服务器（或本地开发环境），通过环境变量 TARGET_HOST 指定 RAGFlow 的域名，例如：

   bash

   export TARGET_HOST=ragflow.example.com
   node server.js
   

   服务默认运行在 3002 端口。

2. 修改前端代码
   在需要展示原文的页面中，将 iframe 的 src 指向代理地址：

   html

   <iframe id="ragflowPreview" src="http://your-proxy-domain:3002/ragflow/path/to/document"></iframe>
   

3. 监听消息并插入编辑器
   在父窗口中监听 message 事件，收到 TEXT_SELECTED 消息后，将文本插入编辑器（如 TinyMCE、Quill 或自定义编辑器）：

   javascript

   window.addEventListener('message', (event) => {
     if (event.data.type === 'TEXT_SELECTED') {
       editor.insertText(event.data.text); // 根据实际编辑器 API 调整
     }
   });
   

整个过程完全无侵入：RAGFlow 不需要任何改动，教育志项目后端也不需要提供新接口，前端只需要修改 iframe 的 src 地址即可。

为什么不用其他方案？（再次强调）

方案	问题
postMessage	需要 RAGFlow 页面内添加代码，不可能
CORS	只适用于接口，不适用于 DOM
后端代理抓取	需要后端配合，且无法模拟用户交互（选中文本）
浏览器插件	需要用户安装，不现实

而我们的代理中间层方案，独立部署、零侵入、纯前端集成，完美解决了所有痛点。

进阶功能：注入任意脚本，扩展无限可能

代理层的核心价值在于：你可以在目标页面中执行任何你想要的 JavaScript 代码。除了文本选择捕获，你还可以：

• 用户行为分析：监听点击、滚动、停留时间，上报给父窗口进行埋点。
• 动态样式调整：根据父窗口的主题，动态修改 iframe 内的 CSS，实现视觉统一。
• 表单自动填充：为 RAGFlow 的搜索框自动填入关键词（父窗口传递）。
• 请求拦截与修改：劫持 iframe 内的 fetch/XHR 请求，添加认证头或修改返回值。
• 注入调试工具：在开发环境中注入 Eruda 或 vConsole，方便调试。

你只需要修改 INJECTED_SCRIPT 的内容，就可以像操作自己的页面一样操作跨域 iframe 内的所有内容。这为前端开发打开了无限的可能性。

注意事项

• CSP 限制：如果 RAGFlow 页面有严格的 Content-Security-Policy，可能阻止内联脚本执行。此时需要更复杂的处理（如通过 nonce 或动态创建 script 标签），但大多数系统不会设置如此严格的策略。
• 证书问题：如果 RAGFlow 使用自签名证书，设置 rejectUnauthorized: false 可临时绕过，生产环境建议妥善配置证书。
• 性能优化：代理会缓冲整个响应体，对于超大 HTML 可能占用内存。可考虑流式转发，但修改 HTML 需要完整内容，此处不再展开。

完整源码

最后，附上整合了以上所有功能的 server.js 完整源码（可直接运行）：

javascript

// server.js - 教育志 RAGFlow 代理中间层
const http = require("http");
const https = require("https");
const url = require("url");
const zlib = require("zlib");

const PORT = process.env.PROXY_PORT || 3002;
const TARGET_HOST = process.env.TARGET_HOST || "ragflow.example.com";

// 注入脚本 - 你可以根据需要自由修改！
const INJECTED_SCRIPT = `<script>
(function() {
    if (window.__knowledgeProxyInjected) return;
    window.__knowledgeProxyInjected = true;

    console.log('[RAGFlow Proxy] 脚本已注入');

    // 示例：监听文本选择
    document.addEventListener('mouseup', function(e) {
        const selection = window.getSelection();
        const text = selection.toString().trim();
        if (!text) return;

        const range = selection.getRangeAt(0);
        const rect = range.getBoundingClientRect();

        // 提取上下文
        const container = range.commonAncestorContainer;
        const fullText = container.textContent || '';
        const index = fullText.indexOf(text);
        const before = index > 0 ? fullText.substring(Math.max(0, index - 100), index) : '';
        const after = index + text.length < fullText.length ? fullText.substring(index + text.length, index + text.length + 100) : '';

        window.parent.postMessage({
            type: 'TEXT_SELECTED',
            text: text,
            context: { before, after },
            position: {
                x: e.clientX,
                y: e.clientY,
                rect: { left: rect.left, top: rect.top, width: rect.width, height: rect.height }
            },
            meta: { charCount: text.length, wordCount: text.split(/\s+/).filter(w => w.length > 0).length }
        }, '*');
    });

    // 你可以在这里注入任意其他功能：
    // - 监听点击事件并上报
    // - 自动填充表单
    // - 修改页面样式
    // - 劫持 fetch 请求
    // - 添加调试面板

    window.parent.postMessage({ type: 'IFRAME_READY' }, '*');
})();
</script>`;

// 解压函数
function decompress(buffer, encoding) {
  return new Promise((resolve, reject) => {
    if (!encoding || encoding === "identity") resolve(buffer);
    else if (encoding === "gzip") zlib.gunzip(buffer, (err, result) => err ? reject(err) : resolve(result));
    else if (encoding === "deflate") zlib.inflate(buffer, (err, result) => err ? reject(err) : resolve(result));
    else if (encoding === "br") zlib.brotliDecompress(buffer, (err, result) => err ? reject(err) : resolve(result));
    else resolve(buffer);
  });
}

// 修改 HTML
function modifyHtml(html, targetHost) {
  html = html.replace(/(href|src)=["']/([^"']+)["']/gi, '$1="https://' + targetHost + '/$2"');
  html = html.replace(/url(["']?/([^"')]+)["']?)/gi, 'url(https://' + targetHost + '/$1)');

  const baseTag = '<base href="https://' + targetHost + '/">';
  const headEndIndex = html.toLowerCase().indexOf('</head>');
  if (headEndIndex !== -1) {
    html = html.slice(0, headEndIndex) + baseTag + INJECTED_SCRIPT + html.slice(headEndIndex);
  } else {
    html = baseTag + INJECTED_SCRIPT + html;
  }
  return html;
}

// 代理请求
async function proxyRequest(targetPath, res) {
  const options = {
    hostname: TARGET_HOST,
    port: 443,
    protocol: "https:",
    path: targetPath,
    method: "GET",
    headers: {
      "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36",
      "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
      "Accept-Language": "zh-CN,zh;q=0.9",
      "Accept-Encoding": "gzip, deflate, br",
      "Connection": "keep-alive",
    },
    timeout: 30000,
    rejectUnauthorized: false,
  };

  return new Promise((resolve, reject) => {
    const proxyReq = https.request(options, async (proxyRes) => {
      try {
        const chunks = [];
        proxyRes.on("data", (chunk) => chunks.push(chunk));

        const buffer = await new Promise((resolve, reject) => {
          proxyRes.on("end", () => resolve(Buffer.concat(chunks)));
          proxyRes.on("error", reject);
        });

        const encoding = proxyRes.headers["content-encoding"];
        const decompressed = await decompress(buffer, encoding);

        const contentType = proxyRes.headers["content-type"] || "";
        const statusCode = proxyRes.statusCode;

        // 处理重定向
        if (statusCode >= 300 && statusCode < 400 && proxyRes.headers.location) {
          const location = proxyRes.headers.location;
          const newPath = location.startsWith("http") ? url.parse(location).path : location;
          return proxyRequest(newPath, res).then(resolve).catch(reject);
        }

        if (statusCode !== 200) {
          res.writeHead(statusCode, { "Content-Type": "text/plain" });
          res.end("Error: " + statusCode);
          return resolve();
        }

        const isHtml = contentType.includes("text/html");
        const headers = { "Access-Control-Allow-Origin": "*", "Cache-Control": "no-cache" };

        if (isHtml) {
          let html = decompressed.toString("utf-8");
          html = modifyHtml(html, TARGET_HOST);
          headers["Content-Type"] = "text/html; charset=utf-8";
          headers["Content-Length"] = Buffer.byteLength(html);
          res.writeHead(200, headers);
          res.end(html);
          console.log("[Proxy] HTML 已处理并注入脚本");
        } else {
          headers["Content-Type"] = contentType || "application/octet-stream";
          res.writeHead(200, headers);
          res.end(decompressed);
        }
        resolve();
      } catch (err) {
        reject(err);
      }
    });

    proxyReq.on("error", reject);
    proxyReq.on("timeout", () => {
      proxyReq.destroy();
      reject(new Error("Timeout"));
    });
    proxyReq.end();
  });
}

// 创建 HTTP 服务器
const server = http.createServer((req, res) => {
  const parsed = url.parse(req.url, true);
  const pathname = parsed.pathname;

  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");

  if (req.method === "OPTIONS") {
    res.writeHead(200);
    return res.end();
  }

  if (pathname === "/health") {
    res.writeHead(200, { "Content-Type": "application/json" });
    res.end(JSON.stringify({ status: "ok", target: TARGET_HOST }));
  } else {
    proxyRequest(pathname + (parsed.search || ""), res).catch((err) => {
      console.error("[Proxy Error]", err);
      res.writeHead(502, { "Content-Type": "application/json" });
      res.end(JSON.stringify({ error: err.message }));
    });
  }
});

server.listen(PORT, () => {
  console.log(`[教育志 RAGFlow 代理] 运行在 http://localhost:${PORT}`);
  console.log(`目标主机: ${TARGET_HOST}`);
});

总结

通过自建 Node 代理中间层，我们在零后端配合的情况下，完美实现了跨域 iframe 中选中文本的捕获，并将文本实时传递到教育志项目的编辑器中。但更重要的是，这个方案为你打开了在任意第三方网页上执行任意脚本的大门——注入文本选择只是其中一个小小例子。

当你再次面对跨域 iframe DOM 操作难题时，不妨试试这个“中间人”思路。代码在手，跨域我有！

---

希望这篇文章能帮助到遇到类似问题的同行。有任何疑问或改进建议，欢迎在评论区留言交流。