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还有好几个阶段的行为能够自定义，能够适用于不一样场景的需求。