老实说，

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

前言

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

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

RAGFlow 是独立部署的程序，与教育志项目的主应用完全不同源。更棘手的是这方面，RAGFlow 没有提供任何后端接口。没有技术支持，我们无法修改它的代码，也没有办法通过后端代理去抓取页面。浏览器同源策略像一堵无法逾越的墙。父窗口无法通过 contentWindow.document 访问 iframe 内的 DOM，更别说监听选中事件了。

常规方案纷纷失效

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

最终效果

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

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

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

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

原理图解

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

浏览器 │ │ iframe src="http://localhost:/ragflow/docs/..." ▼代理服务 ← 这是我们自己写的，独立部署 │ │ . 向 RAGFlow 服务器发起请求 ▼RAGFlow 服务器 ← 完全不知情 │ │ . 返回 HTML 内容 ▼代理服务 │ │ . 解压、修改 HTML │ ├─
插入 
标签
│
└─
注入自定义脚本
│
. 返回修改后的 HTML 给 iframe
▼iframe 加载修改后的页面注入的脚本开始工作
│
│
. 根据注入脚本的功能执行操作
│
. 通过 window.parent.postMessage 发送给父窗口
▼父窗口收到消息。将文本插入编辑器

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

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

• 自动填充表单
• 追踪使用者点击行为
• 修改页面样式
• Ajax
• vConsole…，

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

主要代码逐段解析

. 启动 HTTP 服务器

const http = require;const url = require;const PORT = process.env.PROXY_PORT ||;const TARGET_HOST = process.env.TARGET_HOST || "ragflow.example.com";// const server = http.createServer => {
const parsed = url.parse;const pathname = parsed.pathname;//
if {
res.writeHead;res.end)，怎么说呢，} else {
// proxyRequest
proxyRequest。res).catch(err => {
res.writeHead;res.end，});}})，server.listen => {
console.log;})，

. proxyRequest

proxyRequestRAGFlow

const https = require;
const zlib = require;async function proxyRequest {
const options = {
hostname: TARGET_HOST,port:,protocol: "https:"。path: targetPath,headers: {
"User-Agent": "",// ...
},rejectUnauthorized: false,// };return new Promise => {
const proxyReq = https.request => {
//
const chunks =;proxyRes.on，proxyRes.on => {
const buffer = Buffer.concat;const encoding = proxyRes.headers;const decompressed = await decompress;const contentType = proxyRes.headers || "";const statusCode = proxyRes.statusCode;//
if {
const location = proxyRes.headers.location;const newPath =
location.startsWith
url.parse.path : location;return proxyRequest
.n
.catch;}
//200
if {
res.writeHead(statusCode,{
"Content-Type":
"text/plain"
});res.end("Error: "
+ statusCode);话说回来，return resolve;}
// HTML
const isHtml =
contentType.includes(
"text/html"
);不过，const headers =
{
"Access-Control-Allow-Origin":
"*"
};if {
// HTML
let html =
decompressed.toString(
"utf-");html =
modifyHtml(html,TARGET_HOST);headers =
"text/html;charset=utf-
";headers =
Buffer.byteLength;res.writeHead(,headers);res.end，} else {
// HTML
headers =
contentType ||
'application/octet-stream';res.writeHead(,headers);res.end，}
resolve;})，});proxyReq.on(
'error',reject);proxyReq.on(
'timeout',=>
{
proxyReq.destroy;怎么说呢，reject(
new Error);})，proxyReq.end;})，不过，}

. decompress

gzipdeflatebr

function decompress {
return new Promise => {
if resolve;else if zlib.gunzip => e?reject : resolve);else if zlib.inflate => e?reject : resolve);老实说，else if zlib.brotliDecompress => e?reject : resolve);else resolve;})，}

. modifyHtml