HTML5 & canvas fingerprinting

HTML5 & canvas fingerprinting

demo

https://codepen.io/xgqfrms/full/BaoMWMp

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(`[data-uid="pre"]`);
  // pre.value = b64;
  // pre.innerText = b64;
  pre.innerHTML = b64;

  const dom = document.querySelector(`[data-uid="dom"]`);
  // dom.innerText = b64;
  dom.insertAdjacentHTML(`afterbegin`, html);
});

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
h1, [data-uid="dom"] {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

[data-uid="pre"] {
  // 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;
}

canvas 指纹, UUID

canvas fingerprinting

https://browserleaks.com/canvas

https://blog.allenchou.cc/canvas-fingerprinting/

/*

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 );

反 canvas 指纹追踪

覆写 canvas 的原型方法，添加随机干扰项

incognito 隐身模式, 亲测不好使

https://juejin.im/post/5d97fb5ef265da5ba12cdea9

https://blog.csdn.net/Revivedsun/article/details/103534149

https://paper.seebug.org/229/

https://security.tencent.com/index.php/blog/msg/59

https://www.freebuf.com/news/40745.html

https://thehackernews.com/2014/07/html5-canvas-fingerprint-widely-used.html

http://docs.multilogin.com/l/zh/article/7gNVYHcFKG-canvas

https://www.cnblogs.com/leijing0607/p/8044218.html

---

fingerprint

https://github.com/Valve/fingerprintJS

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---