使用 node & express 从我自己的服务器上提供任何外部网页

Question

我想让用户操纵另一个网页的 DOM（比如 www.google.com）。

显然，我并没有任何意图实际更改原始网页上的任何内容，而只是允许视觉更改，看起来好像它们在该网站上。

我开始使用iframe，但没有办法为跨域iframe 操作DOM。因此，我考虑从我自己的服务器和我自己的域提供该网页，这样就不会有任何跨域问题。

这是我在服务器上得到的：

app.get('/showsite', (req, res) => {
  const url = 'https://www.google.com';
  request(url, (err, resp, html) => {
    if (!err) {
        res.send(html);
    }
})}

我在这里所做的实际上是使用 GET 请求接收网页，然后 将 html 响应发送回客户端。

网页确实显示给客户端，但是页面全乱了 - 相对路径错误，样式，编码等。

正确的实现应该是什么？

Answer 1

只要您能够提取并托管构成该网站的所有资产，就可以抓取第三方网站、更改和重新显示其内容。在您的情况下，google.com 登录页面有许多图像需要检索，然后从您自己域中的服务器提供。

1. 您需要使用jsdom 之类的工具来抓取和遍历目标网站的所有子资产。
2. 使用jsdom 之类的工具下载所有子资源，您需要将所有这些资源复制并保存在本地服务器上。您保存它们的目录路径必须与原始路径完全匹配。
3. 拥有所有子资源（css、图像、脚本、字体）后，您就可以操作原始 html 并提供新内容。