JavaScript-Obfuscator4.0.0字符串阵列化Bug及修复方法
JavaScript-Obfuscator4.0.0字符串阵列化Bug及修复方法
Javascript-obfuscator是全球知名的开源JavaScript代码混淆加密工具，由俄罗斯程序员Timofey Kachalov开发维护。
在2022年2月15日发布的4.0.0版本中，其存在一个字符串阵列化Bug，某些情况下会导致混淆结果异常。本文对Bug情况进行说明并提供修复方法。
注：此bug由JShaman团队发现，并已提交作者修复。
JShaman是国内专业的javascript源代码安全研究组织，与Javascript-obfuscator保持着友好联络与技术交流。
Javascript-obfuscator4.0.0，其字符串阵列功能，对async函数中的成员对象进行阵列化处理，会导致代码异常。
例如，一段NodeJS代码：
使用Javascript-obfuscator进行混淆加密，保护选项只选择了字符串阵列化这一个功能：
混淆加密后的代码，运行时发生异常，提示有变量未定义：
注意图中命令行中所显示，第一次执行是在未加密前，可正常使用。第二次是执行加密后的代码，出现错误。
上述JS代码混淆加密后出现错误的原因，是由于进行字符串的阵列化处理时，未考虑是否处于async函数中。导致阵列化时MemberExpression字面量放置到了函数不可访问的外部区域中。如下图所示：
注：绿线上方是原始代码，做对比用。参考上面图中的错误提示变量，可以看出错误原因。
阵列化功能，在JavaScript-Obfuscator目录下的StringArrayTransformer.ts文件中。
以下为临时修复代码:
即：在处理字面量时，判断是否处于async函数体中，如是，则跳过。
用此方法修复后，运行混淆加密后的代码正常，如下图所示：
一次性搞定JS的DOM操作
我们知道，无论是现在的开发框架（底层还是操作DOM）还是传统的开发都离不开DOM的操作，所以了解和学习DOM是必须的，也是成为一个全面的前端开发的必备知识和内容，那接下来我们就来看下什么是DOM，DOM的全称文档对象模型，DOM的本质就是让我们通过JS来对页面的元素进行操作的一套浏览器提供的API，它的实现方式是将页面所有的内容表示为可以修改的对象，下面就是我们比较常见的几个元素在DOM中的对应关系：
- 比如document.documentElment对应的是html元素；
- 比如document.body对应的是body元素；
- 比如document.head对应的是head元素；
既然认识了DOM那么就很有必要了解下一个概念DOM树，一个页面不只有html head body还有很多子元素，在html结构中最终会形成一个树结构，在抽象成DOM对象的时候，它会形成一个树结构，我们称之为DOM Tree下图就是一个普通的DOM Tree首先这个树的根部就是DOCUMENT然后其次是HTML节点,之后就是其他元素节点和元素，这样就形成了一棵树的形状，这样就形成了一棵DOM树。
DOM的学习顺序：DOM中有很多的API，在学习DOM的时候建议通过一下顺序学习。
- DOM元素之间的关系。
- 获取DOM元素。
- DOM的节点type tag content。
- DOM节点的attributes properies等等。
- DOM节点的创建，插入，克隆，删除。
- DOM节点的样式，类。
- DOM元素/window的大小，滚动，坐标。
既然我们已经理解了DOM的本质是什么样的东西，那么我们来从DOM的整体架构上来了解DOM，DOM相当于是JavaScript和HTML，CSS之间的桥梁，通过浏览器提供给我们的API，我们可以对元素及其其中的内容做任何事情，DOM之间是有继承关系的，他们的继承关系如下。
document对象：Document节点表示整个载入的网页，它的实例是全局的document对象：
- 对DOM的所有操作都是从document对象开始的。
- 它是DOM的入口点，可以从document开始去访问任何节点元素。
对于最顶层的html head body元素，我们可以直接在document对象中获取到：
- html元素：=document.documentElement
- body元素：=document.body
- head元素：=document.head
- 文档声明：<!DOCTYPE html>=document.doctyp
当我们获取一个节点后，可以通过这个节点获取其他元素的节点，我们称之为节点之间的导航，节点的内容包含的很多，注释也是节点，但是我们需要理解元素和节点的区别，元素仅仅包含HTML元素。
- 父节点：parentNode
- 前兄弟节点：previousSibling
- 后兄弟节点：nextSibling
- 子节点：childNodes
- 第一个子节点：fristChild
- 最后一个子节点：lastChild
当我们获取了一个元素，我们就可以通过这个元素获取其他的元素，这就是元素之间的导航。
- 父元素：parentElement
- 前兄弟节点：previousElementSibling
- 后兄弟节点：nextElementSibling
- 子节点：children
- 第一个子节点：firstElementChild
- 第二个子节点：lastElementChild
当元素彼此相邻的时候，DOM导航属性非常有用，但是在实际开发中，我们希望可以任意的获取到某一个元素，DOM为我们提供了获取元素的方法：
在开发中我们最常用的是querySelector和querySelectorAll两个获取元素的方法,getElementById一般用来在一些低版本浏览器进行一些兼容。
节点的属性-nodeType：目前我们已经可以获取节点了，接下来我们看一下节点中有哪些常见的属性，以下是节点的常用属性：
节点的属性-nodeName，tagName
- nodeName:获取节点的名字，是为任意的Node定义的；
- tagName:获取元素的标签名词，属性仅适用于Element节点；
节点属性-innerHTML，textContent
- innerHTML属性，将元素中的HTML获取为字符串的形式，设置元素中的内容。
- outerHTML属性，包含元素的完整HTML，innerHTML加上元素本身。
- textContent属性，仅仅获取元素的文本内容。
innerHTML和textContent的区别：
- 使用innerHTML，我们将其作为HTML插入，带有所有HTML标签
- 使用textContent，我们将其作为文本插入，所有符号均按字面意义处理。
节点的属性-nodeValue：用于获取非元素节点的文本内容。
元素节点的其他属性：
- hidden属性：也是一个全局属性，可以用于设置元素隐藏
- value属性：input select textarea的value
- href属性：<a href=\”…\”>的href
- id属性：所有的元素的id特性(attribute)的值
我们知道一个元素除了有开始标签，结束标签，内容以外还有很多属性。
浏览器在进行解析HTML元素的时候，会将对应的attribute也创建出来放在对应的元素上面。
- 标准的attribute：某些attribute属性是标准的，比如id、class、href、type、value等；
- 非标准的attribute：某些attribute属性是自定义的，比如abc、age、height等；
对所有的attribute都支持的操作。
- elem.hasAttribute(name) — 检查特性是否存在。
- elem.getAttribute(name) — 获取这个特性值。
- elem.setAttribute(name, value) — 设置这个特性值。
- elem.removeAttribute(name) — 移除这个特性。
- attributes：attr对象的集合，具有name、value属性；
attribute具有以下属性：
- 它们的名字是大小写不敏感的（id 与 ID 相同）。
- 它们的值总是字符串类型的。
对于标准的attribute，会在DOM对象上创建与其对应的property属性（对象中的属性叫做property）：
在大多数情况下，它们是相互作用的
- 改变property，通过attribute获取的值，会随着改变；
- 通过attribute操作修改，property的值会随着改变；
- 但是input的value修改只能通过attribute的方法；
- 除非特别情况，大多数情况下，设置、获取attribute，推荐使用property的方式，这是因为它默认情况下是有类型的；
HTML5的data-*自定义属性，那么它们也是可以在dataset属性中获取到的：
有时候我们会通过JavaScript来动态修改样式，这个时候我们有两个选择：
- 选择一：在CSS中编写好对应的样式，动态的添加class；
- 选择二：动态的修改style属性；
开发中如何选择呢？
- 在大多数情况下，如果可以动态修改class完成某个功能，更推荐使用动态class；
- 如果对于某些情况，无法通过动态修改class（比如精准修改某个css属性的值），那么就可以修改style属性；
元素的className和classList：元素的class attribute，对应的property并非叫class，而是className：
- 这是因为JavaScript早期是不允许使用class这种关键字来作为对象的属性，所以DOM规范使用了className；
- 虽然现在JavaScript已经没有这样的限制，但是并不推荐，并且依然在使用className这个名称；
- 如果我们需要添加或者移除单个的class，那么可以使用classList属性。
elem.classList 是一个特殊的对象：
- elem.classList.add (class) ：添加一个类
- elem.classList.remove(class)：添加/移除类。
- elem.classList.toggle(class) ：如果类不存在就添加类，存在就移除它。
- elem.classList.contains(class)：检查给定类，返回 true/false。
- classList是可迭代对象，可以通过for of进行遍历。
元素的style属性：如果需要单独修改某一个CSS属性，那么可以通过style来操作：
- 对于多词（multi-word）属性，使用驼峰式 camelCase
- 多个样式的写法，我们需要使用cssText属性：
元素style的读取 – getComputedStyle，如果我们需要读取样式：
- 对于内联样式，是可以通过style.*的方式读取到的;
- 对于style、css文件中的样式，是读取不到的；
这个时候，我们可以通过getComputedStyle的全局函数来实现：
创建元素：我们进行元素的创建基本分为两个步骤
- 创建一个元素。
- 动态插入某个元素到DOM的某个位置。
插入元素：插入元素的方式如下
- node.append(…nodes or strings) —— 在 node 末尾 插入节点或字符串，
- node.prepend(…nodes or strings) —— 在 node 开头 插入节点或字符串，
- node.before(…nodes or strings) —— 在 node 前面 插入节点或字符串，
- node.after(…nodes or strings) —— 在 node 后面 插入节点或字符串，
- node.replaceWith(…nodes or strings) —— 将 node 替换为给定的节点或字符串。
移除和克隆元素：
- 移除元素我们可以调用元素本身的remove方法：
- 如果我们想要复制一个现有的元素，可以通过cloneNode方法，可以传入一个Boolean类型的值，来决定是否是深度克隆，深度克隆会克隆对应元素的子元素，否则不会；
旧的元素操作方法：很多时候我们也会看到很多旧的操作方法
- parentElem.appendChild(node)：在parentElem的父元素最后位置添加一个子元素
- parentElem.insertBefore(node, nextSibling)：在parentElem的nextSibling前面插入一个子元素；
- parentElem.replaceChild(node, oldChild)：在parentElem中，新元素替换之前的oldChild元素；
- parentElem.removeChild(node)：在parentElem中，移除某一个元素；
DOM相关的内容到此就结束了，DOM的API有很多，但是其实我们并不需要全部记住，我们知道DOM在做什么事情就可以了，其实DOM就是一个沟通页面于JS的桥梁，我们使用DOM的基本思路就是，拿到对应元素对其进行修改，这个修改就是对元素的增删改查四种操作，其实很简单，当我们从更高的层次了解了DOM当我们遇到不懂的API或者需求的时候相应的查询就好~
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
