HTML5 & canvas fingerprinting
<h1 id="html5--canvas-fingerprinting">HTML5 & canvas fingerprinting</h1><p><img src="https://img2020.cnblogs.com/blog/740516/202005/740516-20200522005344775-799417865.png" alt="" loading="lazy"></p>
<blockquote>
<p>demo</p>
</blockquote>
<p>https://codepen.io/xgqfrms/full/BaoMWMp</p>
<p><img src="https://img2020.cnblogs.com/blog/740516/202005/740516-20200522005446020-1265426961.png" alt="" loading="lazy"></p>
<pre><code class="language-js">
window.addEventListener(`load`, () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
ctx.moveTo(0,60);
ctx.lineTo(200,60);
ctx.stroke();
const b64 = canvas.toDataURL().replace("data:image/png;base64,","");
// console.log(b64);
const len = b64.length;
const header = b64.slice(0, 7);
const footer = b64.slice(len - 7);
const html = `<span class="keyword">${header}</span>...<span class="keyword">${footer}</span>`;
const pre = document.querySelector(``);
// pre.value = b64;
// pre.innerText = b64;
pre.innerHTML = b64;
const dom = document.querySelector(``);
// dom.innerText = b64;
dom.insertAdjacentHTML(`afterbegin`, html);
});
</code></pre>
<pre><code class="language-css">
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
h1, {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
{
// display: flex;
// justify-content: center;
// align-items: center;
text-align: left;
max-width: 80vw;
overflow-x: hidden;
overflow-y: auto;
background: #000;
color: green;
min-height: 50vh;
height: 70vh;
// height: auto;
font-size: 16px;
line-height: 1.5em;
word-break: break-word;
white-space: normal;
// overflow-wrap: break-word;
padding: 10px;
}
footer {
position: fixed;
bottom: 10px;
left: 0;
right: 0;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: lightgreen;
font-size: 16px;
line-height: 1.5em;
padding: 10px;
}
</code></pre>
<h2 id="canvas-指纹-uuid">canvas 指纹, UUID</h2>
<blockquote>
<p>canvas fingerprinting</p>
</blockquote>
<p>https://browserleaks.com/canvas</p>
<p>https://blog.allenchou.cc/canvas-fingerprinting/</p>
<pre><code class="language-js">/*
http://phpjs.org/functions/bin2hex/
http://kevin.vanzonneveld.net
http://phpjs.org/functions/bin2hex:361#comment_177616
*/
function bin2hex(s) {
let i, l, o = '', n;
s += '';
for (i = 0, l = s.length; i < l; i++) {
n = s.charCodeAt(i)
.toString(16);
o += n.length < 2 ? '0' + n : n;
}
return o;
}
const getUUID = (domain = ``) => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext(2d);
ctx.textBaseline = top;
ctx.font = 14px 'Arial';
ctx.textBaseline = tencent;
ctx.fillStyle = #f60;
ctx.fillRect(125,1,62,20);
ctx.fillStyle = #069;
ctx.fillText(domain, 2, 15);
ctx.fillStyle = rgba(102, 204, 0, 0.7);
ctx.fillText(txt, 4, 17);
const b64 = canvas.toDataURL().replace(data:image/png;base64,,);
const bin = atob(b64);
const crc = bin2hex(bin.slice(-16,-12));
return crc;
}
const log = console.log;
const uuid = getUUID(`https://www.xgqfrms.xyz/`);
log(`canvas uuid`, uuid );
</code></pre>
<h2 id="反-canvas-指纹追踪">反 canvas 指纹追踪</h2>
<blockquote>
<p>覆写 canvas 的原型方法，添加随机干扰项</p>
</blockquote>
<blockquote>
<p>incognito 隐身模式, 亲测不好使</p>
</blockquote>
<p>https://juejin.im/post/5d97fb5ef265da5ba12cdea9</p>
<p>https://blog.csdn.net/Revivedsun/article/details/103534149</p>
<p>https://paper.seebug.org/229/</p>
<p>https://security.tencent.com/index.php/blog/msg/59</p>
<p>https://www.freebuf.com/news/40745.html</p>
<p>https://thehackernews.com/2014/07/html5-canvas-fingerprint-widely-used.html</p>
<p>http://docs.multilogin.com/l/zh/article/7gNVYHcFKG-canvas</p>
<p>https://www.cnblogs.com/leijing0607/p/8044218.html</p>
<hr>
<h2 id="fingerprint">fingerprint</h2>
<p>https://github.com/Valve/fingerprintJS</p>
<hr>
<div>
</div>
<hr>
<blockquote style="display: flex; flex-flow: column; align-items: center; justify-content: center; text-align: center; border: none">
<h3><strong><span style="font-size: 16pt; color: rgba(0, 255, 0, 1)">©xgqfrms 2012-<span data-uid="copyright-aside">2020</span></span></strong>
<p><span style="font-size: 18pt; color: rgba(0, 255, 0, 1)"><strong>www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！</strong></span></p>
</h3></blockquote>
<hr>
</div>
<div id="MySignature" role="contentinfo">
<div style="display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;">
<p>本文首发于博客园，作者：xgqfrms，原文链接：https://www.cnblogs.com/xgqfrms/p/12934646.html</p>
<p style="color: red; font-size: 23px; margin-top: 5px; margin-botom: 5px;">未经授权禁止转载，违者必究！</P>
</div>
<hr/><br><br>
来源：https://www.cnblogs.com/xgqfrms/p/12934646.html
頁:
[1]