A browser environment detection method and device based on double rendering comparison, equipment and medium

Abstract

The application provides a browser environment detection method and device based on double rendering comparison, equipment and medium, the method comprises the following steps: carrying out graphic rendering containing anti-aliasing feature on the first canvas according to the preset graphic parameters, obtaining the first rendering result; the first rendering result is carried out image encoding, and the image encoding data is obtained; the image encoding data is carried out image decoding, and the redrawn image is redrawn on the second canvas, and the second rendering result is obtained; the original pixel data of the first rendering result and the second rendering result is obtained respectively; the original pixel data of the first rendering result and the original pixel data of the second rendering result are compared with each other, and the difference data set is obtained; based on the difference data set, the rendering behavior characteristics of the current browser environment are determined, the client browser detection means is provided, and the tampering behavior of the browser environment intended to interfere with fingerprint identification or implement fraud can be effectively identified.

Description

Technical Field

[0001] This invention relates to the field of technology, and in particular to a browser environment detection method, apparatus, device, and medium based on dual rendering comparison. Background Technology

[0002] Canvas fingerprint extraction technology is a typical device fingerprinting technology. Its core principle is to use the Canvas-related APIs to complete the drawing operation of specific characters and graphics on the canvas, and then obtain the Base64 encoding of the drawn image through the toDataURL() interface, or convert the encoding into an MD5 hash value as a fingerprint feature. Due to the inherent differences in graphics card drivers and operating system font rendering engines (such as ClearType in Windows and Quartz in macOS) of different devices, and the subtle differences in the processing logic and effect of anti-aliasing of graphics by different browser kernels, the same Canvas drawing code will generate an image with a unique pixel distribution on different devices. Based on this characteristic, fingerprint extraction and recognition of different devices can be achieved.

[0003] However, existing Canvas fingerprint extraction technology still has significant shortcomings in practical applications, making it difficult to meet the requirements of high-precision and high-reliability device fingerprint recognition. The specific problems are as follows: Firstly, the fingerprint results of this technology are easily forged. Currently, various fingerprint browsers can directly inject random noise at the Canvas API level, interfering with the generation process of fingerprint hash values ​​and directly causing the detection results of Canvas fingerprints to fail, thus failing to effectively identify the device. Secondly, the feature extraction method is relatively crude. Existing technologies generally use full canvas hashing to extract fingerprint features without distinguishing the causes of differences in image pixels. It is impossible to distinguish whether the differences in the distribution of pixels on the canvas are due to normal rendering differences of the device itself or to interference noise injected by humans, which further reduces the accuracy and effectiveness of fingerprint recognition. Summary of the Invention

[0004] The technical problem to be solved by the present invention is to provide a browser environment detection method, apparatus, device and medium based on dual rendering comparison. By subtracting the results of the two renderings, static random noise injected by the fingerprint browser can be identified, and browser environment detection can be completed.

[0005] In a first aspect, the present invention provides a browser environment detection method based on dual rendering comparison, comprising the following steps: Step S1: According to the preset graphic parameters, perform graphic rendering including anti-aliasing features on the first canvas to obtain the first rendering result; Step S2: Encode the first rendering result to obtain image encoded data; Step S3: Decode the image encoded data and redraw the decoded image on the second canvas to obtain the second rendering result; Step S4: Obtain the original pixel data of the first rendering result and the second rendering result respectively; Step S5: Compare the original pixel data of the first rendering result with the original pixel data of the second rendering result unit by unit to obtain the difference data set; Step S6: Based on the difference data set, determine the rendering behavior characteristics of the current browser environment.

[0006] Secondly, the present invention provides a browser environment detection device based on dual rendering comparison, comprising: The first rendering module performs graphic rendering, including anti-aliasing features, on the first canvas according to preset graphic parameters to obtain the first rendering result. The encoding data module encodes the first rendering result to obtain image encoded data. The second rendering module decodes the image encoding data and redraws the decoded image on the second canvas to obtain the second rendering result. The pixel acquisition module acquires the original pixel data of the first rendering result and the second rendering result, respectively. The pixel comparison module compares the original pixel data of the first rendering result with the original pixel data of the second rendering result unit by unit to obtain a set of difference data. The environment determination module determines the rendering behavior characteristics of the current browser environment based on the difference data set.

[0007] Thirdly, the present invention provides an electronic device including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the method described in the first aspect.

[0008] Fourthly, the present invention provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the method described in the first aspect.

[0009] One or more technical solutions provided by this invention have at least the following technical effects or advantages: 1. The solution of this invention runs entirely within the client browser, performing detection through the standard Canvas API and image processing flow, without generating additional network requests or significant performance overhead. Therefore, it is difficult for malware or users to detect, thus achieving a hidden browser environment probe function.

