如何用浏览器进行网站源代码的静态分析—赏金猎人入门手册

,

,

等）当你在你的浏览器中个打开一个url时，HTML文件首先会被加载进来，然后代码会被浏览器引擎所解析当浏览器发现或者标签时（或者其他带src属性的标签时，像image 文件或者 video 文件时），它会停止解析HTML并且加载那些文件。

如果要执行JavaScript代码时，这些代码也会被马上的执行如果有样式表的话，css解析器也会把css代码解析成css样式规则所有的事情原理就像下面这张图一样（这个图非常简单，但是足够说明这些基本的概念）。

Elements所包含的内容和源码所包含的内容不同之处是什么呢？像下面这个例子，JavaScript添加一个元素到DOM中去： Dynamic P Application

* { font-size:18px; font-weight:bold; color: #2e2e2e; }

const el = document.getElementById(container)

const dynamic_paragraph = document.createElement(p) const dp_content = document.createTextNode(Hello from dynamically added

aragraph!)

dynamic_paragraph.appendChild(dp_content) el.appendChild(dynamic_paragraph)

当你打开浏览器并查看源码时，你会发现所呈现的内容和上面的代码是一样的。

在这个非常简单的例子中，JavaScript添加一个元素到DOM树中。为了看清这样的不同，在开发者工具中使用Elements tab去查看

当你对比Elements标签的中的内容和查看源代码中的内容，你会很容易发现它们的不同点在Elements标签页中，你可以看到

 元素之间的内容，它被添加到了

。

// imagine that read url from GET parameter routine goes here... // but we just hardcode it for now :)

const url = https://hackerone.com function redirect() { // I will redirect you! Now!

if (url) { location.href = url } else { location.href = https://company.com/__internal__/supersecretadminpanel

} } setTimeout( redirect, 10000 ) 当你用浏览器打开这个网站，十秒后，你就会重定向到HackerOne 这个网站中，之后你就再也看不到原始的代码了，因此，你可以不能看到刚才发生的事情。

