爬虫 JavaScript 篇[Web 漏洞扫描器]

答案非常简单， 在页面加载前，我们希望能够注入一段 JavaScript 代码以便于能够 Hook、备份各种未被污染的函数， 在页面加载后，我们希望能够注入一段 JavaScript 代码以便于能够进行遍历各个元素、触发各种事件、获取链接信息等操作。

那么下一个问题又来了：怎么定义页面加载前、页面加载后？

由于在第一阶段的时间点，DOM 树还未构建，所以我们所注入的代码均不能操作 DOM，能干的事情也就只有 Hook、备份 BOM 中的函数。

window.alert = function () { return false; };
window.prompt = function (msg, input) { return input; };
window.confirm = function () { return true; };
window.close = function () { return false; };

同时也需要在 CDP 中处理 Page.javascriptDialogOpening 事件，因为还有类似 onbeforeunload 这样的弹窗。

var oldLocation = window.location;
var fakeLocation = Object();
fakeLocation.replace = fakeLocation.assign = function (value) {
    console.log("new link: " + value);
};
fakeLocation.reload = function () {};
fakeLocation.toString = function () {
    return oldLocation.toString();
};
Object.defineProperties(fakeLocation, {
    'href': {
        'get': function () { return oldLocation.href; },
        'set': function (value) { console.log("new link: " + value); }
    },
    // hash, host, hostname ...
});
var replaceLocation = function (obj) {
    Object.defineProperty(obj, 'location', {
        'get': function () { return fakeLocation; },
        'set': function (value) { console.log("new link: " + value); }
    });
};

replaceLocation(window);
addEventListener('DOMContentLoaded', function () {
    replaceLocation(document);
})

这里还需要注意的是 doucment.location 需要等待 DOM 构建结束之后才能 hook, 所以需要注册 DOMContentLoaded 事件来 hook document.location 。

还有我们比较常用的 AJAX：

window.XMLHttpRequest.prototype.send = function (data) {
    // 记录发送的数据，注意 data 可能是 raw data 
};
window.XMLHttpRequest.prototype.open = function (method, url, async, user, password) {
    // 记录 method, url 等信息
};
window.XMLHttpRequest.prototype.setRequestHeader = function (header, value) {
    // 记录 header
};
window.XMLHttpRequest.prototype.abort = function () {};

因为可能用户代码会延迟或者定期做一些操作，我们可能等不来那么长的时间，所以我们要给这些定时器做一个加速， 也就是 Hook 之后修改相对应的 delay 为更小的值，同时加速之后也要 hook Date 类来同步时间。

window.open = function(url) { console.log('hook before defineProperty'); }
Object.defineProperty(window, 'open', {
    value: window.open,
    writable: false,
    configurable: false,
    enumerable: true
});
window.open = function(url) { console.log('hook after defineProperty'); }

window.open('http://www.fatezero.org')

hook before defineProperty

第一阶段我们能做的事情也做得差不多了，剩下的事情就交给第二阶段的代码干了。

我们一个一个的排除， 首先排除 CDP，因为如果使用 CDP 遍历各个节点，那就意味着后续的对节点的操作也要继续使用 CDP 才能进行，其速度远没有在一个 Context 内的代码操作 DOM 快。 接着排除 document.all ( HTMLAllCollection ，动态元素集合) 和 document.querySelectorAll ( NodeList , 静态元素集合)，因为这两个都只是元素集合，而不是节点集合， 并不包含 text, comment 节点。最后就剩下 TreeWalker 了。

TreeWalker 也有两种玩法，一种是先获取所有的节点，然后在触发各个节点上的事件，另外一种是边遍历节点，边触发事件。

可能会有同学觉得第二种方法比较优雅，我们看一下使用第二种方法的一种情况：

<div id="container">
<a id="a1">hello a1</a><br>
<a id="a2" onclick="removeA2()">hello a2</a><br>
<a id="a3">hello a3</a><br>
</div>

<script>
function removeA2() {
    var c = document.getElementById('container');
    c.removeChild(document.getElementById('a2'));
}