[0010] 2. This invention employs a dual-path comparison of "rendering → encoding → re-rendering," effectively distinguishing between inherent, deterministic rendering differences within the browser and externally injected nondeterministic noise. By utilizing rendering idempotency as a detection benchmark, the purity of the rendering process can be quantitatively evaluated, thereby accurately identifying tampered browser environments.

[0011] 3. The core of this invention is to verify the browser's inherent behavioral consistency (idempotency), rather than relying on static feature comparison. If an attacker wants to hide the fingerprint, they must disrupt rendering consistency; if they want to maintain consistency, they cannot effectively obfuscate the fingerprint. This design puts attackers in a dilemma, significantly increasing the difficulty of adversarial attacks.

[0012] 4. Unlike traditional fingerprint recognition methods based on feature sets (such as plugin lists or font lists), this invention does not rely on a predefined fingerprint database. It directly determines the integrity of the browser by verifying whether it exhibits expected deterministic behavior, thus enabling the detection of unknown or novel tampering methods.

[0013] 5. The entire detection process of this invention is completed in milliseconds, with low computational resource consumption. It can be executed in real time at critical nodes such as page loading and user interaction without affecting the user experience. The detection results can be used immediately for risk decision-making, such as triggering secondary verification or restricting sensitive operations.

[0014] 6. This invention is based on the standardized Canvas 2D API and image encoding and decoding functions supported by all modern browsers. It does not depend on the proprietary features of any specific browser or operating system and has broad applicability and consistency.

[0015] 7. In this invention, the generation, processing, and comparison of all pixel data are performed in the client's memory. There is no need to upload the original image or detailed rendering data to the server. Only the summary detection results are reported, which effectively protects user privacy.

[0016] 8. The "rendering behavior features" (such as idempotency scores and difference patterns) detected and output by this invention can serve as high-quality risk signals and be integrated into a wider range of anti-fraud, anti-automation attack, or access control systems to enhance the accuracy and depth of overall security protection.

[0017] The above description is merely an overview of the technical solution of the present invention. In order to better understand the technical means of the present invention and to implement it in accordance with the contents of the specification, and in order to make the above and other objects, features and advantages of the present invention more apparent and understandable, specific embodiments of the present invention are described below. Attached Figure Description

[0018] The present invention will be further described below with reference to the accompanying drawings and embodiments.

[0019] Figure 1 This is a flowchart of the method in Embodiment 1 of the present invention; Figure 2 This is a schematic diagram of the device in Embodiment 2 of the present invention. Detailed Implementation

[0020] The overall concept of the technical solution in this application is as follows: This solution employs a "dual-canvas redraw comparison method." First, text graphics with semi-transparency (alpha channel) are drawn on the first canvas. Then, the content of this canvas is converted into image data and reloaded into the second canvas for secondary rendering. By comparing the numerical drift between the original drawn pixels and the secondary rendered pixels, and combining this with a specific feature point whitelist filtering, the inherent rendering deviation features of the device are extracted.

[0021] In anti-scraping and anti-fraud scenarios, it's necessary to determine whether the current browser is a disguised "fingerprint browser." These browsers typically modify the Canvas output to make it appear as if it's from a new device. This example detects this disguise by detecting the consistency of values ​​for specific pixels during the "export and reload" process; specifically, the steps are as follows: Step 1: Perform high-precision text rendering on canvas1 to produce edge pixels affected by anti-aliasing.

[0022] Step 2: Force image encoding using toDataURL.

[0023] Step 3: Use drawImage to decode the encoded image again and render it onto canvas2. (Copy the first image) Step 4: Eliminate irrelevant interference by using the preset range of data_range, and extract the core affected pixels and their color components.

[0024] Step 5: Calculate the difference array between canvas1 and canvas2. Since repainting in a normal browser is usually idempotent, browsers injecting noise will produce inconsistent differences between the two reads.

