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