2、chrome指纹修改-canvas
1、新增文件canvas_noise_offset.h与canvas_noise_offset.cc
新增文件 third_party/blink/renderer/modules/canvas/canvas2d/canvas_noise_offset.h
// 新增 third_party/blink/renderer/modules/canvas/canvas2d/canvas_noise_offset.h
#ifndef THIRD_PARTY_BLINK_RENDERER_MODULES_CANVAS_CANVAS2D_CANVAS_NOISE_OFFSET_H_
#define THIRD_PARTY_BLINK_RENDERER_MODULES_CANVAS_CANVAS2D_CANVAS_NOISE_OFFSET_H_
#include "base/lazy_instance.h"
#include "third_party/blink/renderer/platform/wtf/allocator/allocator.h"
namespace blink {
class CanvasNoiseOffset {
USING_FAST_MALLOC(CanvasNoiseOffset);
public:
CanvasNoiseOffset();
float GetOffsetX() const { return offset_x_; }
float GetOffsetY() const { return offset_y_; }
private:
float offset_x_;
float offset_y_;
};
CanvasNoiseOffset& GetCanvasNoiseOffset();
} // namespace blink
#endif // THIRD_PARTY_BLINK_RENDERER_MODULES_CANVAS_CANVAS2D_CANVAS_NOISE_OFFSET_H_
新增文件 third_party/blink/renderer/modules/canvas/canvas2d/canvas_noise_offset.cc
// 新增 third_party/blink/renderer/modules/canvas/canvas2d/canvas_noise_offset.cc
#include "third_party/blink/renderer/modules/canvas/canvas2d/canvas_noise_offset.h"
#include <cstdlib>
#include <ctime>
#include "base/lazy_instance.h"
#include "base/command_line.h"
#include "base/strings/string_number_conversions.h"
namespace blink {
CanvasNoiseOffset::CanvasNoiseOffset() {
const base::CommandLine* command_line = base::CommandLine::ForCurrentProcess();
int interference = 1;
if (command_line->HasSwitch("canvas-noise-interference")) {
std::string interference_str = command_line->GetSwitchValueASCII("canvas-noise-interference");
if (!base::StringToInt(interference_str, &interference)) {
interference = 1;
}
}
std::srand(std::time(nullptr));
offset_x_ =
((static_cast<float>(rand()) / RAND_MAX) * 0.5f - 0.25f) * interference;
offset_y_ = ((static_cast<float>(rand()) / RAND_MAX) * 0.5f - 0.25f) * interference;
}
static base::LazyInstance<CanvasNoiseOffset>::Leaky g_canvas_noise_offset =
LAZY_INSTANCE_INITIALIZER;
CanvasNoiseOffset& GetCanvasNoiseOffset() {
return g_canvas_noise_offset.Get();
}
} // namespace blink
2、修改文件base_rendering_context_2d.h
在文件third_party/blink/renderer/modules/canvas/canvas2d/base_rendering_context_2d.h
中找到以下代码
class MODULES_EXPORT BaseRenderingContext2D : public CanvasPath
找到其中的private
部分,在private部分添加以下代码
const float noise_offset_x_;
const float noise_offset_y_;
图片示例
3、修改文件base_rendering_context_2d.cc
在文件third_party/blink/renderer/modules/canvas/canvas2d/base_rendering_context_2d.cc
中找到以下代码
BaseRenderingContext2D::BaseRenderingContext2D(
scoped_refptr<base::SingleThreadTaskRunner> task_runner)
: dispatch_context_lost_event_timer_(
task_runner,
this,
&BaseRenderingContext2D::DispatchContextLostEvent),
dispatch_context_restored_event_timer_(
task_runner,
this,
&BaseRenderingContext2D::DispatchContextRestoredEvent),
try_restore_context_event_timer_(
task_runner,
this,
&BaseRenderingContext2D::TryRestoreContextEvent),
clip_antialiasing_(kNotAntiAliased),
在之后添加代码
noise_offset_x_(GetCanvasNoiseOffset().GetOffsetX()),
noise_offset_y_(GetCanvasNoiseOffset().GetOffsetY()),
图片示例
4、随后就可以修改各类canvas绘图方法,本文以fillRect为例子
在文件third_party/blink/renderer/modules/canvas/canvas2d/base_rendering_context_2d.cc
中找到以下代码
搜索找到如下代码
Draw<OverdrawOp::kNone>
将第一个参数进行如下修改
[this, rect](cc::PaintCanvas* c, const cc::PaintFlags* flags) {
gfx::RectF noisy_rect = rect;
noisy_rect.Offset(noise_offset_x_, noise_offset_y_);
c->drawRect(gfx::RectFToSkRect(noisy_rect), *flags);
}
参考例图
5、添加一下编译依赖
找到文件third_party/blink/renderer/modules/canvas/BUILD.gn
找到如下区域
blink_modules_sources("canvas") {
sources = [
...,
]
在sources
数组中添加
"canvas2d/canvas_noise_offset.cc",
"canvas2d/canvas_noise_offset.h",
如图参考
6、其他
至此,代码修改部分完成,可以参考第4步给canvas的其他绘图操作添加干扰,此代码修改的效果会使浏览器在每次启动以后生成一个新的随机噪音,可以通过参数--canvas-noise-interference=5
传递整数来进一步进行干扰,该数值越小越真实,越大可能会越失真。
7、测试效果
测试代码
(function() {
// 创建 canvas 元素
const canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 150;
document.body.appendChild(canvas);
// 获取 2D 渲染上下文
const ctx = canvas.getContext('2d');
// 绘制固定内容
ctx.textBaseline = "top";
ctx.font = "14px 'Arial'";
ctx.textBaseline = "alphabetic";
ctx.fillStyle = "#f60";
ctx.fillRect(125, 1, 62, 20);
ctx.fillStyle = "#069";
ctx.fillText("abcdefghijklmnopqrstuvwxyz", 2, 15);
ctx.fillStyle = "rgba(102, 204, 0, 0.7)";
ctx.fillText("abcdefghijklmnopqrstuvwxyz", 4, 17);
// 添加一些固定的图形
ctx.beginPath();
ctx.arc(50, 50, 25, 0, Math.PI * 2);
ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
ctx.fill();
ctx.beginPath();
ctx.rect(100, 30, 50, 50);
ctx.fillStyle = "rgba(0, 255, 0, 0.5)";
ctx.fill();
ctx.beginPath();
ctx.moveTo(200, 10);
ctx.lineTo(250, 90);
ctx.lineTo(150, 90);
ctx.closePath();
ctx.fillStyle = "rgba(0, 0, 255, 0.5)";
ctx.fill();
// 获取 canvas 数据
const imageData = canvas.toDataURL();
// 计算 MD5
function MD5(d){result = M(V(Y(X(d),8*d.length)));return result.toLowerCase()};function M(d){for(var _,m="0123456789ABCDEF",f="",r=0;r<d.length;r++)_=d.charCodeAt(r),f+=m.charAt(_>>>4&15)+m.charAt(15&_);return f}function X(d){for(var _=Array(d.length>>2),m=0;m<_.length;m++)_[m]=0;for(m=0;m<8*d.length;m+=8)_[m>>5]|=(255&d.charCodeAt(m/8))<<m%32;return _}function V(d){for(var _="",m=0;m<32*d.length;m+=8)_+=String.fromCharCode(d[m>>5]>>>m%32&255);return _}function Y(d,_){d[_>>5]|=128<<_%32,d[14+(_+64>>>9<<4)]=_;for(var m=1732584193,f=-271733879,r=-1732584194,i=271733878,n=0;n<d.length;n+=16){var h=m,t=f,g=r,e=i;f=md5_ii(f=md5_ii(f=md5_ii(f=md5_ii(f=md5_hh(f=md5_hh(f=md5_hh(f=md5_hh(f=md5_gg(f=md5_gg(f=md5_gg(f=md5_gg(f=md5_ff(f=md5_ff(f=md5_ff(f=md5_ff(f,r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+0],7,-680876936),f,r,d[n+1],12,-389564586),m,f,d[n+2],17,606105819),i,m,d[n+3],22,-1044525330),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+4],7,-176418897),f,r,d[n+5],12,1200080426),m,f,d[n+6],17,-1473231341),i,m,d[n+7],22,-45705983),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+8],7,1770035416),f,r,d[n+9],12,-1958414417),m,f,d[n+10],17,-42063),i,m,d[n+11],22,-1990404162),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+12],7,1804603682),f,r,d[n+13],12,-40341101),m,f,d[n+14],17,-1502002290),i,m,d[n+15],22,1236535329),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+1],5,-165796510),f,r,d[n+6],9,-1069501632),m,f,d[n+11],14,643717713),i,m,d[n+0],20,-373897302),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+5],5,-701558691),f,r,d[n+10],9,38016083),m,f,d[n+15],14,-660478335),i,m,d[n+4],20,-405537848),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+9],5,568446438),f,r,d[n+14],9,-1019803690),m,f,d[n+3],14,-187363961),i,m,d[n+8],20,1163531501),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+13],5,-1444681467),f,r,d[n+2],9,-51403784),m,f,d[n+7],14,1735328473),i,m,d[n+12],20,-1926607734),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+5],4,-378558),f,r,d[n+8],11,-2022574463),m,f,d[n+11],16,1839030562),i,m,d[n+14],23,-35309556),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+1],4,-1530992060),f,r,d[n+4],11,1272893353),m,f,d[n+7],16,-155497632),i,m,d[n+10],23,-1094730640),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+13],4,681279174),f,r,d[n+0],11,-358537222),m,f,d[n+3],16,-722521979),i,m,d[n+6],23,76029189),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+9],4,-640364487),f,r,d[n+12],11,-421815835),m,f,d[n+15],16,530742520),i,m,d[n+2],23,-995338651),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+0],6,-198630844),f,r,d[n+7],10,1126891415),m,f,d[n+14],15,-1416354905),i,m,d[n+5],21,-57434055),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+12],6,1700485571),f,r,d[n+3],10,-1894986606),m,f,d[n+10],15,-1051523),i,m,d[n+1],21,-2054922799),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+8],6,1873313359),f,r,d[n+15],10,-30611744),m,f,d[n+6],15,-1560198380),i,m,d[n+13],21,1309151649),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+4],6,-145523070),f,r,d[n+11],10,-1120210379),m,f,d[n+2],15,718787259),i,m,d[n+9],21,-343485551),m=safe_add(m,h),f=safe_add(f,t),r=safe_add(r,g),i=safe_add(i,e)}return Array(m,f,r,i)}function md5_cmn(d,_,m,f,r,i){return safe_add(bit_rol(safe_add(safe_add(_,d),safe_add(f,i)),r),m)}function md5_ff(d,_,m,f,r,i,n){return md5_cmn(_&m|~_&f,d,_,r,i,n)}function md5_gg(d,_,m,f,r,i,n){return md5_cmn(_&f|m&~f,d,_,r,i,n)}function md5_hh(d,_,m,f,r,i,n){return md5_cmn(_^m^f,d,_,r,i,n)}function md5_ii(d,_,m,f,r,i,n){return md5_cmn(m^(_|~f),d,_,r,i,n)}function safe_add(d,_){var m=(65535&d)+(65535&_);return(d>>16)+(_>>16)+(m>>16)<<16|65535&m}function bit_rol(d,_){return d<<_|d>>>32-_}
const fingerprint = MD5(imageData);
console.log("Canvas Fingerprint (MD5):", fingerprint);
})();
测试图:
第一次打开浏览器执行测试代码
第二次打开浏览器执行测试代码
本文是原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 文安哲
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果