在浏览器中打开开发者工具，然后选择源代码标签，然后打开上面的HTML文件现在你有10秒钟的时间在源码的第16行设置断点(if (url) {)你只要在左边那个带数字的框框上点16那个数字就好了当十秒过去之后，浏览器就会调用redirect()，然后马上会停到你下断点的那一行：。

当我们向下走一步之后，蓝色的那一行就会被执行（蓝色那一行现在还没有执行！这是非常重要的）你看debugger面板的左侧--那里会展示你现在在哪个位置（调用栈）然后，你如果打开script那个节点，你会看到在执行过程中所有被定义的变量的值（在这个例子中只有url）。

现在你需要花费一些时间去阅读和理解这些代码如你所知，如果16行的那个条件语句为TRUE的时候，我们将会跳转到HackerOne那个网站让我们修改url这个值，我们去修改一些东西，那么JavaScript中什么样的值会让逻辑判断语句认为这是一个false呢（可能是空的字符串，0，布尔 false，或者其他代表false的表达式）。

让我们把他变成false吧（只要点击变量，然后输入你想要的值，就可以改变这个变量的值了）

现在让我们看看发生了什么样的改变。我们将继续走入到下一步，看看debugger面板最顶部上面的图标：

第一个图标将让你继续运行这个程序，第二个图标允许你单步运行（我们一会再说这个），第三个图标允许你跳转进到被调用的函数之中（只要那里没有设置断点，debugger不会进入到函数中去的，它会执行那一行的函数，然后移到下一行去执行），这里有一个叫“跳出”的图标，这个图标可以让函数继续执行，然后跳转到被调用的那一个点

现在点击第二个图标（你会看到url的值已经变成了false），然后你会注意到执行的下一行代码变成了19行（这是因为我们在16行判断语句中设置了false）

如果你按下debugger工具栏上第一个按钮之后（“Play”按钮），这次你会注意到应用会跳转到一个company.com中的一个链接里面去你会想到url这个参数可能会是一个漏洞，所以你现在尝试去利用这个问题去发现任意跳转漏洞或者反射型xss漏洞，或者更深一步，你会怀疑这个url会存储在服务器端的某个位置（如果你进一步探索程序内部的逻辑，就能发现你的想法是否是正确的）。

用Snippets执行JavaScript有时，你想执行应用中的一部分代码这可能比较困难，特别是遇到要做大量前置准备工作之后才能触发的代码，就会特别耗时在这种情况下，你可以使用Snippets去运行你的代码。

但是要记住，每一次测试都不会很顺利，比如当你运行一些需要其他依赖的代码时，通常像一些变量会来自其他部分的代码或者代码片段中包含来自其他文件中函数但是让我们假设，你要检测一个函数，以检查它所提供的值是否是正确的，并且你希望你只关注代码的逻辑部分。

在源码标签，你会发现一个叫Snippets的面板

当你点击它的时候，你会发现一些片段列表（如果你已经创建了所有的东西）然后可以点击创建new去创建一个新的片段点击这个选项，然后在控制面板中间的位置，你会看到一些简单的示例代码，这些代码是可被编辑的而且带有代码高亮。

你可以把所有的JavaScript代码放上去运行，当你点击位于控制面板左下底部的play按钮（或者你可以用CMD+Enter，在mac系统上你可以用CTRL+Enter）后，你会发现结果会马上打印到下面的控制台面板上去。

你可以无限制的修改和运行你的代码，但是我刚才提到，代码在这里运行时会遇到依赖问题Snippets中代码运行于你打开开发者工具的那个页面，你可以在snippet创建和运行你的代码并且，每一次代码的运行环境都是相同的，这就意味者你之前定义的所有变量依然没有被改变，并且会一直保留那些值。

为什么这很重要？想想下面的这个例子：

在JavaScript中，当你使用const关键字定义一个常量的时候，你会初始化它的值，并且不会去改变他如你所见，代码片段按照预期的行为去工作，但是你如果试图改变SOME_CONST的值，再次运行snippet，你会收到下面的这个语法错误：。

这个错误是因为SOME_CONST这个静态变量已经被初始化开发者工具就想，你要在同一个执行环境中继续执行,你编辑的代码已经变的不重要了所以你如果用debugger停止正在运行的程序（所有通过程序代码定义的变量，类和函数将会存在于执行环境之中）。

如果你试图使用现有的标志在同一个标签页中创建snippet--有时你要么会覆盖原来网页的代码，要么在 重新初始化某些变量时会让页面报错（比如常量）为了能够重新运行snippet，首先你要通过刷新浏览器来重新加载页面，清空执行环境（浏览器不会记住web应用的状态的，只要刷新之后，整个进程会重新加载资源，重建DOM树，等等）

为了避免上面的问题，不要使用Snippets（还有有一种比较好的办法，就是你新开一个浏览器标签页，然后打开开发者工具并在那里创建一个新的snippet），你可以使用NodeJS来运行你的JavaScript代码

你可以把你的代码放入一个新的JavaScript文件中，然后用在终端中用NodeJS（你要确定你已经安装好了）运行它：

我将运行三次这个代码，每一次我都会修改SOME_CONST的值如你所见，没有任何报错，而且每一次执行都会成功，输出的结果也都是正确的这是因为，你用NodeJS运行这个代码的时候，它都会创建一个新的执行环境，所以，它不会把一份代码在相同执行环境中运行两次。

Sources 和 execution sinks当你看JavaScript代码时，首先你要着重注意两个地方首先第一个是sources，这个术语描述了，用户输入的每一个点都应该被应用程序所处理GET请求中的url里面的参数，能被应用程序读取到的cookie或者应用程序使用到的本地存储。

第二个被称为execution sink，这个术语意味着，所有的JavaScript语法元素或者那些可以执行代码的HTML API一个很明显的例子就是JavaScript中的eval(code_to_evaluate)。

，这个函数可以通过参数来执行代码另一个例子是setTimeout(function_to_execute, timeout_in_miliseconds),可以通过这个函数的第一个参数去执行一个函数，前提是要等到第二个参数的时间到了之后才可以执行。

在应用程序中发现漏洞的过程就是寻找source和处理此source的execution sink之间的连接在上面这个例子中，我将展示如何使用debugger，url作为参数(source) 被直接放入location.href (execution sink) 中。

另一个例子是，一个函数会获取HTML输入框中用户输入的数据（JavaScript能通过DOM API读取到这些数据，例如document.getElementById(‘input_id’).value

,然后把这些值传递给一个变量，这也可能会是一个source）然后这个值会被放入到innerHTML()函数中，之后这个函数会更新浏览器中DOM（这就会成为一个execution sink）这里有一个非常棒的视频，它的作者是。

@LiveOverflow我建议你马上去看看这个视频以熟悉它概念（这个视频大概8分钟长）https://www.youtube.com/watch?v=ZaOtY4i5w_U（视频链接）在web应用程序中，由于其复杂的业务逻辑，会存在非常多的sources 和 execution sinks（想想那些输入框，url参数，cookie，浏览器存储，WebSockets等）。

但是重要的东西是那些可以被作为execution sinks的函数它们也有很多，像location属性：href or hash, window.open(), document.write()，或者DOM函数：innerHTML 或者 appendChild。

它们都可以执行任意代码，任意跳转，或者执行其他类型的注入为了识别上面这些代码特征，我写了一个工具nodestructor，这个工具可以检查JavaScript文件（参数是单个文件或者包含所有JavaScript文件的文件夹），这个工具可以根据特征寻找execution sinks（或者sources）。

不要指望nodestructor会识别每一行代码或者更容易的去利用--所有的东西都应该依赖于source 和 execution sink（过滤，编码，解析，将数据转换为object，字符串操作等）这个工具的主要目的是更容易和更快速的在大量代码中通过规则来寻找有漏洞的代码。

让我们用一个例子来快速的展示这个工具吧首先，我需要一个JavaScript文件我将检查来自GM.com 网站的AppMeasurement.js然后我把这个文件从浏览器中复制下来（首先要解压，并格式化好），然后粘贴到代码编辑器中，然后后保存在一个临时文件夹中。

在终端中，我在AppMeasurement.js文件上运行nodestructor（-H参数是让这个工具去搜索各种HTML5的APIs）

如你所见，这个工具识别了大量潜在的execution sinks它们中大多数都是误报，但是让我们集中精力去看看报告结果中的第二个，它看起来像是直接用location.hostname.toLowerCase() 这个函数的结果来初始化domain这个变量。

如果有可能在这个文件中去跟踪这些变量所有的引用，看看它是否被用在了execution sink中你也可以使用Visual Studio Code内置工具像Find all references去寻找所有的domain字符串。

我想进一步来挖掘更多的漏洞，所以不久前，我已经开始用我的工具去做这样的事情了--这个是一个简单的JavaScript静态分析工具，所以它没有很花哨的名字这个工具仍处于开发的早期阶段（它虽然现在还只是个poc，但其实已经很好用了），当我运行这个工具去查找domain这个变量时，它会很快的给出结果的预览（到目前为止，这是唯一可用的选项，正如我所提到的一样，这个工具仅仅只是一个雏形，所以例如文件名这样的东西，看上去就像硬编码在代码里面一样）。

如你所见，工具能识别变量在哪里被定义的，在什么时候或者什么地方被怎样使用的我希望工具能够执行更复杂的分析，像是在不同范围内寻找变量（例如，变量是否是一个函数的参数或者变量是否被当成execution sink中的参数）。

总结web浏览器十一个非常强大的工具有时，你仅仅会用这个工具去读源代码和了解应用程序是如果工作的，还可以用浏览器寻找漏洞，测试你发现的漏洞，或者仅仅是去了解它是如何工作的并且去了解一些新的东西我希望我的文章能让你了解到如何使用浏览器开发者工具这一强大功能。

你能通过下面的这个链接找到更多强大的工具https://developers.google.com/web/tools/chrome-devtools/如果你有任何问题或者对这篇文章有好的建议--不要犹豫，来推特上找我 

https://twitter.com/_bl4de感谢你对阅读，我希望你能找到更多有价值的漏洞Happy Hacking!

更多精彩请猛戳右边二维码Twitter：AsrcSecurity公众号ID阿里安全响应中心

亲爱的读者们，感谢您花时间阅读本文。如果您对本文有任何疑问或建议，请随时联系我。我非常乐意与您交流。