HTML5 & canvas fingerprinting

demo


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