某种程度上说，这个工具写得并不成功，适用性较差，不过过程中遇到的许多问题还是比较有探讨价值的，所以分享出来以供参考和交流。

【需求说明】

关于直播视频的下载，网上可以搜到一些，比如用Fiddler脚本抓包ts保存到本地再合并，但这些方式对小白而言太难了，所以就想着写个傻瓜化的工具。程序的界面设计如下。

界面比较简单，左侧可以设置“直播地址、下载目录、保存频率”以及“请求头user-agent”；右侧是直播视频展示区（iframe标签）。

【踩坑01】

此处以百度为例，当试图在iframe中打开百度页面时，报了个错：“Refused to display [URL] in a frame because it set 'X-Frame-Options' to 'sameorigin'.”

X-Frame-Options 响应头是用来给浏览器指示允许一个页面可否在 <frame>、<iframe>、<embed> 或者 <object> 中展现的标记。

根据这个标识的特点，修改思路便有了：当网络请求响应头返回时对其中的该标识的值进行修改，修改后再嵌套就可规避该错误。相关代码如下

let filters = {urls: ['*://*/*']}
session.defaultSession.webRequest.onHeadersReceived(filters, (details, callback) => {
		details.responseHeaders['X-Frame-Options'] = 'AllowAll'
		callback({cancel: false, responseHeaders: details.responseHeaders})
})

【踩坑02】

此处以抖音直播为例，当使用iframe打开时，报了错“Refused to frame 'https://live.douyin.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors live.ixigua.com live.ixigua.com www.ixigua.com activity.douyin.com creator.douyin.com".”

这是因为响应头中设置了内容安全策略，该标识限制了iframe嵌套需要遵循的规则。

Content-Security-Policy字段有若干指令，可以设置指定的策略允许的源。其值的格式为： [指令] <source> ...; [指令] <source> ...;...

这个标识和之前的标识类似，修改思路：当网络请求响应头返回时对其中的该标识的值进行修改，修改后再嵌套就可规避该错误。相关代码如下

details.responseHeaders['content-security-policy'] = ''

【踩坑03】

有的网站只允许在微信环境中进行访问，这个分情况，如果只是微信的user-agent校验可以通过修改请求头&本地标识来解决；如果是页面代码逻辑控制的，便没太好的办法（修改原始js数据会破坏业务逻辑，也超出了本程序傻瓜化的初衷）。

修改请求头的user-agent代码：

session.defaultSession.webRequest.onBeforeSendHeaders(filters, (details, callback) => {
		details.requestHeaders['User-Agent'] = [微信user-agent]
		callback({cancel: false, requestHeaders: details.requestHeaders})
})

修改程序的navigator.userAgent代码：

mainWindow.loadURL('app://./index.html', {
		userAgent: [微信user-agent]
})

【踩坑04】

通过Electron拦截网络请求时，在数据返回的各个阶段都无法拿到响应数据的responseBody，更尴尬的是，其它的数据都有，唯独没有body体。网上搜了很久，资料很少，没有找到有效的办法。

所以，退而求其次，当接口响应数据返回以后，用fetch再请求一次资源（还好有浏览器缓存，所以基本上也还凑合）。

相关代码：

this.tsIndex = 0
let filters = {urls: ['*://*/*']}
session.defaultSession.webRequest.onCompleted(filters, (details) => {
  let baseUrl = details.url.split('?')[0]
  if (/\.ts$/.test(baseUrl) && !this.downloadDict[baseUrl]) {
    let index = this.tsIndex
    this.tsIndex++
    this.downloadDict[baseUrl] = 1
    console.log(index, details.url)
    fetch(details.url, {method: 'get', responseType: 'arraybuffer'}).then(res => {
    		return res.arrayBuffer()
    }).then((ab) => {
    		this.dataList[index] = ab
    })
  }
})

【功能测试】

测试平台：芒果TV、百度直播、抖音直播

测试结果：芒果TV可以正常抓取；百度直播抓取到的视频数据不能播放；抖音直播抓取不到数据。