逆向工程DOM，Javascript事件＆amp; “这是怎么回事”？

Question

我正在试图弄清楚Google的实时页面预览的javascript中发生了什么。

Why aren't the links I'm adding to the DOM with Javascript clickable?（更多背景信息）

http://chesser.ca/2010/11/google-visual-image-search-hack-marklet/获取“最新演示”

如果您在Google上搜索，则会通过实时搜索在页面上显示结果。然后，如果将鼠标放在结果集中的一个放大镜上，会发生很多事情。

1. 放大镜的mousover事件引发
2. 这称为具有未知参数的未知函数
3. 该功能对谷歌的图像结果查询服务器进行跨站点调用
4. 这些结果存储在Google的VS类内存`google.vs.ha`
中

我已经从google库中复制了代码并通过un-minifier运行它，因此它的可读性稍高一些。我还通过firebug在代码中安装了断点，这样我就可以检查dom＆amp;加载页面之前和之后的内存空间。

我的最终目标是能够通过调用被调用的相同函数来复制代码中的mousover事件 - 但是 - 我一直试图找到正确的函数。 （我确定它涉及google.vs.Ga(a, b, c)，但我还没到那里。

我知道这几乎是最疯狂的痴迷 - 但是 - 我不知道。也许如果你也在星期天阅读堆栈你明白：）

什么函数被称为“On Hover”，它发送命令以获取图像请求？

编辑： 到目前为止，有一些关于此事的投票，我认为我会为想要赶上萤火虫的人添加更多背景，你可以随时跟踪javascript中发生的事情。



谷歌看起来像“在内存中”的图片，你可以查看所有函数和调用以及变量的当前状态。

您还可以通过在书签栏中添加链接来实际访问和调用这些变量。例如，javascript:alert(google.base_href)搜索后会告诉您您所在的网址...并且从那里开始变得更加精彩。

编辑数字2：

非常感谢Matt一次成功解决这个问题:)

 <a href="javascript:
     (function(){
         var all_divs = document.getElementsByTagName('div');
         for (i=0;i < all_divs.length; i++) {
             if (all_divs[i].className == 'vsc') {
                 google.vs.ea(all_divs[i]);
             }
         }
     })();">test all vsc</a>

Answer 1

我的方法：我运行了一个分析器并尽可能多地在结果上盘旋（希望这个功能在分析器结果中脱颖而出）

预览功能似乎是google.vs.P

使用以下参数调用它：

• 结果的DOM元素（div.vsc）
• 结果信息（类似于google.vs.ha商店）

第二个参数由google.vs.ea计算，它将DOM元素作为参数。

我认为，因为它将元素作为唯一参数，这可能是悬停时调用的函数。

所以悬停监听器可能看起来像这样：

document.addEventListener('mouseover', function (event) {
    if (/\bvsc\b/.test(event.target.className)) {
        console.log('preview!');
        google.vs.ea(event.target);
    }
}, false);

说明

如下所述，这里有更多信息

我在Chromium中运行了随Webkit Inspector一起提供的分析器。将结果悬停几次后，分析器结果如下所示：

正如您所看到的，这些功能确实达到了顶峰附近。

所以在那之后，我决定重载google.vs.P和google.vs.ea来打印发送给它们的参数：

正如您在屏幕截图中看到的......查看参数，两个函数之间的关系变得更加清晰。 （但是，当然，还有很多需要在兔子洞里进行挖掘......）

希望这有帮助。