Js模拟执行 - 补浏览器环境

一，基础知识

1，V8

纯净V8：
在纯净V8中，除了V8引擎本身之外，没有其他浏览器相关的组件和功能。因此，开发人员可以使用纯净V8来构建独立的JavaScript应用程序（例如Node.js），而无需依赖于任何浏览器的特定功能和API。

2，BOM和DOM

BOM（Browser Object Model）和DOM（Document Object Model）都是JavaScript中用于操作网页的重要模型。

1、BOM和DOM的基本概念
BOM：即浏览器对象模型，主要处理浏览器窗口和框架。它将浏览器抽象成一个对象（window），并封装了一些属性和方法，使得JavaScript可以控制浏览器的行为。
DOM：即文档对象模型，是W3C定义的一套用于处理HTML和XML文档内容的标准编程接口API。它将浏览器当前打开的文件抽象成一个对象（document），并将文档解析成一个具有属性结构的对象，通过该对象可以修改页面文档的内容。

2、BOM和DOM的关系
全局对象：BOM和DOM都是JavaScript中的全局对象，可以直接访问。例如，window对象是BOM中的全局对象，而document对象是DOM中的全局对象。
操作层面：虽然BOM和DOM都是用于操作网页元素的，但它们的操作层面不同。BOM主要操作浏览器窗口和框架等，而DOM则主要操作网页中的元素。
动态操作：BOM和DOM都可以通过JavaScript进行动态操作，可以改变网页中的元素、样式、属性等。
包含关系：从结构上看，BOM包含了DOM。具体来说，window对象是BOM的核心对象，而document对象是DOM的核心对象。由于document对象是window对象的一个属性（即window.document），因此可以说BOM包含了DOM。这意味着，通过BOM对象可以访问到DOM对象，从而实现对网页内容的操作。

3，Node.js

Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，它允许JavaScript代码在服务端运行，从而成为与PHP、Python等服务端语言平起平坐的脚本语言。

电脑上安装node.js后，就可以执行JavaScript(编译器，相当于python装CPython解释器)；安装node.js时，会自动安装npm(第三方包管理器，相当于python中的pip)

二，什么是补浏览器环境？

浏览器环境：是指JS代码在浏览器中的运行时环境，包括V8自动构建的对象、浏览器内置传递给V8的操作DOM和BOM的对象。

Node环境：是基于V8引擎的Js运行时环境，它包括V8与其自己的内置API。

因此，补浏览器环境其实是补浏览器有而node没有的环境，即补BOM和DOM对象。此外，Node环境和浏览器还具有一些区别，比如window对象区别、this指向区别、Js引擎区别，以及一些DOM操作区别。

三，为什么要补浏览器环境？

一般情况下，将加密算法扣下来能够直接执行，但是如果检测了浏览器指纹（由于Node环境与浏览器环境之间存在差异，会导致JS代码在浏览器中运行的结果与在node中运行得到的结果不一样），那就比较难了。

所以需要补浏览器环境，使得扣出来的js加密算法代码在Node环境中运行得到的加密值，与其在浏览器环境中运行得到的加密值一致。

环境对JS代码的影响跳不过这两种方式：

1. 用来判断，改变逻辑
2. 值参与加密运算

四，常被检测的环境

在常被检测的环境中，有window、location、document、navigator、canvas、native方法等检测，除了这些属性和方法外，还有针对自动化痕迹的检查（比如对chromedriver属性检测）、Node环境的检测，以及浏览器指纹检测、TLS指纹校验、驱动检测、异常堆栈调用检测等。

window检测：

• window是否为方法
• window对象是否freeze
• 各属性检测

location检测：

• hostname
• protocol
• host
• hash
• origin

navigator检测：

• AppName
• AppVersion
• cookieEnabled
• language
• userAgent
• product
• platform
• plugins浏览器插件
• javaEnabled() 方法
• taintEnabled() 方法

document检测：

• referrer
• cookie
• createElement() 方法

canvas指纹：

• 不同类型图片的canvas指纹应当不一样，如 .jpg、.png
• 不同质量quality的canvas指纹应该不一样
• 不同属性的canvas指纹应该不一样
• 同一个条件的canvas多次绘制时应该保持一致

浏览器指纹信息：

• window.screen屏幕分辨率/宽高
• navigator.useragent
• location.href/host
• navigator.platform平台、语言等信息
• canvas 2D图像指纹
• navigator.plugin 浏览器插件信息
• webgl 3D图像指纹
• 浏览器字体信息
• 本地存储的cookie信息

五，确定需要补那些环境？

要想 “补浏览器环境”，首先我们得知道 “js加密算法代码” 到底使用了哪些浏览器环境API，然后再对应去补上这些环境；

5.1 通过undefined报错去分析

通过运行程序后的undefined报错去补环境，但只靠这种方式，有些报错和环境检测可能看不出来，这时就需要用到代理器。

5.2 使用Proxy代理器

Proxy是ES6提供的代理器（在浏览器和Node中均可使用），用于创建一个对象的代理，从而实现基本操作的拦截和自定义。
它可以代理任何类型的对象，包括原生数组，函数，甚至另一个代理；拥有递归套娃的能力！
也就是说 我们代理某个对象后，我们就成了它的中间商，任何JS代码对它的任何操作都可以被我们所拦截！

使用 Proxy 对window、document、navigator等常见环境检测点进行代理，拦截代理对象的读取、函数调用等操作，并通过控制台输出，这样就能够实现检测环境自吐的功能，后续再对吐出的环境进行补环境，就会方便很多。

Proxy基础用法：

先定义一个 target 对象，即目标对象；同时定义 handler 对象，handler 声明了代理 target 的指定行为。

// 目标对象（被代理对象）
var target = {
   
    name: 'JACK',
    age: 18,
};

// 代理行为对象（对目标对象进行取值或赋值行为时，会进入此对象的方法）
var handler = {
   
    get: function(target, property, receiver) {
   
    	// target：被代理的目标对象
    	// property：被读取的属性名