【解决方案】记录 rrweb 中字体图标库跨域问题分析及解决方案

rrweb 是一个js库，可以对 html 的操作进行录制抓取和还原播放，

在使用 rrweb 对event事件数据进行还原时，可能会出现一个问题，字体图标资源获取跨域

问题分析

以录制 element-ui 官网为例，还原 html 视频时，图标会显示方框

出现该问题的原因是： 浏览器获取字体图标资源跨域，element 的服务器不允许在该 html 请求而跨域

解决方案

由于服务器是 element 的，而不是我们自己的，无法在服务器中允许浏览器的请求，所以解决的方式只有两种：

1. 还原时，不使用url的方式去请求
2. 使用服务器去请求 element 服务器上的资源，再将数据返回给前端

方案1

还原时，不使用url的方式去请求，前端在录制 html 的时候，可以将字体图标资源处理为base64的格式，然后再去使用 rrweb 录制，还原的时候，rrweb时间数据将不带url，而是直接获取到图标资源的base64的数据去解析

优点：没有兼容问题，在前端录制时能够显示的图标，说明还原时也能够显示

缺点：在前端处理的话，每次开发不同的项目都需要做这种特殊处理，不够灵活

方案2

所以可以考虑在还原 html 时做处理，可以在 node 服务器中请求 element 服务器上的图标资源，然后将其转成base64的数据，再去启动无头浏览器去还原，

优点：不需要所有的项目的前端去处理，统一在 node 服务器处理

缺点：对 rrweb 的原始数据处理，如果处理不当（正则匹配错误或错误地添加了字符等），会出现新的bug

方案2需要注意的点

1. 正则匹配时，需要过滤 url 中的 base64数据

eventsJson.match(/@font-face((?!base64).)+?\}/g)

2. 注意处理 mime 类型

res = fontMap[type] + ';charset=utf-8;base64,' + base64Data;

3. 需要跳过或处理特殊的 url

url = '//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944'

以上是阿里巴巴的标库 url，不带http/https，注意需要做特殊处理