function treeWalkerFilter(element) {
    if (element.nodeType === Node.ELEMENT_NODE) {
        return NodeFilter.FILTER_ACCEPT;
    }
}

treeWalker = document.createTreeWalker(
    document,
    NodeFilter.SHOW_ELEMENT,
    treeWalkerFilter,
    false
);

while (treeWalker.nextNode()) {
    console.log("[*] processing node " + treeWalker.currentNode.tagName + ' ' + treeWalker.currentNode.id);
    if (treeWalker.currentNode.click) {
        treeWalker.currentNode.click();
    }
}
console.log(treeWalker.currentNode);
</script>

是的，如果 TreeWalker 刚好走到一个节点，触发了事件使得该节点离开了 DOM 树，那 TreeWalker 就走不下去了， 所以比较保险的方法就是在页面稳定后收集一份静态的节点列表，再触发事件，也就是使用 TreeWalker 的第一种玩法。

首先，我们来谈一下如何触发鼠标、键盘相关的事件，主要方法有两：

我们使用一个简单的例子看一下两者最大的差别：

<button id="test" onclick="testEventTrusted(event)">click</button>
<script>
function testEventTrusted(event) {
    if ("isTrusted" in event) {
        if (event.isTrusted) {
            console.log("trusted");
        } else {
            console.log("not trusted");
        }
    } else {
        console.log("not support");
    }
}
</script>

使用 CDP 测试两者区别：

import pychrome

browser = pychrome.Browser()

tab = browser.new_tab()

tab.start()
tab.Page.navigate(url="http://localhost/test.html")

tab.Runtime.enable()
tab.Runtime.evaluate(expression="console.log('js click: ')")
tab.Runtime.evaluate(expression="var e = new MouseEvent('click');test.dispatchEvent(e);", _timeout=5)

result = tab.Runtime.evaluate(expression='test', _timeout=5)

btn_object_id = result['result']['objectId']
result = tab.DOM.getBoxModel(objectId=btn_object_id)

border = result['model']['border']

odd = [value for i, value in enumerate(border) if i % 2 == 1]
even = [value for i, value in enumerate(border) if i % 2 == 0]

x = min(even)
y = min(odd)
width = max(even) - x
height = max(odd) - y

x += width / 2
y += height / 2

tab.Runtime.evaluate(expression="console.log('cdp click: ')")
tab.Input.dispatchMouseEvent(type="mousePressed", x=x, y=y, button='left', clickCount=1)
tab.Input.dispatchMouseEvent(type="mouseReleased", x=x, y=y, button='left', clickCount=1)

dispatchEvent 和 Input.dispatchMouseEvent 这两者最大的区别就是事件来源是否是真实的用户点击， 虽说 isTrusted 也就是一个改 Chromium 代码就能解决的问题，但我们也没法保证还有没有其他黑科技来检测是否事件是否来自真实用户。 然而我还是觉得 CDP 实在太慢，所以还是继续选择使用 dispatchEvent 来触发各种事件。

接下来我们要考虑一下如何使用 dispatchEvent 触发事件， 可能有些同学觉得，我们可以扫描所有元素节点，收集内联事件，对于动态添加的事件，可以 Hook addEventListener 获取到， 最后再挨个触发元素相对应的事件，其实这样做是有问题的。

我们还是先看看一个例子：

<div id="container" onclick="btnClick(event)">
    <button id="btn1">click1</button>
    <button id="btn2">click2</button>
</div>

<script>
    function btnClick(e) {
        console.log('click: ' + e.target.id);
    }
</script>

例子将事件绑定在 container 内，等事件冒泡到 container，再通过 event.target 区分元素。 如果按照之前的思路，我们的代码将会在 container 中触发一个点击事件，而忽略了 container 下的两个按钮，所以之前的思路并不合理。

