Web视频播放与数据安全

HTML5 的 video 标签的安全性
- 保证媒体资源的数据安全
- - Referer 防盗链
  - Blob URL
- 视频⽂件加密
- - 视频⽂件加密算法选择
  - AES 加密
  - 模式
  - MSE，让浏览器播放器进⼊H5时代！
- HLS和MPEG DASH 协议
- - HLS
  - DASH

HTML5 的 video 标签的安全性

H5的video/audio标签可以⽅便的播放⾳视频，只需要把资源的链接设置为src属性即可。但是这种⽅式也把资源的链接暴露了出来，⽤户可以随意下载、播放⾳视频数据。那么如何提⾼媒体资源的安全性呢？

保证媒体资源的数据安全

Referer 防盗链

浏览器内部去下载视频数据，归根到底是发起了⼀个HTTP请求，那么就可以围绕HTTP协议请求做⼀些功课。
Referer 是HTTP请求 header 的⼀部分，浏览器向web服务器发送请求的时候会在header中带上当前的地址，那么服务端可以通过⿊⽩名
单控制哪些地址的⽹⻚可以播放这个视频。⽬前云存储服务商⼤部分都⽀referer防盗链功能。
但是客户端可以伪造这个值，所以Referer不是绝对可信的，只能作为辅助⼿段。

Blob URL

通俗的讲 Blob URL 也是⼀种URL，和⼀般的http开头的URL相⽐，它是blob:// 开头的。它是浏览器维护在内存的⼀堆⼆进制数据，是⼀
种本地的URL。即便⽤户拿到了这个URL，也没办法下载和播放。

关于Blob URL的API

// 创建
objectURL = URL.createObjectURL(object); // 参数类型为 File、Blob 或者 MediaSource
// 回收
URL.revokeObjectURL(objectURL);

有了Blob URL，就可以通过HTTP先把视频下载到浏览器本地，然后转为Blob URL使⽤。然⽽视频下载的过程依然会暴露视频⽂件的真实地址，那么如何进⼀步提⾼安全性呢？

视频⽂件加密

如果视频⽂件是加密存储的，那么就算有⼈下载了视频，甚⾄攻⼊服务器拿到了视频⽂件，⽆法正常播放也是徒劳的。

视频⽂件加密算法选择

加密算法主要分为两⼤类，⼀种是可逆加密算法、⼀种是不可逆加密算法，可不可逆的区别是能否从加密后的密⽂还原成明⽂，能还原的就是可逆算法，否则就是不可逆。⽽对于可逆性算法⼜分为对称性加密和⾮对称性加密，区别的关键在于加密和解密的密钥是否相同。

哈希/摘要
常⽤的哈希算法有MD5、SHA系列等等，特点是不可逆、数据完整性敏感
对称性加密
主要有DES、3DES、AES等标准，AES是DES的替代，现在常⽤的是AES。
⾮对称性加密
主要使⽤的是RSA，有两种密钥，公钥是加密⽤的，私钥是解密⽤的。
对于加密⼤的⽂件⽽⾔适合选择AES加密。

AES 加密

密钥
AES128、AES192、AES256 ，数字对应密钥的⻓度（bit）
密钥可随机⽣成，解密时必须使⽤加密的密钥才能成功解密
填充
填充⽅式是AES的⼀个重要参数，加密和解密时填充⽅式必须⼀致。
要想了解填充的概念，我们先要了解AES的分组加密特性.

先把全量的明⽂分成⼀个个独⽴的明⽂块，⼀块的⻓度和密钥的⻓度⼀致。再把每⼀块使⽤密钥再通过加密器的复杂处理转为密⽂块，再把所有的密⽂块拼接在⼀起，就形成了全量的密⽂。
但是这⾥设计到⼀个问题，以AES128为例，如果最后⼀块明⽂块不⾜128bit怎么办，就需要对其进⾏填充（padding）。
- NoPadding，不进⾏填充，但是需要保证全量明⽂⻓度是128bit的整数倍
- PKCS5/PKCS7 Padding（默认），若明⽂块不⾜16个字节（128bit），则在末尾补⾜相应的字符数，每个字符为缺少的字节数
  ⽐如 {1,2,3,4,5,a,b,c,d,e},缺少6个字节，则补全为{1,2,3,4,5,a,b,c,d,e,6,6,6,6,6,6}
