Electron网络拦截的方法是什么

发布时间:2023-03-09 15:48:47 作者:iii
来源:亿速云 阅读:177

本篇内容介绍了“Electron网络拦截的方法是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

Electron 提供的 webRequest API,允许开发者对网络进行过滤和监听,并且可以修改 header 字段甚至请求地址,功能非常强大,它的类结构如下:

Electron网络拦截的方法是什么

不过需要注意,该模块只能在主进程中使用,接下来为大家介绍 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 策略拒绝了:

Electron网络拦截的方法是什么

了解跨域原理的同学都知道,其实网络请求是已经回来了,但是浏览器会检查 response header 里面的 Access-Control-Allow-Origin,如果当前域名不在里面,就 block 这个响应,如下图所示:

Electron网络拦截的方法是什么

要想让浏览器不 block 响应的话,传统的解决方案一般有两种:

而在 Electron 里面,又多了一种方案,因为 Electron 可以对网络请求进行拦截,任意修改请求或响应的 header,那么只要把响应标头里面的 Access-Control-Allow-Origin 改掉不就好了么:

Electron网络拦截的方法是什么

代码如下:

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 校验:

Electron网络拦截的方法是什么

请求转发

通过 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 端口的数据:

Electron网络拦截的方法是什么

这个能力非常强大,例如可以做下面的事情:

“Electron网络拦截的方法是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

推荐阅读:
  1. 基于Electon的图片采集工具是怎样的
  2. Electron中webview是如何与主进程渲染进程进行事件监听通信

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

electron

上一篇:怎么在Java中终止一个线程

下一篇:python爬虫字体加密问题怎么解决

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》