1.markdown-it 原理解析
2.小程序逆向分析 (一)

markdown-it 原理解析

       在《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用 VuePress 搭建了一个博客，源码的历最终的源码的历效果查看： TypeScript 中文文档。

       在搭建博客的源码的历过程中，我们出于实际的源码的历需求，在《VuePress 博客优化之拓展 Markdown 语法》中讲解了如何写一个 markdown-it插件，源码的历朝圣娱乐源码本篇我们将深入markdown-it的源码的历源码，讲解 markdown-it的源码的历执行原理，旨在让大家对 markdown-it有更加深入的源码的历理解。

       引用 markdown-it Github 仓库的源码的历介绍：

       Markdown parser done right. Fast and easy to extend.

       可以看出markdown-it是一个 markdown 解析器，并且易于拓展。源码的历

       其演示地址为： markdown-it.github.io/

       markdown-it具有以下几个优势：

       使用源码解析

       我们查看markdown-it 的源码的历 入口代码，可以发现其代码逻辑清晰明了：

       从render方法中也可以看出，源码的历其渲染分为两个过程：

       跟 Babel 很像，源码的历不过 Babel 是源码的历转换为抽象语法树（AST），而markdown-it 没有选择使用 AST，主要是为了遵循 KISS(Keep It Simple, Stupid) 原则。

       Tokens

       那 Tokens 长什么样呢？我们不妨在 演示页面中尝试一下：

       可以看出# header生成的 Token 格式为（注：这里为了展示方便，简化了）：

       具体 Token 里的字段含义可以查看 Token Class。

       通过这个简单的 Tokens 示例也可以看出 Tokens 和 AST 的区别：

       Parse

       查看 parse 方法相关的代码：

       可以看到其具体执行的代码，应该是写在了./parse_core 里，查看下 parse_core.js 的代码：

       可以看出，Parse 过程默认有 6 条规则，其主要作用分别是linux telnetd 源码：

       1. normalize

       在 CSS 中，我们使用normalize.css 抹平各端差异，这里也是一样的逻辑，我们查看 normalize 的代码，其实很简单：

       我们知道\n是匹配一个换行符，\r是匹配一个回车符，那这里为什么要将 \r\n替换成 \n 呢?

       我们可以在阮一峰老师的这篇 《回车与换行》中找到\r\n出现的历史：

       在计算机还没有出现之前，有一种叫做电传打字机（Teletype Model ）的玩意，每秒钟可以打个字符。但是它有一个问题，就是打完一行换行的时候，要用去0.2秒，正好可以打两个字符。要是在这0.2秒里面，又有新的字符传过来，那么这个字符将丢失。 于是，研制人员想了个办法解决这个问题，就是在每行后面加两个表示结束的字符。一个叫做"回车"，告诉打字机把打印头定位在左边界；另一个叫做"换行"，告诉打字机把纸向下移一行。 这就是"换行"和"回车"的来历，从它们的csol佳佳源码英语名字上也可以看出一二。 后来，计算机发明了，这两个概念也就被般到了计算机上。那时，存储器很贵，一些科学家认为在每行结尾加两个字符太浪费了，加一个就可以。于是，就出现了分歧。 Unix系统里，每行结尾只有""，即"\n"；Windows系统里面，每行结尾是""，即"\r\n"；Mac系统里，每行结尾是""。一个直接后果是，Unix/Mac系统下的文件在Windows里打开的话，所有文字会变成一行；而Windows里的文件在Unix/Mac下打开的话，在每行的结尾可能会多出一个^M符号。

       之所以将\r\n替换成 \n其实是 遵循规范：

       A line ending is a newline (U+A), a carriage return (U+D) not followed by a newline, or a carriage return and a following newline.

       其中 U+A 表示换行(LF) ，U+D 表示回车(CR) 。

       除了替换回车符外，源码里还替换了空字符，flex网站源码在 正则中，\0表示匹配 NULL（U+）字符，根据 WIKI 的解释：

       空字符（Null character）又称结束符，缩写 NUL，是一个数值为 0 的控制字符。 在许多字符编码中都包括空字符，包括ISO/IEC （ASCII）、C0控制码、通用字符集、Unicode和EBCDIC等，几乎所有主流的编程语言都包括有空字符 这个字符原来的意思类似NOP指令，当送到列表机或终端时，设备不需作任何的动作（不过有些设备会错误的打印或显示一个空白）。

       而我们将空字符替换为\uFFFD，在 Unicode 中，\uFFFD表示替换字符：

       之所以进行这个替换，其实也是遵循规范，我们查阅 CommonMark spec 2.3 章节：

       For security reasons, the Unicode character U+ must be replaced with the REPLACEMENT CHARACTER (U+FFFD).

       我们测试下这个效果：

       效果如下，你会发现原本不可见的空字符被替换成替换字符后，展示了出来：

       2. block

       block 这个规则的作用就是找出 block，生成 tokens，那什么是 block？什么是 inline 呢？我们也可以在 CommonMark spec 中的 Blocks and inlines 章节 找到答案：

       We can think of a document as a sequence of blocks—structural elements like paragraphs, block quotations, lists, headings, rules, and code blocks. Some blocks (like block quotes and list items) contain other blocks; others (like headings and paragraphs) contain inline content—text, links, emphasized text, images, code spans, and so on.

       翻译一下就是：

       我们认为文档是由一组 blocks 组成，结构化的ckeditor 默认 源码元素类似于段落、引用、列表、标题、代码区块等。一些 blocks （像引用和列表）可以包含其他 blocks，其他的一些 blocks（像标题和段落）则可以包含 inline 内容，比如文字、链接、 强调文字、、代码片段等等。

       当然在markdown-it中，哪些会识别成 blocks，可以查看 parser_block.js，这里同样定义了一些识别和 parse 的规则：

       关于这些规则我挑几个不常见的说明一下:

       code 规则用于识别 Indented code blocks (4 spaces padded)，在 markdown 中:

       fence 规则用于识别 Fenced code blocks，在markdown 中：

       hr 规则用于识别换行，在 markdown 中：

       reference 规则用于识别 reference links，在 markdown 中：

       html_block 用于识别 markdown 中的 HTML block 元素标签，就比如div。

       lheading 用于识别 Setext headings，在 markdown 中：

       3. inline

       inline 规则的作用则是解析 markdown 中的 inline，然后生成 tokens，之所以 block 先执行，是因为 block 可以包含 inline ，解析的规则可以查看 parser_inline.js：

       关于这些规则我挑几个不常见的说明一下:

       newline规则用于识别 \n，将 \n 替换为一个 hardbreak 类型的 token

       backticks 规则用于识别反引号：

       entity 规则用于处理 HTML entity，比如 { ``¯``"等：

       4. linkify

       自动识别链接

       5. replacements

       将(c)`` (C) 替换成 ©，将 替换成 ?，将 !!!!! 替换成 !!!，诸如此类：

       6. smartquotes

       为了方便印刷，对直引号做了处理：

       Render

       Render 过程其实就比较简单了，查看 renderer.js 文件，可以看到内置了一些默认的渲染 rules：

       其实这些名字也是 token 的 type，在遍历 token 的时候根据 token 的 type 对应这里的 rules 进行执行，我们看下 code_inline 规则的内容，其实非常简单：

       自定义 Rules

       至此，我们对 markdown-it 的渲染原理进行了简单的了解，无论是 Parse 还是 Render 过程中的 Rules，markdown-it 都提供了方法可以自定义这些 Rules，这些也是写 markdown-it 插件的关键，这些后续我们会讲到。

       系列文章

       博客搭建系列是我至今写的唯一一个偏实战的系列教程，讲解如何使用 VuePress 搭建博客，并部署到 GitHub、Gitee、个人服务器等平台。

       微信：「mqyqingfeng」，加我进冴羽唯一的读者群。

       如果有错误或者不严谨的地方，请务必给予指正，十分感谢。如果喜欢或者有所启发，欢迎 star，对作者也是一种鼓励。

小程序逆向分析 (一)

       李老板：奋飞呀，最近耍小程序的比较多，而且貌似js好耍一点？要不咱们也试试？

       奋飞：你是老板，你说了算喽。

       第一次搞小程序，得找个软柿子捏，就找个以前分析过的某段子App的小程序吧。

       app下载回来就是apk包，那么小程序在哪里？小程序是一个以wxapkg为后缀的文件，在android手机的/data/data/com.tencent.mm/MicroMsg/用户id/appbrand/pkg/里面找。可是下面一堆数字命令的文件，哪个才是我们要找的某段子App的小程序呢？

       两个办法：把所有的小程序都删除，就留一个，那这个文件就是了。或者把某段子App的小程序删除，然后再重装一下。看文件日期，最新的就是了。

       wxapkg文件肯定没法直接分析的了，我敢打赌它一定可以反编译出js文件。从github.com/ezshine/wxa...下载他编译好的wxapkg-convertor可执行程序。把wxapkg文件拖到wxapkg-convertor的界面里面可以反编译出js源码出来。我们先试试分析一下这个websign的来历。

       首先搜索一下websign字符串，很幸运，看上去就在这个js里面的i(d)函数里。

       既然反编译出来了js源码，能否动态调试下，这样分析起来更方便了？答案是可以的，下载微信开发者工具，把刚才反编译的工程导入进来。记得在设置->项目设置中把“不校检合法域名...”这一项勾上。这样代码貌似可以跑起来，我们在i函数下个断点，发下它可以进来了。

       我们调试的时候发现它并没有生成websign，t.h_m为空，导致后面没有生成，这个难不倒我们，从抓包结果里面找一个h_m的值，写死一下，就顺利跑出结果了。从js代码里看，i函数里面最后调用了o(n)，这么明显的md5，我们来试试，在i函数里面加一个代码。首先在Mac下我们算下结果，然后再调试下这个工程，看看t1Use的值。确认过眼神，就是MD5。

       搞个新玩意的时候，先找个软柿子捏，不要一下就想放个大卫星。能反编译，然后再动态调试，那么曙光就在眼前。这个样本运气好，肉眼就可以看出是md5，复杂的js算法，可以考虑PyExecJS、js2py或Node.js来跑。所有的故事都会有结局，只有生活跟你没完。TIP：本文的目的只有一个就是学习更多的逆向技巧和思路，如果有人利用本文技术去进行非法商业获取利益带来的法律责任都是操作者自己承担，和本文以及作者没关系。本文涉及到的代码项目可以去奋飞的朋友们知识星球自取，欢迎加入知识星球一起学习探讨技术。有问题可以加我wx：fenfei讨论下。无偿领取网络安全入门到进阶学习籽料可点击这个链接：瓜子：零基础学网络安全有什么建议？如何入门？——来自一位年薪W的网工倾情讲解。