“AI 技术+人才”如何成为企业增长新引擎?戳此了解>>> 了解详情
写点什么

六个字符构建 Javascript 世界

  • 2019-09-22
  • 本文字数:2656 字

    阅读完需:约 9 分钟

六个字符构建 Javascript 世界

无用但有趣的冷知识,通过[ ] ( ) ! + 构建 Javascript 世界,hope you enjoy it!


Javascript 是一门非常奇怪,同时也非常棒的语言,我们可以用它写出非常疯狂但却奏效的代码,同时,它也能根据我们使用的方式进行类型转换从而辅助开发。

构建假设

如果将字符串(string)和其他类型参数相加,它会猜测我们需要文本格式,最后结果将返回 string 类型。


如果将其他类型参数加上 + 或 - 前缀,它知道我们需要一个数值类型(Number),


如果类型转换合法,紧接着就会将参数转换成数值类型。


如果将参数取反(!),它会把类型转换成布尔值。

构建法则

下面让我们从最基础的开始,这里有几条黄金法则:


1.通过 ! 转换为布尔(Boolean)类型

2.通过 + 转换为数值(Number)类型

3.与 [] 相加转换为字符(String)类型


通过上面的黄金法则,让我们实践几个例子:


  ![] === false
+[] === 0
[]+[] === ""
复制代码


当然,聪明的你肯定知道可以通过中括号加索引的方式从字符串中获取对应位置的字符:


  "hello"[0] === "h"
复制代码


通过多个数值字符相加,再转换为数值类型,即可获得多位数:


  +("1" + "1") === 11
复制代码


非常棒,通过上面的铺垫,现在我们已经拿到了字母 a :


  ![] === false
![]+[] === "false"
+!![] === 1
------------------------
(![]+[])[+!![]] === "a" // same as "false"[1]
复制代码


如此,通过一些简单的结合,我们还可以从单词 true 和 false 中获取到 a、e、f、l、r、s、t、u,那剩下的字母呢?


别忘了,我们还可以通过 [][[]] 这种方式获得 undefined,复用上面的方式,我们能拿到字母 d、i、n。


  [][[]] + [] === "undefined"
复制代码

模拟构建

到目前为止,通过我们拿到的字母,已经可以拼出 fill、filter、find 这些单词,当然,你还可以组合成其他的单词,值得一提的是,上面提出三个单词都属于数组方法,这意味可以在数组实例中直接被调用,例如 [2,1].sort()。


语法上,[2,1]“sort” 是与 [2,1].sort() 等价的。


让我们继续看看,使用字母拼凑的数组方法还能得到什么,目前我们还不需要执行这些函数:


  []["fill"]
复制代码


上面的代码最终会产生 function fill() { [native code] },通过黄金法则,我们将结果再次转换为 String 类型:


  []["fill"]+[] === "function fill() { [native code] }"
复制代码


现在,我们又获得了 c、o、v、(、)、{、}、(空格)。


通过新获取的 c 和 o,现在可以组合单词 constructor,constructor 是 JS 对象中返回构造函数的方法,下面就让我们通过 constructor 从已有对象类型中获取对应字符串形式的构造函数:


  true["constructor"] + [] === "function Boolean() { [native code] }"
0["constructor"] + [] === "function Number() { [native code] }"
""["constructor"] + [] === "function String() { [native code] }"
[]["constructor"] + [] === "function Array() { [native code] }"
复制代码


通过这些构造函数,字母集合中增添了 B、N、S、A、m、g、y


现在可以构建 toString,同样,可以通过中括号使用的函数,不过这次我们要执行它:


(10)“toString” === “10”


但前文中我们已经通过第三条黄金法则熟练地将任何类型转换为字符串类型了,toString 的存在看起来有点鸡肋,没用了?


别忘了,数值类型的 toString 方法还有第二个参数 radix,radix 决定了数值转换为字符串类型前被转换为的进制,举个例子:


  (12)[](10) === "12" // base 10 - normal to us
(12)[](2) === "1100" // base 2, or binary, for 12
(12)[](8) === "14" // base 8 (octonary) for 12
(12)[](16) === "c" // hex for 12
复制代码


机智的你肯定想到了,为什么只写到 16 进制?进制最大可以是 36,这可包括了 0-9、a-z 中的所有字母,现在我们可以拿到我们想要的任何字母:


  (10)[](36) === "a"
(35)[](36) === "z"
复制代码


太棒了,我们已经拿到了全部小写字母,但新问题摆在眼前,标点符号和大写字母该怎么办呢?


根据 JS 执行的位置,它可能有权限访问特定的预定义对象或数据,如果是在浏览器中运行,那么就可以有访问到一些传统的 HTML 包装方法,例如,bold 是一个字符串方法,可以将字符串用 标签包裹。


  "test"<a href="">"bold" === "<b>test</b>"</a href="">
复制代码


这样,我们就拿到了 <、> 和 /。

函数运行

你可能在项目开发中使用过 escape 函数,它可以将字符串转换为浏览器可以翻译的 URI 友好格式,这个函数在我们接下来的工作中扮演了重要角色,我们需要用到它。通过拼凑字母得到这个单词,但问题是如何使其执行,它是一个全局函数,不属于任何类型。


那么函数的构造函数是什么呢?其实就是函数对象本身,function Function() { [native code] }。


  []["fill"]["constructor"] === Function
复制代码


通过 Function,我们可以传入字符串来构建一个函数:


  Function("alert('test')");
