electron如何拦截网络请求并处理响应（二）
站长
· 阅读数 232
前景摘要
废话不多说，今天来填个坑。
先介绍一下用到的api
session
管理浏览器会话、cookie、缓存、代理设置等。
获取BrowserWindow的session
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ width: 800, height: 600 })
win.loadURL('https://github.com')
const ses = win.webContents.session
console.log(ses.getUserAgent())
protocol
注册自定义协议并拦截基于现有协议的请求。
主要分为两个类别register和intercept
intercept主要用于拦截已有的协议https,http,fileregister主要用于注册一个自定义协议并拦截，例如myApp://xxx的url，需要注册一个myApp的协议，进行拦截。如下面的例子。
protocol.registerBufferProtocol('myApp', (request, callback) => {
// 这里处理自定义协议的请求
console.log(request.url, '自定义协议被访问');
const htmlContent = '<html><body><div>自定义协议内容</div></body></html>';
callback({
mimeType: 'text/html',
data: Buffer.from(htmlContent, 'utf-8'),
});
});
拦截之后的响应，不同的api响应的字段和数据类型是不一致的。
例如registerFileProtocol的callback就的参数就需要为{ path: 'file_path'}。具体可以看下文的ProtocolResponse的ts定义。
interface ProtocolResponse {
// Docs: https://electronjs.org/docs/api/structures/protocol-response
/**
* The charset of response body, default is `"utf-8"`.
*/
charset?: string;
/**
* The response body. When returning stream as response, this is a Node.js readable
* stream representing the response body. When returning `Buffer` as response, this
* is a `Buffer`. When returning `String` as response, this is a `String`. This is
* ignored for other types of responses.
*/
data?: (Buffer) | (string) | (NodeJS.ReadableStream);
/**
* When assigned, the `request` will fail with the `error` number . For the
* available error numbers you can use, please see the net error list.
*/
error?: number;
/**
* An object containing the response headers. The keys must be String, and values
* must be either String or Array of String.
*/
headers?: Record<string, (string) | (string[])>;
/**
* The HTTP `method`. This is only used for file and URL responses.
*/
method?: string;
/**
* The MIME type of response body, default is `"text/html"`. Setting `mimeType`
* would implicitly set the `content-type` header in response, but if
* `content-type` is already set in `headers`, the `mimeType` would be ignored.
*/
mimeType?: string;
/**
* Path to the file which would be sent as response body. This is only used for
* file responses.
*/
path?: string;
/**
* The `referrer` URL. This is only used for file and URL responses.
*/
referrer?: string;
/**
* The session used for requesting URL, by default the HTTP request will reuse the
* current session. Setting `session` to `null` would use a random independent
* session. This is only used for URL responses.
*/
session?: Session;
/**
* The HTTP response code, default is 200.
*/
statusCode?: number;
/**
* The data used as upload data. This is only used for URL responses when `method`
* is `"POST"`.
*/
uploadData?: ProtocolResponseUploadData;
/**
* Download the `url` and pipe the result as response body. This is only used for
* URL responses.
*/
url?: string;
}
我们本次使用都是目前已经废弃的api，当然这些api也是在22年中还未被废弃。文档：protocol
使用protocol拦截并处理响应
上一篇文章讲过，这个方案是可以拦截所有的请求的。但如果你不想拦截本次请求，不能直接交还给electron，必须要自己处理本次拦截的请求。
使用interceptHttpProtocol - 初步踩坑
首先我们需要拦截所有的http和https的请求，对符合条件的请求进行特殊的响应，不符合条件的则“放行”。
ses.protocol.interceptHttpProtocol('https', (request, callback) => {
if (checkIsNeedLocal(request.url)) {
// 需要特殊处理的url，转发到file协议中。这里的转发不会改变web中request url的地址
// file协议可以使用interceptFileProtocol('file',()=>{})来进行拦截，这里就不列举了
callback({
url: `file://${request.url.replace(/https?:\/\//,'')}`,
});
} else {
// 放行
}
});
需要特殊处理的反而处理起来会相对简单，因为不管是响应文件的url还是响应文件流，都很好处理。反而“放行”的请求是不好处理的。
interceptHttpProtocol中的如果需要“放行”callback参数
callback({
url: request.url, // 请求地址
method: request.method, // 请求参数
session: session.defaultSession, // 和拦截器注册时不一致的session【重要】
headers: request.headers, // 请求头
uploadData, // 请求体(post 请求中需要的内容)
})
可以看到我们这里最麻烦的就是处理请求体了，uploadData的数据是通过request.uploadData中取到
uploadData需要{contentType: string; data: (string) | (Buffer);}的参数
request.uploadData则是返回{ blobUUID?: string; bytes: Buffer; file?: string;}[]
一个返回数组，一个需要对象结构。里面包含的内容也各不相同。尝试进行转换。
async function getCombinedBuffer(uploadDataParts: any[]) {
let buffers: any[] = [];
for (const part of uploadDataParts) {
if (part.type === 'rawData') {
// 直接创建Buffer对象
buffers.push(Buffer.from(part.bytes));
} else if (part.type === 'blob') {
// 通过blobUUID获取Buffer对象
const buffer = await ses.getBlobData(part.blobUUID);
buffers.push(buffer);
}
}
// 合并所有Buffer对象
return Buffer.concat(buffers);
}
const contentType = request.headers?.['Content-Type'] || 'application/json';
uploadData = await new Promise((resolve) => {
if (!request.uploadData) {
return;
}
const res: any = {
contentType,
};
const isHaveBlob = request.uploadData.some((i) => i.blobUUID);
if (!isHaveBlob) {
res.data = request.uploadData.map((i) => i.bytes.toString()).join();
resolve(res);
return;
}
getCombinedBuffer(request.uploadData)
.then((buffer) => {
res.data = buffer;
resolve(res);
})
.catch((err) => {
console.log(err, 'combinedBufferError');
resolve(undefined);
});
});
上面的例子里判断了，当没有blobUUID时，也就是无文件上传的场景。直接把request.uploadData遍历，转化为string就可以。
当有文件上传的时候，则需要通过session.getBlobData(blobUUID)取出文件的数据，并转化为buffer，再连接前后的数据，组合成一个buffer
当然，实测后文件上传的方案是错误的。直接把文件从blob转buffer再Buffer.concat，服务端拿到的数据是异常的。
同时在使用session.getBlobData(blobUUID)时，发现有些文件这个方法是取不到的，promise一直处于pending状态。
interceptBufferProtocol - 最终方案
使用http的拦截器时，响应是由callback这个方法内部执行的，这对于我们开发来讲是黑盒部分，官方的文档并不能解决我们的问题。
于是使用buffer拦截器，自己来做请求，把响应数据转成buffer传给callback
const interceptRequestRemote = async (request, callback) => {
const client = https.request(request.url, {
method: request.method,
headers: { ...request.headers },
});
if (request.uploadData) {
for (const data of request.uploadData) {
if (data.type === "rawData") {
// 直接创建Buffer对象
client.write(data.bytes);
// buffers.push(Buffer.from(data.bytes));
} else if (data.type === "blob") {
// 通过blobUUID获取Buffer对象
const buffer = await sess.getBlobData(data.blobUUID);
client.write(buffer);
}
}
}
client.on("error", (err) => {
console.error(`sess request error: ${request.url}`, err);
});
client.on("response", (response) => {
let body = [];
response.on("error", (err) => {
console.error(`sess request response error: ${request.url}`, err);
});
response.on("data", (chunk) => {
body.push(chunk);
});
response.on("end", () => {
body = Buffer.concat(body);
callback({
statusCode: response.statusCode,
headers: response.headers,
data: body,
});
});
});
console.log(`sess request: ${request.url}`);
client.end();
};
const interceptHandler = (request, callback) => {
const localPath = checkIsNeedLocal(request);
if (localPath) {
fs.readFile(localPath, (err, data) => {
if (err) {
console.error("readFile error", err);
interceptRequestRemote(request, callback);
return;
}
const ext = path.extname(localPath);
const mimeType =
ext === ".js"
? "application/javascript"
: ext === ".css"
? "text/css"
: "text/html";
callback({
data,
mimeType,
});
});
} else {
interceptRequestRemote(request, callback);
}
};
ses.protocol.interceptBufferProtocol("https", interceptHandler);
请求选用node:https来处理，electron提供的net方法过于简单了。
上面的方案，最终通过了正常post请求中的 -> json和file类型。
但是！await sess.getBlobData(data.blobUUID)会偶现一直pending的问题！！
ok本篇内容已经够多了，最终留个坑。
这个方案已经是终版了，只是对于低版本的electron还是不适用，稍后会出一下具体原因。再贴到这个文章的底部。
转载自:https://juejin.cn/post/7311619723317657611