我个人的想法是，每个元素都只触发常用的事件，比如说 click 、 dbclick 、 mouseover 等事件，忽略一些非主流事件。 只触发常见的键盘、鼠标事件让我们的行为更像是一个正常人类的行为，这样也减少了被反爬虫机制带入坑的可能性。 另外，说到爬虫行为做到和正常人类类似，还有一个小细节，那就是元素是否在可见区域， 以前都是直接将浏览器的 viewpoint 设置最大，现在我们使用 element.scrollIntoViewIfNeeded 将滚动条滚动到元素的位置，然后再触发事件。

在 HTML5 中就刚好有这么一个类 MutationObserver ，我们看看例子：

<button id="btn1" onclick="createE()">create element</button>
<button id="btn2" onclick="changeA()">change attr</button>

<div id="container">
<form id="form1" action="/">
</form>
</div>

<script>
    btn1.onclick = function() {
        var container = document.getElementById('container');
        var eA = document.createElement('a');
        eA.href = "http://www.fatezero.org";
        container.appendChild(eA);
    };

    btn2.onclick = function () {
        form1.action = "http://www.fatezero.org/form";
    };

    var observer = new MutationObserver(function(mutations ){
        mutations.forEach(function (mutation) {
            if (mutation.type === 'childList') {
                // 在创建新的 element 时调用
                console.log("child list: ");
                console.log(mutation);
            } else if (mutation.type === 'attributes') {
                // 在属性发生变化时调用
                console.log("attributes: ");
                console.log(mutation);
            }
        });
    });

    observer.observe(window.document, {
        subtree: true,
        childList: true,
        attributes: true,
        attributeFilter: ['src', 'href', 'action']
    });
</script>

按顺序点击 btn1 和 btn2 的结果：

所以我们完全可以利用 MutationObserver 作深度优先的扫描，如果弹出新的节点，那就优先处理新的节点。每次都是先静态扫描新的节点列表，然后再尝试触发新增节点列表的事件。

但是值得注意的是 MutationObserver 并不会实时将变更元素传回来，而是收集一个时间段的元素再传回来，所以未能及时切换到新的节点继续触发事件也是正常的事情。

这一小节没什么难度，主要是判定哪些地方该填名字，哪些地方该填邮箱，哪些地方该填号码， 需要根据不同情况输入对应的数据。另外还要注意的是在填写数据的时候还要触发对应的事件，例如填写 <input type="text"> 的时候， 我们需要把鼠标移动到 input 元素上，对应触发 mouseover 、 mouseenter 、 mousemove 消息， 接着要鼠标点击一下输入点，对应 mousedown 、 mouseup 、 click 消息， 然后鼠标移开转到其他元素去，对应 mousemove 、 mouseout 、 mouseleave 消息。

这里还有个小建议，所有的用户输入都带上一个可识别的词， 例如我们自定义词为 CasterJS，email 处就填写 casterjs @gmail.com ， addr 处就写 casterjs road ， 至于为什么下一篇再说。

代码如下:

import time
import pychrome

def request_intercepted(interceptionId, request, **kwargs):
    headers = request.get('headers', {})
    headers['Test-key'] = 'test-value'

    tab.Network.continueInterceptedRequest(
        interceptionId=interceptionId,
        headers=headers,
        method='POST',
        postData="hello post data: %s" % time.time()
    )

browser = pychrome.Browser()
tab = browser.new_tab()

tab.Network.requestIntercepted = request_intercepted

tab.start()
try:
    tab.Network.setRequestInterception(patterns=[{'urlPattern': '*', 'resourceType': 'Document'}])
except pychrome.exceptions.CallMethodException:
    tab.Network.setRequestInterceptionEnabled(enabled=True)

tab.Page.navigate(url="http://httpbin.org/post")

tab.wait(3)

result = tab.Runtime.evaluate(expression="document.documentElement.outerText")
html_content = result.get('result', {}).get('value', "")
print(html_content)

{
  "args": {}, 
  "data": "hello post data: 1521343371.056448", 
  "files": {}, 
  "form": {}, 
  "headers": {
    "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8", 
    "Accept-Encoding": "gzip, deflate", 
    "Connection": "close", 
    "Content-Length": "34", 
    "Host": "httpbin.org", 
    "Test-Key": "test-value", 
    "Upgrade-Insecure-Requests": "1", 
    "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/63.0.3239.150 Safari/537.36"
  }, 
  "json": null, 
  "origin": "1.1.1.1", 
  "url": "http://httpbin.org/post"
}