复制代码


运行得到:


  Function anonymous() {
alert('test')
}
复制代码


我们只需要在末尾加上 () 就可以立即执行这个函数,如你所见,我们现在可以真正执行代码了!


小试牛刀,运行 escape 函数:


  []("return escape(' ')")() === "%20"
复制代码


如果我们给 escape 函数传入 <,会得到 %C,如果想获得盛夏的大写字母,这个 C 至关重要。


  []("return escape('<')")()[2] === "C"
复制代码


通过 C,我们可以得到 fromCharCode 函数,通过给定的十进制参数,可以得到对应的 Unicode 字符,它属于字符对象,因此调用方式可以参照前文:


  ""[](65) === "A"
""[](46) === "."
复制代码

Javascript 世界

通过 Unicode 速查可以快速找到任何字符对应的数值。


到这里,Javascript 世界的构建元素已经全部找齐!我们已经能拿到我们需要的任何参数,并将它们连接到一起形成代码并执行,这意味,我们仅通过 [、]、(、)、+、! 实现了 Javascript 的图灵完备。


想证明一下?不妨在浏览器控制台里执行下面的代码:


如果你是在手机上看的,可以告诉你,上面执行的是 alert(“wtf”)


jsFuck 可以自动转换你的代码,这里是过程介绍。


你说了这么多,有用吗?


如果你非要问我有没有用,我只能说点儿用也没,不过 eBay 前段时间出了个 Bug,网站里允许卖家在页面中插入这些字符构成的 JS 代码,但这种攻击媒介不是很常见。有人说可以用来进行代码混淆,实际上,有更好的混淆方式。


作者介绍:


李俊冬,租赁大前端,17 年 2 月加入链家,先后负责新房 B 端、租赁 C 端的前端开发。


本文转载自公众号贝壳产品技术(ID:gh_9afeb423f390)。


原文链接:


https://mp.weixin.qq.com/s/9Qb9rEc3aTi7wj49vIkUTg


2019-09-22 22:48523

评论

发布
暂无评论
发现更多内容

TDengine3.0流式计算引擎语法规则介绍

TDengine

数据库 tdengine 企业号九月金秋榜

软件测试 | 测试开发 | 做为测试,那些必须掌握的测试技术体系

测吧(北京)科技有限公司

测试

软件测试 | 测试开发 | 测试面试 | 某 BAT 大厂测试开发面试真题与重点解析

测吧(北京)科技有限公司

测试

软件测试 | 测试开发 | 测试平台开发-前端开发之Vue.js 框架(一)

测吧(北京)科技有限公司

测试

软件测试 | 测试开发 | 被测系统架构与数据流分析

测吧(北京)科技有限公司

测试

开发者有话说|27岁暮年老人一生

百里丶落云

软件测试 | 测试开发 | 软件测试入门必会-流程管理平台

测吧(北京)科技有限公司

测试

边缘计算落地提速 天翼云Serverless边缘容器加速深耕市场

Geek_2d6073

Tree-sitter入门

阿呆

Python tree-sitter py-tree-sitter

多维数据库中的高效计算机制

元年技术洞察

智能多维数据库 专利解析

实现Promise的原型方法--前端面试能力提升

helloworld1024fd

JavaScript

软件测试 | 测试开发 | 一文带你了解测试流程的体系

测吧(北京)科技有限公司

测试

百草味上线“本味甄果”系列罐装坚果 打造高品质坚果新标准

E科讯

从React源码角度看useCallback,useMemo,useContext

goClient1992

React

C语言太细了

清风莫追

c 10月月更

深度分析React源码中的合成事件

goClient1992

React

软件测试 | 测试开发 | 软件项目管理与跨部门沟通协作

测吧(北京)科技有限公司

测试

【译】日志:每个软件工程师都应该了解实时数据的统一抽象【二】

Rae

kafka 架构 分布式 日志 原理

软件测试 | 测试开发 | 被测项目需求你理解到位了么?

测吧(北京)科技有限公司

测试

面试官:能用JavaScript手写一个bind函数吗

helloworld1024fd

JavaScript

四个典型的车联网案例,给你数据架构升级思路

TDengine

tdengine 车联网 物联网

运维成本降低 50%,丽迅物流是如何应对大规模容器镜像管理挑战的

阿里巴巴云原生

阿里云 容器 云原生 镜像

【导航】FreeRTOS学习专栏目录 【快速跳转】

矜辰所致

目录 FreeRTOS 9月月更

嵌入式RTOS的 任务栈 和 系统栈

矜辰所致

嵌入式 9月月更 RTOS

2022-9-30

留白的艺术

HummerRisk 云原生安全平台

HummerCloud

云计算 云原生 云安全

python安装包报错Microsoft Visual C++ 14.0 or greater is required

阿呆

pip

【“玩物立志”-scratch少儿编程】亲手实现小猫走迷宫小游戏:其实挺简单

清风莫追

游戏 scratch 10月月更

Go runtime:带你了解Go语言的GMP模型与goroutine调度

董哥的黑板报

Go 线程 操作系统 协程 runtime

软件测试 | 测试开发 | 测试平台开发-前端开发之Vue.js 框架的使用(二)

测吧(北京)科技有限公司

测试

大咖说·图书分享|深入集群:大型数据中心资源调度与管理

大咖说

编程 数据中心

六个字符构建 Javascript 世界_文化 & 方法_李俊冬_InfoQ精选文章