限时领|《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:48742

评论

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

模块二作业

novoer

#架构实战营

阿里云消息队列 RocketMQ、Kafka 荣获金融级产品稳定性测评 “先进级” 认证

阿里巴巴云原生

阿里云 云原生 稳定性 获奖

SRE在安全方面可以做点啥

勇往直前的胖子

如何配置 Nessus 漏洞扫描策略?

Ethereal

网络安全 漏洞扫描 网络技术联盟站 Nessus

【架构实战营】模块二:知识点总结

wgl

「架构实战营」

全网最牛逼的华为NTP配置命令,建议收藏!

Ethereal

华为 ntp 网络技术

架构实战营 - 模块2 - 作业

Pyel

「架构实战营」

明年的能力计划之学会咨询

将军-技术演讲力教练

【docker 总结】第七篇 - nodejs项目部署

Brave

Docker 12月日更

DDD领域驱动设计实战(六)-理解领域事件(Domain Event)

JavaEdge

12月日更

架构实战营 - 第 4 期 - 模块二作业

Evan

架构实战营 「架构实战营」

云未来、新可能 - 绿色、无处不在、可信的计算

阿里巴巴云原生

阿里云 容器 云原生 活动 KubeCON

架构复杂度分析

tony

「架构实战营」

腾讯云实时音视频(TRTC)SDK使用体验测评

为自己带盐

dotnet 28天写作 trtc-js-sdk 12月日更

微信朋友圈的高性能复杂度分析

糖糖学编程

架构实战营

模块二作业-朋友圈高性能复杂度分析

圈圈gor

「架构实战营」

从手游中的感悟

搬砖的周狮傅

游戏 日常感悟

消息队列存储-mysql表

🌾🌾🌾小麦🌾🌾🌾

架构实战营

全网最牛逼的华为信息中心配置命令,建议收藏!

Ethereal

网络技术 信息中心 厂商设备命令

微信朋友圈的高性能复杂度

guodongq

「架构实战营」

第2周学习总结

糖糖学编程

架构实战营

性能工具之stress工具使用教程(带源码说明)

zuozewei

Linux 工具 性能测试 12月日更

字典树之旅04.Patricia Trie(二)

极客志

Java 自然语言处理 数据结构 算法 字典树

【LeetCode】找到小镇的法官Java题解

Albert

算法 LeetCode 12月日更

微信朋友圈高性能复杂度设计

CH

「架构实战营」

模块二作业

黄秀明

Service Mesh 在中国工商银行的探索与实践

阿里巴巴云原生

阿里云 微服务 云原生 服务网格 金融实践

【架构实战营】模块二:命题作业

wgl

「架构实战营」

[Pulsar] LookUp原理

Zike Yang

Apache Pulsar 12月日更

从甲方到乙方,如何做好混沌工程的行业化落地

阿里巴巴云原生

阿里云 云原生 混沌工程 金融行业 行业化落地

Dubbo-Admin 功能展示与实操解析

阿里巴巴云原生

阿里云 云原生 Dubbo-Admin 功能

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