Electron使用時攔截HTTP請求的解決方案

背景

最近在作一個Web和Electron共用一份代碼的工程，因爲使用到了第三方的庫（咱們是在線地圖），該庫的認證方式是請求時加key，而且它在後臺會校驗referer。

因而問題就來了，Electron是運行在本地的，http請求的時候，是不會帶有受權Web站點的referer的。致使認證失敗，沒法調用所需的api接口。

分析

既然HTTP請求發送的時候不帶referer，那麼咱們給他加上去，是否是就能夠了呢？

對策

方法1：自定義HTTP協議，在發送請求時，補上referer

// 註冊自定義協議
protocol.registerStandardSchemes(['app', '自定義協議'], { secure: true })
// 自定義協議的具體實現
protocol.registerHttpProtocol('自定義協議', (req, cb) => {
        cb({
            url: 「特定的url地址」,
            referrer: "http://被受權的referrer頭信息"
        })
    })
// 發送請求時可使用 自定義協議：//url地址 的形式來發送請求       

發送請求時可使用 自定義協議：//url地址 的形式來發送請求。固然，咱們這個例子裏面只是追加了referrer，其實根據實際需求還能夠作不少其它事情。
相關api文檔：https://electronjs.org/docs/api/protocol#protocolregisterhttpprotocolscheme-handler-completion

方法2：修改窗口會話中發送請求前的行爲

原本覺得方法1以及很完美的解決了問題，可是，在自定義協議認證成功後，在api的使用過程當中，api內部主動發送了http請求，這時的api請求沒有使用自定義協議，再次認證失敗了。因而我想到有個辦法，很天真的認爲能夠解決問題。失敗的作法以下：

    protocol.interceptHttpProtocol("http", (req, cb) => {
        // 此處能夠追加url是否匹配的邏輯判斷
        cb({
            url:req.url,
            referrer: "http://受權的referrer頭信息"
        })
    })

 

相關api文檔：https://electronjs.org/docs/api/protocol#protocolintercepthttpprotocolscheme-handler-completion

我直接攔截了原生的http協議，追加referrer信息，發生的結果是，http->截獲http->修改後發送http->截獲http->修改後發送http->......發生了無限循環！！！

 

因而只能另闢蹊徑，尋找其他解決方案。發現了webquest的行爲能夠捕獲。因而在onBeforeSendHeaders的時機，追加Referer信息。正確的作法以下：

   // 須要攔截的URL地址 
   const xxx_filter = {
        urls: ["https://*.xxx.com/*", "http://*.yyy.com/*"]
    }    
   session.defaultSession.webRequest.onBeforeSendHeaders(xxx_filter, (details, callback) => {
        details.requestHeaders['Referer'] = 'http://受權的referer頭信息'
        callback({ requestHeaders: details.requestHeaders });
    })

 

相關api文檔：https://electronjs.org/docs/api/web-request

總結

經過對webrequest的捕獲，解決了本次的問題，而且把自定義協議那個案也能夠替換掉。webrequest還有好幾個階段的行爲能夠自定義，能夠適用於不一樣場景的需求。