代码如下：

import pychrome
import pychrome.exceptions

image_raw_response = ('SFRUUC8xLjEgMjAwIE9LCkNvbnRlbnQtVHlwZTogaW1hZ2UvcG5nCgqJUE5HDQoaCgAAAA1JSERSAAAAAQ'
                      'AAAAEBAwAAACXbVsoAAAAGUExURczMzP///9ONFXYAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAKSURBVAiZY'
                      '2AAAAACAAH0cWSmAAAAAElFTkSuQmCC')


def requestIntercepted(**kwargs):
    global image_raw_response
    resource_type = kwargs.get('resourceType', 'other').lower()
    interception_id = kwargs.get('interceptionId')

    if resource_type == 'image':
        tab.Network.continueInterceptedRequest(
            interceptionId=interception_id,
            rawResponse=image_raw_response,
            _timeout=5,
        )
    else:
        tab.Network.continueInterceptedRequest(
            interceptionId=interception_id,
            _timeout=5,
        )


browser = pychrome.Browser()
tab = browser.new_tab()

tab.Network.requestIntercepted = requestIntercepted

tab.start()
tab.Page.enable()

try:
    tab.Network.setRequestInterception(patterns=[{'urlPattern': '*', 'resourceType': 'Image'}])
except pychrome.exceptions.CallMethodException:
    tab.Network.setRequestInterceptionEnabled(enabled=True)

tab.Page.navigate(url="https://weibo.com/fatez3r0")
tab.wait(60)

我们看一下 Headless 模式的 session isolate 功能的简单例子:

import pychrome

browser = pychrome.Browser()
version_info = browser.version()

target = pychrome.Tab(webSocketDebuggerUrl=version_info['webSocketDebuggerUrl'], id='1')

target.start()
tab0 = browser.new_tab(url="http://httpbin.org/cookies/set?browser=here_is_fate0")

# 1. 尝试注释下面这行
browser_context_id1 = target.Target.createBrowserContext()['browserContextId']
target_id1 = target.Target.createTarget(
    url="http://httpbin.org/cookies",
    # 2. 以及这行
    browserContextId=browser_context_id1
)['targetId']


tab1 = pychrome.Tab(
    id=target_id1,
    webSocketDebuggerUrl='ws://127.0.0.1:9222/devtools/page/{}'.format(target_id1)
)
tab1.start()
tab1.Runtime.enable()
print(tab1.Runtime.evaluate(expression='document.documentElement.outerText'))

运行结果：

{'result': {'type': 'string', 'value': '{\n  "cookies": {}\n}\n'}}

如果注释 1、2 两行，运行结果：

{'result': {'type': 'string', 'value': '{\n  "cookies": {\n    "browser": "here_is_fate0"\n  }\n}\n'}}

所以只要每个 tab 都新建一个 BrowserContext 就可以做到互不干扰了， 这也就相当于每个 tab 都是一个独立的隐身模式，能够做到每个 tab 互不影响， 也可以共用一个 BrowserContext 达到共享 cache、cookie 之类信息的功能。

我们以 http://testphp.vulnweb.com/AJAX/index.php 作为例子跑一遍，看一下我们代码的执行状况， 为了更方便的展示，我将每个节点（触发事件）的处理时间都额外增加了 0.1s，同时也给所有节点都加上了边框，蓝色边框表示正在处理的节点。

测试视频如下：

通过加边框和打 log 的方式，我们完全可以一步一步的看着爬虫的操作是否符合我们的预期。这个例子的结果证明了:

上面的行为是符合我们的预期的。

目前第一篇和第二篇的内容总算是组合在了一起，成为了一个能够独立运行、测试的组件，该组件所提供的功能就是输入一个 request 相关的信息，返回 response 中所有的链接信息， 如果我们的爬虫存在链接信息漏抓，那很可能就是这部分出问题，所以也只需要调试这部分代码即可，非常方便。