使用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并提供新内容。