[0025] The core code is shown below: / / 1. Initialize the dual-canvas environment function init_canvas() { const elem = document.createElement('canvas'); elem.width = 1, elem.height = 1; const ctx = elem.getContext('2d'); return [elem, ctx]; } / / 2. Draw the baseline graphic (including anti-aliasing features) function fill_canvas(elem, ctx) { elem.width = 20; elem.height = 120; ctx.fillStyle = '#66666666'; / / Use a semi-transparent color to increase rendering complexity ctx.fillRect(0, 0, 20, 120); / / Fill the entire area ctx.font = '8pt "Times New Roman"'; ctx.fillText('T', 6, 14); / / Draws characters in a specific font } / / Initialize the first canvas const [canvas1, ctx1] = init_canvas(); / / Initialize the second canvas const [canvas2, ctx2] = init_canvas(); / / Draw the first image fill_canvas(canvas1, ctx1); / / 3. Convert canvas 1 into a data stream and load it as an image const canvas1_data_url = canvas1.toDataURL(); const T = new Image; / / Different image APIs, use the image API T.onload = function() { / / This actually copies the binary data of the first image; simply put, it's copying an image. / / 4. Redraw the image onto canvas 2 ctx2.drawImage(T, 0, 0); const canvas1_image_data = ctx1.getImageData(0, 0, 20, 120); const canvas2_image_data = ctx2.getImageData(0, 0, 20, 120); let r1 = [], r2 = []; / / Stores the differences in storage location and values. In a real browser, these two data points would be empty. / / Extract byte array let canvas1_data_array = Array.from(canvas1_image_data.data); let canvas2_data_array = Array.from(canvas2_image_data.data); / / 5. Traverse and compare pixel differences canvas2_data_array.forEach((value, index) => { if (value !== canvas1_data_array[index]) { r1.push(index); / / Record the position of the difference r2.push(value - canvas1_data_array[index]); / / Record the difference value } }); / / 6. Output fingerprint features (including location index, numerical difference, and core pixel color) console.log("Difference position index:", r1.join()); console.log("Pixel offset difference:", r2.join()); } T.src = canvas1_data_url; 1. Dual rendering comparison logic: Unlike the traditional single drawing read, this solution utilizes the interaction differences between the browser's internal Image decoder and Canvas renderer through the "rendering -> exporting -> re-rendering" link.

[0026] 2. Difference Quantization Analysis: By storing value - canvas1_data_array[index], the fingerprint is upgraded from "static hash" to "dynamic deviation sequence", which can effectively distinguish between the smooth rendering of the system and artificially injected fake noise.

[0027] Example 1 like Figure 1 As shown, this embodiment provides a browser environment detection method based on dual rendering comparison, characterized by the following steps: Step S1: According to the preset graphic parameters, perform graphic rendering including anti-aliasing features on the first canvas to obtain the first rendering result; Step S2: Encode the first rendering result to obtain image encoded data; Step S3: Decode the image encoded data and redraw the decoded image on the second canvas to obtain the second rendering result; Step S4: Obtain the original pixel data of the first rendering result and the second rendering result respectively; Step S5: Compare the original pixel data of the first rendering result with the original pixel data of the second rendering result unit by unit to obtain the difference data set; Step S6: Based on the difference data set, determine the rendering behavior characteristics of the current browser environment. This provides a technical basis for determining whether the browser environment has been tampered with, is running abnormally, or is an automated tool.

[0028] In this embodiment, preferably, step S1, "rendering according to preset graphic parameters," includes: Fill the canvas background with a preset semi-transparent color value; Additionally, using preset font attributes and text content, draw text graphics at preset positions on the canvas; The preset graphic parameters specifically include: The semi-transparent color value is #66666666 in RGBA format; The font attributes include: the font name is "Times New Roman", and the font size is 8pt; The text content is a single uppercase English letter "T".

[0029] In this embodiment, preferably, step S2 specifically includes: Call the toDataURL() application interface of the first canvas to encode the first rendering result into an image-formatted data URL, thereby obtaining the image-encoded data.

[0030] In this embodiment, preferably, step S3 specifically comprises: Create an image object and load the image encoding data as the source data of the image object; After loading is complete, the drawImage() application interface of the drawing context of the second canvas is called to draw the loaded image onto the second canvas.

[0031] In this embodiment, preferably, obtaining the difference data set in step S5 specifically includes: Obtain the original pixel data arrays of the first rendering result and the second rendering result, wherein each array element stores a color channel value, and each pixel is represented by four consecutive color channel values; Iterate through and compare the color channel values ​​at the same index position in the two arrays; When the corresponding color channel values ​​are inconsistent, the index position of the color channel value in the array is recorded to form the first difference subset, and the numerical difference between the two color channel values ​​is recorded to form the second difference subset. The difference data set includes the first difference subset and the second difference subset.

[0032] In this embodiment, preferably, the step S6 of determining the rendering behavior characteristics of the current browser environment specifically includes: Analyze the difference data set to determine whether the current browser's rendering process meets the idempotency requirement; the idempotency requirement means that, under the same initial state and the same drawing instruction sequence, the difference in pixel output generated by the browser's rendering engine in the first rendering operation and the second rendering operation after image encoding and decoding is within a preset allowable error range.

[0033] In this embodiment, preferably, determining whether the current browser's rendering process satisfies the idempotency requirement includes: Calculate the number of differences in the difference dataset; Calculate the absolute magnitude of the numerical differences in the difference dataset; When the number of differences is lower than a first preset threshold and the absolute magnitude of the numerical differences is lower than a second preset threshold, the idempotency requirement is determined to be met. Otherwise, the idempotency requirement is not met.

[0034] Based on the same inventive concept, this application also provides an apparatus corresponding to the method in Embodiment 1, as detailed in Embodiment 2.

[0035] Example 2 like Figure 2 As shown, this embodiment provides a browser environment detection device based on dual rendering comparison, including: The first rendering module performs graphic rendering, including anti-aliasing features, on the first canvas according to preset graphic parameters to obtain the first rendering result. The encoding data module encodes the first rendering result to obtain image encoded data. The second rendering module decodes the image encoding data and redraws the decoded image on the second canvas to obtain the second rendering result. The pixel acquisition module acquires the original pixel data of the first rendering result and the second rendering result, respectively. The pixel comparison module compares the original pixel data of the first rendering result with the original pixel data of the second rendering result unit by unit to obtain a set of difference data. The environment determination module determines the rendering behavior characteristics of the current browser environment based on the difference data set.

[0036] In this embodiment, preferably, the "rendering according to preset graphics parameters" in the first rendering module includes: Fill the canvas background with a preset semi-transparent color value; Additionally, using preset font attributes and text content, draw text graphics at preset positions on the canvas; The preset graphic parameters specifically include: The semi-transparent color value is #66666666 in RGBA format; The font attributes include: the font name is "Times New Roman", and the font size is 8pt; The text content is a single uppercase English letter "T".

[0037] In this embodiment, preferably, the encoded data module specifically comprises: Call the toDataURL() application interface of the first canvas to encode the first rendering result into an image-formatted data URL, thereby obtaining the image-encoded data.

[0038] In this embodiment, preferably, the second rendering module specifically comprises: Create an image object and load the image encoding data as the source data of the image object; After loading is complete, the drawImage() application interface of the drawing context of the second canvas is called to draw the loaded image onto the second canvas.

[0039] In this embodiment, preferably, the difference data set obtained in the pixel comparison module specifically includes: Obtain the original pixel data arrays of the first rendering result and the second rendering result, wherein each array element stores a color channel value, and each pixel is represented by four consecutive color channel values; Iterate through and compare the color channel values ​​at the same index position in the two arrays; When the corresponding color channel values ​​are inconsistent, the index position of the color channel value in the array is recorded to form the first difference subset, and the numerical difference between the two color channel values ​​is recorded to form the second difference subset. The difference data set includes the first difference subset and the second difference subset.

[0040] In this embodiment, preferably, the rendering behavior characteristics of the current browser environment determined in the environment determination module specifically include: Analyze the difference data set to determine whether the current browser's rendering process meets the idempotency requirement; the idempotency requirement means that, under the same initial state and the same drawing instruction sequence, the difference in pixel output generated by the browser's rendering engine in the first rendering operation and the second rendering operation after image encoding and decoding is within a preset allowable error range.

[0041] In this embodiment, preferably, determining whether the current browser's rendering process satisfies the idempotency requirement includes: Calculate the number of differences in the difference dataset; Calculate the absolute magnitude of the numerical differences in the difference dataset; When the number of differences is lower than a first preset threshold and the absolute magnitude of the numerical differences is lower than a second preset threshold, the idempotency requirement is determined to be met. Otherwise, the idempotency requirement is not met.

[0042] Since the apparatus described in Embodiment 2 of the present invention is an apparatus used to implement the method of Embodiment 1 of the present invention, those skilled in the art can understand the specific structure and variations of the apparatus based on the method described in Embodiment 1 of the present invention, and therefore will not be described again here. All apparatuses used in the method of Embodiment 1 of the present invention fall within the scope of protection of the present invention.

[0043] Based on the same inventive concept, this application provides an electronic device embodiment corresponding to Embodiment 1, as detailed in Embodiment 3.

[0044] Example 3 This embodiment provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, it can implement any of the implementation methods in Embodiment 1.

[0045] Since the electronic device described in this embodiment is the device used to implement the method in Embodiment 1 of this application, those skilled in the art can understand the specific implementation method and various variations of the electronic device in this embodiment based on the method described in Embodiment 1 of this application. Therefore, how the electronic device implements the method in the embodiment of this application will not be described in detail here. Any device used by those skilled in the art to implement the method in the embodiment of this application falls within the scope of protection of this application.

[0046] Based on the same inventive concept, this application provides a storage medium corresponding to Embodiment 1, as detailed in Embodiment 4.

[0047] Example 4 This embodiment provides a computer-readable storage medium storing a computer program thereon. When the computer program is executed by a processor, it can implement any of the implementation methods in Embodiment 1.

[0048] Those skilled in the art will understand that embodiments of the present invention can be provided as methods, systems, or computer program products. Therefore, the present invention can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, the present invention can take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0049] This invention is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0050] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0051] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0052] While specific embodiments of the present invention have been described above, those skilled in the art should understand that the specific embodiments described are merely illustrative and not intended to limit the scope of the present invention. Equivalent modifications and variations made by those skilled in the art in accordance with the spirit of the present invention should be covered within the scope of protection of the claims of the present invention.

