Hi，大家好，欢迎大家观看由IT猫之家打造的【网络爬虫教学】虫师终极武器之Chromium定制开发系列教学文章的第五篇，如果您是第一次观看本系列教程，请先移步到这里看完前面的文章后再回来哦！大家在学习的过程中，有任何疑问可以留言或加入我们的QQ技术交流群进行探讨： 544185435
概述
在上一篇文章末尾，我给大家分享了如何随机化webgl接口（主要针对显卡型号）的方案，其实呢，只要掌握了这个，后面其他的都是一样道理的，我们只要照着葫芦画瓢就好，那么接下来我们一起来看看今天的任务吧，今天我们主要要实现：canvas、webAudio以及webRTC这三个接口的随机化，如果说谁是FP重点的检测对象，那么以上三个绝对是首选的。
关于canvas
Canvas意为“画布”，是H5首度引入的一种绘画标签，常用于网页中实时生成图像，并且可以操作图像的内容，基本上它是一个可以用JavaScript操作的位图，而多数情况下开发者们都利用它来绘制各种2D、3D图像，而作为H5的绘画API它也有一个输出字符串的接口，可直接将绘画的图片转化成base64，而canvas fingerprint 就是利用了这个接口计算出bs64然后再进行hash计算从而得出该指纹凭证。
关于webAudio
webAudio同样也是H5导出的API接口之一，它就像是web端的Audition，可用作音频处理，其功能非常强大，从音频剪辑、噪音处理，到音频合成，它都完全可以胜任，而它的指纹检测机制与Canvas类似，都是导出一个介质，Canvas导出的是图形，而webAudio则导出的是音频，同样，它们在同一机器上绘制的内容，出来的hash值都是一样的，所以该接口也是作为FP枚举的重要指标之一。
关于webRTC
webRTC为网页即时通讯协议（ Web Real-Time Communication ）的缩写，常用于实时语音视频通话等，是一个基于网页浏览器通信的API，通过该API，JavaScript可以轻松的实现网络视频通话这类的web应用开发，而webRTC大致可划分成 Network Stream API、 RTCPeerConnection、和Peer-to-peer Data 这三大类， 其中 RTCPeerConnection 标准协议在通信时表示一个本地与远端建立链接的对象，该对象提供了创建、保持、监控、与关闭等连接方法的实现，在通信的过程中，它有个方法可以直接暴露客户端IP真实地址，而FP利用该方法可以轻松取得客户端的真实IP地址，即使用了匿名的dai理，也无济于事。
Canvas接口随机化的实现
从上述介绍中我们可以得知，Canvas指纹是基于绘画的接口导出的字符串加密后得到的，那么，对于它的随机化，我们可以从它绘画的时候着手，或者在输出字符串的时候着手，这里我推荐使用前者。
FilStyle是Canvas的样式接口，它支持符合CSS3国际颜色值标准的有效字符串输入，而我们可以在该接口中实现样式的篡改从而达到每次绘画的结果都不一样的目的，我们可以预设一些颜色值让其在绘画时可自动选择：
// 这些 fillStyle 的值均为 '橙色'
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";
我们这里为了方便操作，采用了第三种方式，即：ctx.fillStyle = “rgb(255,165,0)”; 在渲染时，我们直接将网页（通常为JS）传入的Style,进行篡改，其中rgb值为随机0-255，那么最终的的绘画效果就是按实际产生的值对应的颜色为准，如果不想太过随机，那么大家可以先解析Style，然后再进行偏移量计算，比如每次随机增加0-5，这样对外观的影响不大，同时也起到了随机的作用。
留意框框里的颜色变化以及Signature的变化。
我们可以对比这两张图，不但颜色改变，其它值也跟着发生了本质的改变。
重构FillRect接口
我们说FillStyle是Canvas的样式接口，那么FillRect则为它的填充接口，同样，我们也可以重写这个接口实现随机化的目的，首先，我们从上图可以看出这个fillRect有四个参数，它们分别是坐标 + 尺寸，我们可以对这些值进行篡改，可以保留坐标值或尺寸值，只修改其中一个便可不需全部篡改，不过值得注意的是，修改该项会直接影响绘画的坐标、尺寸大小等，所以建议设置偏移值即可，如每次随机0-5之间的阈值。
webAudio 接口随机化的实现
webAudio 的随机化实现与Canvas类似，不过在实现Canvas随机化时，我们采用随机化RGB的形式实现，在音频的世界中，根本就没有颜色的说法，那么该如何去实现呢？
在webAudio中有个CreateBuffer接口可以创建一个临时的空白音频缓冲区域以便于用作音频填充，创建完毕后通过AudioBufferSourceNode接口来播放音频，照着葫芦来画瓢，既然Canvas可以在绘画时篡改颜色，那是不是我们也可以在创建音频的时候对音频进行处理呢，答案是肯定的。
从上图我们可以看到该接口有3个参数，并且都是纯数值的，所以我们只需在这着手即可实现随机化效果，由于我目前对音频方面的知识涉及不够深，采用的方式可能会直接影响音频的输出（即可能会对浏览器造成一定的影响），如果大家熟知这些API，可根据这些API去寻找相关的方法并将其重写即可。
var audioCtx = new AudioContext();
var buffer = audioCtx.createBuffer(2, 22050, 44100);
我们不妨看看上面这两句代码，它会得到一个立体声的音频片段，当它在一个频率为44100赫兹（这是目前大部分声卡处理声音的频率）的音频环境(AudioContext)中播放的时候，会持续0.5秒：22050帧 / 44100赫兹 = 0.5 秒。
编译完成后可以到：AudioContext指纹检测 进行指纹检测校验，由于我将三个参数都随机化了，所以导致绘画的图尺寸严重超出预期值，所以大家可以按需设定阈值。
WebRTC接口随机化实现
RTCIceCandidate.RTCIceCandidate作为webrtc子集，常用于获取本地客户端通信相关的信息，如客户端真实的IP地址等，其返回值为一个RTCIceCandidate对象，通常用作表示单个ICE候选对象。
candidate:735671172 1 udp 2113937151 172.30.23.16 60444 typ host generation 0 network-cost 999
在RTCIceCandidate对象中，有一个字符串类型的address，该项包含的地址为本机的IP地址，candidate则为对象子集字符串类型的导出，通常FP检测通过该属性取得IP地址，所以，我们只需篡改该属性即可达到ip随机化的目的，请注意，该项仅针对webrtc检测有效，实际握手IP仍然以实际使用的IP为准。
上图为模拟fp基于webrtc检测，注意观看IP的变化。
function getUserIP(onNewIP) { // onNewIp - your listener function for new IPs
//compatibility for firefox and chrome
var myPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
var pc = new myPeerConnection({
iceServers: []
}),
noop = function() {},
localIPs = {},
ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g,
key;
function iterateIP(ip) {
if (!localIPs[ip]) onNewIP(ip);
localIPs[ip] = true;
}
//create a bogus data channel
pc.createDataChannel("");
// create offer and set local description
pc.createOffer().then(function(sdp) {
sdp.sdp.split('\n').forEach(function(line) {
if (line.indexOf('candidate') < 0) return;
line.match(ipRegex).forEach(iterateIP);
});
pc.setLocalDescription(sdp, noop, noop);
}).catch(function(reason) {
// An error occurred, so handle the failure to connect
});
//sten for candidate events
pc.onicecandidate = function(ice) {
if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
ice.candidate.candidate.match(ipRegex).forEach(iterateIP);
};
}
// Usage
getUserIP(function(ip){
alert("Got IP! :" + ip);
});
以上代码可以粘贴在chromium console里，方便我们测试。
总结
本文是本系列文章的第五篇，主要分享如何实现基于浏览器内核级别的接口随机化的思路，在本篇中，我们主要分析了canvas、webAudio、以及webrtc等这三大fp重点检测对象的主要构成以及接口篡改的一些小建议，以便于实现随机化的功能。