【译】六个字符构建 Javascript 世界

简介:

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

 前言 

无用但有趣的冷知识,通过[ ] ( ) ! +  构建 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 、ef 、lr 、st 、u,那剩下的字母呢?

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


  [][[]] + [] === "undefined"

 模拟构建 

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

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

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


  []["fill"]

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


  []["fill"]+[] === "function fill() { [native code] }"

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

通过新获取的 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、 NS 、Am 、gy

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


(10)["toString"]() === "10"

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

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


  (12)["toString"](10) === "12" // base 10 - normal to us

  (12)["toString"](2) === "1100" // base 2, or binary, for 12

  (12)["toString"](8) === "14" // base 8 (octonary) for 12

  (12)["toString"](16) === "c" // hex for 12

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

  (10)["toString"](36) === "a"

  (35)["toString"](36) === "z"

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

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

  "test"["bold"]() === "<b>test</b>"

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

 函数运行 

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

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


  []["fill"]["constructor"] === Function

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


  Function("alert('test')");

运行得到:


  Function anonymous() {

      alert('test')

  }

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

小试牛刀,运行 escape 函数:

  []["fill"]["constructor"]("return escape(' ')")() === "%20"

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


  []["fill"]["constructor"]("return escape('<')")()[2] === "C"

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


  ""["constructor"]["fromCharCode"](65) === "A"

  ""["constructor"]["fromCharCode"](46) === "."

 Javascript 世界  

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

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

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

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

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

你说了这么多,有用吗?

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

原文:

A Javascript journey with only six characters

作者:李俊冬


监审:蔡白银

编辑:钟   艳

网址:tech.lianjia.com


原文发布时间为:2018年06月21日
原文作者: 掘金

本文来源: 掘金 如需转载请联系原作者


相关文章
|
1月前
|
存储 JavaScript 前端开发
使用JavaScript构建动态交互式网页:从基础到实践
【10月更文挑战第12天】使用JavaScript构建动态交互式网页:从基础到实践
76 1
|
17天前
|
JavaScript 中间件 关系型数据库
构建高效的后端服务:Node.js 与 Express 的实践指南
在后端开发领域,Node.js 与 Express 的组合因其轻量级和高效性而广受欢迎。本文将深入探讨如何利用这一组合构建高性能的后端服务。我们将从 Node.js 的事件驱动和非阻塞 I/O 模型出发,解释其如何优化网络请求处理。接着,通过 Express 框架的简洁 API,展示如何快速搭建 RESTful API。文章还将涉及中间件的使用,以及如何结合 MySQL 数据库进行数据操作。最后,我们将讨论性能优化技巧,包括异步编程模式和缓存策略,以确保服务的稳定性和扩展性。
|
6天前
|
JSON JavaScript API
深入浅出Node.js:从零开始构建RESTful API
【10月更文挑战第39天】 在数字化时代的浪潮中,API(应用程序编程接口)已成为连接不同软件应用的桥梁。本文将带领读者从零基础出发,逐步深入Node.js的世界,最终实现一个功能完备的RESTful API。通过实践,我们将探索如何利用Node.js的异步特性和强大的生态系统来构建高效、可扩展的服务。准备好迎接代码和概念的碰撞,一起解锁后端开发的新篇章。
|
20天前
|
资源调度 前端开发 数据可视化
构建高效的数据可视化仪表板:D3.js与React的融合之道
【10月更文挑战第25天】在数据驱动的时代,将复杂的数据集转换为直观、互动式的可视化表示已成为一项至关重要的技能。本文深入探讨了如何结合D3.js的强大可视化功能和React框架的响应式特性来构建高效、动态的数据可视化仪表板。文章首先介绍了D3.js和React的基础知识,然后通过一个实际的项目案例,详细阐述了如何将两者结合使用,并提供了实用的代码示例。无论你是数据科学家、前端开发者还是可视化爱好者,这篇文章都将为你提供宝贵的洞见和实用技能。
42 5
|
23天前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
21 4
|
24天前
|
Web App开发 JavaScript 中间件
构建高效后端服务:Node.js与Express框架的完美结合
【10月更文挑战第21天】本文将引导你走进Node.js和Express框架的世界,探索它们如何共同打造一个高效、可扩展的后端服务。通过深入浅出的解释和实际代码示例,我们将一起理解这一组合的魅力所在,并学习如何利用它们来构建现代Web应用。
44 1
|
10天前
|
JavaScript 前端开发 NoSQL
深入浅出:使用Node.js构建RESTful API
【10月更文挑战第35天】在数字时代的浪潮中,后端技术如同海洋中稳固的灯塔,为前端应用提供数据和逻辑支撑。本文旨在通过浅显易懂的方式,带领读者了解如何利用Node.js这一强大的后端平台,搭建一个高效、可靠的RESTful API。我们将从基础概念入手,逐步深入到代码实践,最终实现一个简单的API示例。这不仅是对技术的探索,也是对知识传递方式的一次创新尝试。让我们一起启航,探索Node.js的奥秘,解锁后端开发的无限可能。
|
12天前
|
Web App开发 JavaScript 前端开发
构建高效后端服务:Node.js与Express框架的实践
【10月更文挑战第33天】在数字化时代的浪潮中,后端服务的效率和可靠性成为企业竞争的关键。本文将深入探讨如何利用Node.js和Express框架构建高效且易于维护的后端服务。通过实践案例和代码示例,我们将揭示这一组合如何简化开发流程、优化性能,并提升用户体验。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的见解和实用技巧。
|
14天前
|
Web App开发 JavaScript 中间件
构建高效后端服务:Node.js与Express框架的融合之道
【10月更文挑战第31天】在追求快速、灵活和高效的后端开发领域,Node.js与Express框架的结合如同咖啡遇见了奶油——完美融合。本文将带你探索这一组合如何让后端服务搭建变得既轻松又充满乐趣,同时确保你的应用能够以光速运行。
23 0
|
1月前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API服务器
【10月更文挑战第12天】使用JavaScript和Node.js构建简单的RESTful API服务器
17 0