写点什么

六个字符构建 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:48780

评论

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

前端mcok原来可以如此丝滑

Liam

前端 前端开发 Postman Mock 前端工具

出海季收官,速来 Get 全球化发展实操手册

融云 RongCloud

嘎嘎牛逼!对标P7+)互联网Java高级架构师面试标准手册

Geek_Yin

阿里巴巴 程序员人生 P7架构师 #java 程序员面试、

Zebec社区利好频传,Galaxy Project上领取专属Zebec OAT

股市老人

2000字带您了解什么是 SD-WAN,它是如何工作的?

wljslmz

SD-WAN 网络技术 8月月更

阿里三面被面试官狂问Redis,简历上再也不敢写"精通"了

退休的汤姆

面试题 阿里 秋招 redis 底层原理

注册荣耀开发者,惊喜抽好礼!邀请5位好友赢50元购物卡~

荣耀开发者服务平台

开发者 手机 智慧屏 荣耀 honor

深入解析Flutter下一代渲染引擎Impeller

字节跳动终端技术

flutter 字节跳动 渲染器 Impeller 渲染方案

参与开源共建,你不可不知的贡献技巧

OpenHarmony开发者

OpenHarmony

翻译 | Kubernetes Operator 对数据库的重要性

RadonDB

Kubernetes operator RadonDB 数据库·

Shopee商家数字商品可配置系统设计与实现

Shopee技术团队

前端 Shopee

翻译|是否应该在 Kubernetes 上运行数据库

RadonDB

MySQL Kubernetes RadonDB 数据库·

开源一夏 | SSO单点登录流程源码学习

六月的雨在InfoQ

redis 开源 SSO 单点登录 8月月更

Go Go 简单的很,标准库之 fmt 包的一键入门

梦想橡皮擦

Python 爬虫 8月月更

兆骑科创创新创业服务平台,云路演,人才引进平台

兆骑科创凤阁

第一时间快速了解 Kubernetes 1.25

云原生技术社区

容器 云原生 kubernetes入门 kubenetes Kubernetes, 云原生, eBPF

2022秋招,Java岗最全面试攻略,吃透25个技术栈Offer拿到手软

退休的汤姆

面经 社招 Java工程师 秋招 Java八股文

"教练,我想打篮球!" —— 给做系统的同学们准备的 AI 学习系列小册

Zilliz

人工智能开源

如何实现跨数百个K8s集群的管理

云原生技术社区

istio 服务网格 K8s 多集群管理 Istio流量管理

【Java秋招面试宝典300题】阿里P8爆肝2个月呕心整理,挑战30天打卡秋招上岸!(基础、Spring、MySQL、JVM、微服务分布式)

退休的汤姆

Java 面经 校招 Java工程师 秋招

云上开发如何实现持续代码提交

华为云开发者联盟

云计算 后端 代码

Python 教程之输入输出(8)—— print() 中的 Python 结束参数

海拥(haiyong.site)

Python io 8月月更

金融机构求索数据价值,“数牍方案”提供可行解 数牍科技

Jessica@数牍

隐私计算 金融行业 数据隐私安全

重庆邮电大学新工科训练营 实践Java和大数据方向全真产业项目

神奇视野

关于Copy On Write Array List,你会安全使用么

华为云开发者联盟

List 开发

青软集团蝉联华为云「千万俱乐部奖」「最佳销售黑钻奖」两大奖项

神奇视野

Mysql和Redis数据如何保持一致

京东科技开发者

数据 数据一致性 MySQL 数据库 数据库· redis 底层原理

App Deploy as Code! SAE & Terraform 实现 IaC 式部署应用

阿里巴巴中间件

阿里云 Serverless Terraform 阿里云云原生

Bytebase 1.3.1 - 2022.8.18

Bytebase

SQL优化 database SQL审批

工业智能化转型升级难?华为云这三招,加速商业变现

华为云开发者联盟

云计算 后端 华为云 工业智能化

签约计划第三季获奖名单公布,一起见证百人成团!

InfoQ写作社区官方

热门活动 签约计划第三季

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