- ISO10126Padding，和PKCS5Padding类似，只不过只有最后⼀个字符为缺少的字符数，其他字符为随机填充

需要注意的是，加密和解密需要使⽤同⼀种填充⽅式

模式

ECB 每⼀个明⽂块独⽴处理；有利于并⾏计算，但是相同的明⽂会加密出相同的密⽂
CBC 引⼊初始偏移量IV，每组的密⽂作为下⼀组的偏移量，防⽌相同的明⽂块加密成相同的密⽂块
CTR
CFB
OFB

crypto-js

crypto-js 是⼀个纯 javascript 写的加密算法类库，可以⾮常⽅便地在 javascript 进⾏ MD5、SHA1、SHA2、SHA3、
RIPEMD-160 哈希散列，进⾏ AES、DES、Rabbit、RC4、Triple DES 加解密

下⾯是利⽤crypto-js进⾏AES加解密代码。使⽤了CBC模式，填充⽅式为PKCS7，并把密钥的前四个字节作为了偏移量IV参数。

// 加密
export const encode = (key, content) => {const encodeKey = CryptoJs.enc.Base64.parse(key)const ivWords = [...encodeKey.words].splice(0, 4)const iv = CryptoJs.lib.WordArray.create(ivWords)const res = AES.encrypt(content, encodeKey, {iv: iv,mode: CryptoJs.mode.CBC,padding: CryptoJs.pad.Pkcs7}).ciphertext;return res;
};
// 解密
export const decode = (key: string, content: string | WordArray) => {const decodeKey = CryptoJs.enc.Base64.parse(key)const ivWords = [...decodeKey.words].splice(0, 4)const iv = CryptoJs.lib.WordArray.create(ivWords)var res = AES.decrypt(content, decodeKey, {iv: iv,mode: CryptoJs.mode.CBC,padding: CryptoJs.pad.Pkcs7})return WordArrayToArrayBuffer(res);
}

流媒体播放
上⾯介绍了通过BlobUrl，以及⽂件资源加解密等⽅式来进⾏web视频播放，保证远程资源的数据安全。但是⽬前的架构依然存在⼀些问题

需要对整个⽂件下载完毕后转成BlobUrl
只能满⾜⼀次播放整个曲⽬的需要，⽆法拆分/合并多个缓冲⽂件
流媒体在MSE之前还在使⽤ Flash 进⾏服务，以及通过 RTMP 协议进⾏视频串流的 Flash 媒体服务器

MSE，让浏览器播放器进⼊H5时代！

有了MSE（Media Source Extensions）后就不⼀样了，允许我们⽣成⼀个指向 MediaSource 对象的BlobUrl，MediaSource是⼀个包含
将要播放的媒体⽂件以及准备信息的容器，以及可以通过 SourceBuffer 进⾏⼆进制缓冲⽂件的拼接。
MSE包含多个复杂的class，其中有两个⽐较重要的API

// 创建⼀个带有给定MIME类型的新的 SourceBuffer
MediaSource.addSourceBuffer(mime)
// 向SourceBuffer中添加媒体⼆进制数据（ArrayBuffer）
SourceBuffer.appendBuffer()

那么利⽤SourceBuffer.appendBuffer()就可以不断更新视频资源，同时不影响当前的播放。也就实现了边下载边播放。幸好，已经有现成的框架和协议把上面所说的都实现了，那就是HLS和MPEG DASH 协议

HLS和MPEG DASH 协议

HLS

apple公司
m3u8 作为索引⽂件，ts作为视频资源
视频切⽚
exp：优酷

DASH

Dynamic Adaptive Streaming over HTTP
基于MSE构建
视频内容切⽚、每个切⽚都有不同的码率
DASH Client可以根据⽹络的情况选择⼀个码率进⾏播放，⽀持在不同码率之间⽆缝切换
推荐视频格式 Fragmented MP4
跨平台兼容性⽐较好
exp: Youtube，B站

参考资料
https://blog.csdn.net/weixin_40117614/article/details/93018940
https://github.com/marhovey/crypto-worker
https://developer.mozilla.org/zh-CN/docs/Web/API/Media_Source_Extensions_API
https://www.jianshu.com/p/1bfe4470349b
https://juejin.cn/post/6844903880774385671
https://zhuanlan.zhihu.com/p/35821605