Claims

1. A browser environment detection method based on dual rendering comparison, characterized in that: Includes the following steps: Step S1: According to the preset graphic parameters, perform graphic rendering including anti-aliasing features on the first canvas to obtain the first rendering result; Step S2: Encode the first rendering result to obtain image encoded data; Step S3: Decode the image encoded data and redraw the decoded image on the second canvas to obtain the second rendering result; Step S4: Obtain the original pixel data of the first rendering result and the second rendering result respectively; Step S5: Compare the original pixel data of the first rendering result with the original pixel data of the second rendering result unit by unit to obtain the difference data set; Step S6: Based on the difference data set, determine the rendering behavior characteristics of the current browser environment.

2. The method according to claim 1, characterized in that, The step S1, "rendering according to preset graphic parameters", includes: Fill the canvas background with a preset semi-transparent color value; Additionally, using preset font attributes and text content, draw text graphics at preset positions on the canvas; The preset graphic parameters specifically include: The semi-transparent color value is #66666666 in RGBA format; The font attributes include: font name "Times New Roman", font size 8pt; The text content is a single uppercase English letter "T".

3. The method according to claim 1, characterized in that, Step S2 specifically involves: Call the toDataURL() application interface of the first canvas to encode the first rendering result into an image-formatted data URL, thereby obtaining the image-encoded data.

