Electron 网络拦截实战示例详解
正文
Electron 提供的 webRequest API，允许开发者对网络进行过滤和监听，并且可以修改 header 字段甚至请求地址，功能非常强大，它的类结构如下：
不过需要注意，该模块只能在主进程中使用，接下来为大家介绍 webRequest 三个非常典型的使用场景：
自定义 UA
有些接口为了过滤非法请求，会首先校验 UserAgent，正常的浏览器是无法伪造 UA 的，不过在 Electron 里面可以很容易做到，webRequest 模块提供的 onBeforeSendHeaders 方法能够对域名进行过滤，拦截即将发出去的请求头，修改之后再真正的发出去。例如下面的代码会在访问 github 相关域名的时候，把 header 中的 User-Agent 字段修改为 MyAwesomeAgent：
const { session } = require('electron')
const filter = {
urls: ['https://*.github.com/*']
}
session.defaultSession.webRequest.onBeforeSendHeaders(filter, (details, callback) => {
details.requestHeaders['User-Agent'] = 'MyAwesomeAgent'
callback({ requestHeaders: details.requestHeaders })
})
绕过跨域限制
使用 Electron 加载第三方网站的时候，默认行为和 Chrome 是一致的，都会受到同源策略的影响，为了验证，我们首先加载本地 3020 端口上的静态文件：
win = new BrowserWindow({ width: 600, height: 400 })
win.loadURL('http://localhost:3020')
win.webContents.toggleDevTools({ mode: 'bottom' })
然后在 3030 端口上启动一个 http 服务：
const Koa = require('koa')
const app = new Koa()
app.use((ctx, next) => {
ctx.body = {
success: true,
}
})
app.listen(3030)
此时在控制台请求 3030 端口上的服务，会发现典型的跨域报错，果不其然被 cors 策略拒绝了：
了解跨域原理的同学都知道，其实网络请求是已经回来了，但是浏览器会检查 response header 里面的 Access-Control-Allow-Origin，如果当前域名不在里面，就 block 这个响应，如下图所示：
要想让浏览器不 block 响应的话，传统的解决方案一般有两种：
- 让后端添加
Access-Control-Allow-Origin，支持当前的 Origin - 用 node 做本地代理来转发请求
而在 Electron 里面，又多了一种方案，因为 Electron 可以对网络请求进行拦截，任意修改请求或响应的 header，那么只要把响应标头里面的 Access-Control-Allow-Origin 改掉不就好了么：
代码如下：
const filter = {
urls: ['http://localhost:*/*'],
}
win.webContents.session.webRequest.onHeadersReceived(filter, (details, callback) => {
const { responseHeaders } = details
responseHeaders['Access-Control-Allow-Origin'] = ['*']
callback({ responseHeaders })
})
打开网络面板观察网络请求，响应标头里面就有 Access-Control-Allow-Origin 了，成功绕过 cors 校验：
请求转发
通过 webRequest API，可以将发到接口 A 的请求转发到接口 B。为了验证这个能力，我们写了一个 http 服务，同时监听 3030 和 4040 端口，并响应 JSON 数据，里面包含了 port 字段表示当前请求到了哪个端口：
const http = require('http')
const URL = require('url')
function listen(port) {
http
.createServer((req, res) => {
const { url, method, headers } = req
const { query, pathname } = URL.parse(url, true)
res.setHeader('Content-Type', 'application/json')
res.end(JSON.stringify({ method, pathname, query, headers, port }))
})
.listen(port)
}
listen(3030)
listen(4040)
然后通过 onBeforeRequest方法进行拦截：
win.webContents.session.webRequest.onBeforeRequest(
{
urls: ['http://localhost:3030/*'],
},
(details, callback) => {
callback({ redirectURL: 'http://localhost:4040' })
},
)
在控制台发送 3030 端口请求，结果返回了 4040 端口的数据：
这个能力非常强大，例如可以做下面的事情：
- 后端接口未部署之前，前端自己做本地接口 mock
- 把某个页面的 js 拦截掉，换成自己的 js 来调试
- 故意请求一个不存在的地址，然后仅对授权用户转发到真实地址
以上就是Electron 网络拦截实战示例详解的详细内容，更多关于Electron 网络拦截的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家介绍了JS前端画布与组件元信息数据流示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了 微信小程序 保留小数(toFixed)详细介绍的相关资料,这里附有实例，帮助大家学习参考此部分知识，需要的朋友可以参考下2016-11-11
这篇文章主要为大家介绍了JS算法题解搜索插入位置方法示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要介绍了nuxt.js 多环境变量配置，一般在香米开发中会有三个环境开发环境也叫测试环境(test) 、RC环境也叫预发布环境(rc) 、线上环境(production) 下面来看看文章内容的详细介绍,需要的朋友可以参考一下2021-11-11
这篇文章主要介绍了微信小程序 开发指南详解的相关资料,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了微信小程序左滑删除效果的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
这篇文章主要为大家介绍了JavaScript获取上传文件相关信息示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了微信小程序页面开发注意事项整理的相关资料,需要的朋友可以参考下2017-05-05
这篇文章主要介绍了微信小程序template模板使用的相关资料,希望通过本文能帮助到大家，让大家理解掌握这样的功能，需要的朋友可以参考下2017-10-10
这篇文章主要介绍了17个JavaScript 单行程序 ，在 JavaScript 代码的世界里，在保证代码易读性的前提下更少等于更好，下面文章将为大家分享17 个 JavaScript 单行程序代码，希望能帮助到大家2021-12-12
最新评论