电子操纵/拦截WebView请求和响应

Question

我想创建一个使用webview显示第三方内容的Electron应用程序.

我希望能够拦截来自此webview的所有请求和响应.有时我想操纵这些内容,有时我想记录它,有时我想什么都不做.

作为响应的一个示例,也许Web服务器将使用TypeScript代码进行响应,也许我想接受该响应,并将其编译为标准JavaScript.

我已经查看了这个页面,但看起来它只能取消请求并操纵标题.该WebRequest的API看起来不适合我用例的需求,因为它仅允许请求和响应的非常小的操作.

我还考虑过设置一些可以充当代理的Web服务器,但我对此表示担忧.我想保持用户隐私,我想确保托管第三方内容的Web服务器看起来像是来自浏览器之类的环境(例如Electron webview)而不是服务器.我知道我可以使用我发送的标题操作请求等等,但是整个解决方案变得更加复杂,然后我想,但可能是唯一的选择.

有没有更好的方法来实现这一点,并对Electron webview有更多的控制权？

Answer 1

我认为您应该研究 The Protocol API。它在内部充当代理。假设您希望用户打开http://www.google.com并查看类似you've been conned!.

const { protocol } = require("electron");

const content = new Buffer("you've been conned!");

protocol.interceptBufferProtocol("http", (request, result) => {
  if (request.url === "http://www.google.com")
    return result(content);
  ... // fetch other http protocol content and return to the electron
});

与WebRequest API相比，还有很多工作要做。但它比独立的本地代理简单得多。

Answer 2

要获取您的电子应用程序发出的任何 http 网络调用的请求正文：

session.defaultSession.webRequest.onBeforeSendHeaders(filter, (details, callback) => {
        if (details.uploadData) {
            const buffer = Array.from(details.uploadData)[0].bytes;
            console.log('Request body: ', buffer.toString());
        }
        callback(details);
      })