如何在 <script> 运行时从 React 客户端抓取网页？

Question

我想对用户在输入字段中输入的网站进行网络抓取，以查找页面上的所有链接，以便递归地探索该网站。然而，由于现在大多数网站都使用 JS，我想先运行网站上的所有

<script>

，然后再查询链接（

<a>

或

document.links

）。

从客户端以及 React 来看，我找不到任何东西可以做到这一点，也许我毕竟不擅长 Google 搜索。一般来说，这会陷入安全问题，即跨站点脚本。

有没有客户端 JS 包来创建安全的虚拟 DOM ——这里不是谈论 React！ — 用于执行其他网站的

<script>

？

到目前为止，我已经尝试过：

• Puppeteer：据我所知，仅适用于服务器端。
• JSDom：创建我正在寻找的虚拟 DOM，但也只能在服务器端工作。

• <iframe>

  ：由于跨站点脚本，如果

  src

  位于另一个域，您将无法访问其内部 HTML。

• DOMParser

  ：同样由于跨站点脚本，

  <script>

  被标记为不可执行。

Answer 1

有趣的困境。

这可能只是您的应用程序的一个框架，删除了一些细节，但这里有一个想法： 打开一个node.js应用程序，使用express来托管一个webport。 使用此库：https://www.npmjs.com/package/node-iframe 加载到您想要抓取的网站的 iframe 中。该库还可以帮助您绕过 CORS，以便您可以加载几乎任何网站。然后，使用客户端代码获取 iframe 的主体：

let frameObj = document.getElementById(frameID);
let frameContent = frameObj.contentWindow.document.body.innerHTML;

（代码由 https://www.tutorialspoint.com/How-to-get-the-body-s-content-of-an-iframe-in-JavaScript提供）

请务必在延迟后执行此操作，以确保 js 在获取innerHTML 之前已加载所有内容。然后以某种方式将文本转发到后端，一个潜在的例子是使用来自前端的 post 请求与innerHTML，到另一个页面，如

/recieve

并使用如下内容捕获该内容：

const bodyParser = require('body-parser');
app.post('/recieve', (req, res) => {
    const receivedVariable = req.body.variable;
    console.log('Received Variable:', receivedVariable);
res.send('success');
});

请记住，您将需要三个包：node-iframe、body-parser 和express 来实现此目的。

我知道这无论如何都不是一个“传统”的网络抓取工具，并且与其他选项相比可能会很慢，但我相信这是相对无风险的，因为它在浏览器中的 iframe 中运行网站，而不是在后端运行脚本代码，就像在爬虫中使用 eval 一样。

祝您编码顺利！