Summarize the process of using canvas fingerprinting

• Number of points

• Whether to land

  • Landed.
    
    • Record userId to determine whether to praise

  • Not logged in

    • 1:Problems will arise:

      • When did it happen?

        • Scheme 1
          
          • The user opens the page, gets the cookie/see, and generates a unique identifier.
          • uuid, stored, and the front end makes a second judgment on whether the user has ever appeared.
        • Option two
          
          • Using canvas fingerprinter (the front end generates a canvas based on various information of the user's browser (such as resolution, browser settings, browser version, hardware information, etc.) such as obtaining the serial number of the browser;

        • How to get browser information:

          • https://blog.allenchou.cc/canvas-fingerprinting/
          • http://www.2cto.com/kf/201502/374742.html

        • CONCLUSION - canvas fingerprinting canvas fingerprint technique

        • Usage Plan II
      • How to ensure that the same person maps unique uuid after generation
        
        • Just make sure that the same browser is treated as a user
        • Several scenarios
          
          • Android
            
            • WeChat
            • qq
            • Various browsers (chrome, safari, firefox,UC,qq, cheetah, opera, self-contained.)
          • ios
            
            • WeChat
            • qq
            • Various browsers
          • pc
            
            • Various browsers
            • ie9-
          • Flat
            
            • ipad
            • Other flat
          • Possible problems
            
            • One person brushes more
            • incognito mode
            • Users manually clear cookie s
    • 2 flow process
      
      • Land
        
        • Judge whether to praise or not according to userId
      • Not logged in
        
        • User opens browser
        • According to the browser's various information, the front end generates a canvas fingerprint graph (a series of b64 string codes)
        • Go back to the background and record it.
        • Identify unregistered users based on the different canvas fingerprints
    • 3 Considerations
      
      • The returned bs64 is too long, so cut a paragraph at a simple point
      • Change canvas to make it simpler and shorter
      • Data types are unified as string s

#### Programme I

var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
ctx.font = "24px Arial";
ctx.fillText("Hello Panda",22,33);
ctx.moveTo(0,60);
ctx.lineTo(100,60);
ctx.stroke();
//You can create a canvas tag at will.
var b64 = canvas.toDataURL().replace("data:image/png;base64,","");
//Then 64-bit conversion of the generated canvas image is performed by toDataURL method.
console.log(b64);
//Then we print it out to see the effect.
//Start with the generated code

• The effect is as bad as that, but there is hardly any repetition rate.
• Here's the rendering. I tested several browsers for different situations.
  
  • chrome
    
    • Normal mode
      
      • 
    • stealth mode
      
      • 
  • firefox
    
    • Normal mode
      
      • 
    • stealth mode
      
      • 
  • safari
    
    • Normal mode
      
      • 
    • stealth mode
      
      • 
  • After careful comparison, it is found that the 64 codes in stealth mode and normal mode are identical.
    
    • Unbelievable buddies here are pictures
    • Considering the user's understanding of cookies, I also did a test and found that before and after cookies were clear.
      
      • 64-bit code is consistent
    • Of course, there are other situations you can test yourself.

Following is the second plan.

function bin2hex(s) {
        //  discuss at: http://phpjs.org/functions/bin2hex/
        // original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
        // bugfixed by: Onno Marsman
        // bugfixed by: Linuxworld
        // improved by: ntoniazzi (http://phpjs.org/functions/bin2hex:361#comment_177616)
        //   example 1: bin2hex('Kev');
        //   returns 1: '4b6576'
        //   example 2: bin2hex(String.fromCharCode(0x00));
        //   returns 2: '00'
        var 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;
    }

function getUUID(domain) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext("2d");
    ctx.font = "24px Arial";
    ctx.fillText("Hello Panda",22,33);
    ctx.moveTo(0,60);
    ctx.lineTo(100,60);
    ctx.stroke();
    //You can create a canvas tag at will.
    var b64 = canvas.toDataURL().replace("data:image/png;base64,","");
    //Then 64-bit conversion of the generated canvas image is performed by toDataURL method.
    //console.log("b64="+b64);
    var bin = atob(b64);
    //console.log("bin="+bin);bin here is a picture, decode the picture
    //Here we use the built-in atob() method of js to decode the 64-ary system.
    var crc = bin2hex(bin.slice(-16, -12));
    //console.log("crc="+crc)
    return crc;
}
    //Decoding with atob function
    //getUUID(string) writes a string and randomly generates an eight-bit string identifier
    console.log(getUUID("asdfa"))

• And now it generates an 8-bit string, which is much easier to use. However, after rigorous testing, there are still fears of repetition, which will bother the buddies out of the background. If you come down, you can do it yourself.
• 

Finally, of course, it is to fill in the getUUID method to get some key information of users.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title> New Document </title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
        <meta name="Generator" content="EditPlus">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta charset="utf-8" />
        <meta name="Description" content="">

        <script id=clientEventHandlersJS language=javascript>
            /******************************************Below is the browser information ************************************************************************************************************/
            //Getting Browser-related Information
            function allinfo() {
                var appName = navigator.appName; //The official name of the browser
                var appVersion = navigator.appVersion; //Version number of browser
                var cookieEnabled = navigator.cookieEnabled; // Returns whether cookie is enabled in user browser
                var cpuClass = navigator.cpuClass; //Return the cpu model of the user's computer. Usually the intel chip returns "x86" (Firefox does not).

                var mimeType = navigator.mimeTypes; // Arrays of all MIME types supported by browsers
                var platform = navigator.platform; // The operating system platform that the browser is running, including Win16 (Windows 3.x)  
                //   Win32(windows98,Me,NT,2000,xp),Mac68K(Macintosh 680x0)
                //     Macintosh PowerPC
                var plugins = navigator.plugins; //  Array of all plug-ins installed on browsers
                var userLanguage = navigator.userLanguage; // Language set by users on their own operating system (Firefox does not have it)
                var userAgent = navigator.userAgent; //A string containing all or part of the following attributes: appCodeName,appName,appVersion,language,platform
                var systemLanguage = navigator.systemLanguage; // Default Language Supported by User Operating System (Firefox does not)


        </div>
    </body>

</html>