4. The method according to claim 1, characterized in that, Step S3 specifically involves: Create an image object and load the image encoding data as the source data of the image object; After loading is complete, the drawImage() application interface of the drawing context of the second canvas is called to draw the loaded image onto the second canvas.

5. The method according to claim 1, characterized in that, The specific steps in step S5 to obtain the difference data set include: Obtain the original pixel data arrays of the first rendering result and the second rendering result, wherein each array element stores a color channel value, and each pixel is represented by four consecutive color channel values; Iterate through and compare the color channel values ​​at the same index position in the two arrays; When the corresponding color channel values ​​are inconsistent, the index position of the color channel value in the array is recorded to form the first difference subset, and the numerical difference between the two color channel values ​​is recorded to form the second difference subset. The difference data set includes the first difference subset and the second difference subset.

6. The method according to claim 1, characterized in that, The specific steps in step S6 for determining the rendering behavior characteristics of the current browser environment include: Analyze the difference data set to determine whether the current browser's rendering process meets the idempotency requirement; the idempotency requirement means that, under the same initial state and the same drawing instruction sequence, the difference in pixel output generated by the browser's rendering engine in the first rendering operation and the second rendering operation after image encoding and decoding is within a preset allowable error range.

7. The method according to claim 6, characterized in that, The determination of whether the current browser's rendering process satisfies the idempotency requirement includes: Calculate the number of differences in the difference dataset; Calculate the absolute magnitude of the numerical differences in the difference dataset; When the number of differences is lower than a first preset threshold and the absolute magnitude of the numerical differences is lower than a second preset threshold, the idempotency requirement is determined to be met. Otherwise, the idempotency requirement is not met.

8. A browser environment detection device based on dual rendering comparison, characterized in that: include: The first rendering module performs graphic rendering, including anti-aliasing features, on the first canvas according to preset graphic parameters to obtain the first rendering result. The encoding data module encodes the first rendering result to obtain image encoded data. The second rendering module decodes the image encoding data and redraws the decoded image on the second canvas to obtain the second rendering result. The pixel acquisition module acquires the original pixel data of the first rendering result and the second rendering result, respectively. The pixel comparison module compares the original pixel data of the first rendering result with the original pixel data of the second rendering result unit by unit to obtain a set of difference data. The environment determination module determines the rendering behavior characteristics of the current browser environment based on the difference data set.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the method as described in any one of claims 1 to 7.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the method as described in any one of claims 1 to 7.

Images