電子操縱/攔截 WebView 請求和響應

Question

我想創建一個使用webview來顯示 3rd 方內容的 Electron 應用程序。

我希望能夠攔截來自這個 webview 的所有請求和響應。 有時我想操縱這些內容，有時我想記錄它，有時我什么也不想做。

作為響應的一個示例，也許 Web 服務器將使用 TypeScript 代碼進行響應，也許我想獲取該響應，並將其編譯為標准 JavaScript。

我查看了此頁面，但看起來只能取消請求並操作標頭。 WebRequest API看起來不適合我的用例的需求，因為它只允許對請求和響應進行非常小的操作。

我也考慮過設置一些可以充當代理的網絡服務器，但我對此感到擔憂。 我想維護用戶隱私，並且我想確保托管第 3 方內容的 Web 服務器看起來請求來自類似瀏覽器的環境（例如 Electron webview）而不是服務器。 我知道我可以使用我發送的標頭等操作請求，但是整個解決方案變得更加復雜，然后我想要，但可能是唯一的選擇。

有沒有更好的方法來實現這一點，並且可以更好地控制 Electron webview？

Answer 1

我認為您應該研究一下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);
      })