Обратный инжиниринг DOM, события Javascript и «что происходит»? - PullRequest
Новая
       20

Обратный инжиниринг DOM, события Javascript и «что происходит»?

7 голосов
/ 22 ноября 2010

Я пытаюсь понять, что происходит в javascript предварительного просмотра страницы Google.

Почему ссылки, которые я добавляю в DOM с помощью Javascript, не активируются? (немного больше контекста)

http://chesser.ca/2010/11/google-visual-image-search-hack-marklet/ для «последней демонстрации»

Если вы выполняете поиск в Google, результаты отображаются на странице в режиме реального времени. Затем, если вы наведите курсор мыши на одно из увеличительных стекол в наборе результатов, произойдет ряд вещей.

  1. событие mousover для пожаров увеличительного стекла
  2. это вызывает (пока еще) неизвестную функцию с неизвестными параметрами
  3. функция выполняет межсайтовый вызов на сервер запросов результатов поиска изображений Google
  4. эти результаты сохраняются в памяти классов Google google `google.vs.ha`

Я скопировал код из библиотеки Google и запустил его через не-минификатор, чтобы он был немного более читабельным. Я также установил точки прерывания в коде с помощью firebug, чтобы я мог проверять dom и пространство памяти до, во время и после загрузки страницы.

Моя конечная цель - иметь возможность реплицировать событие mousover в коде, вызывая ту же функцию, что и вызываемая, но - я застрял в попытке найти правильную функцию. (Я уверен, что это включает google.vs.Ga(a, b, c), но я просто еще не совсем там.

Я знаю, что это самая безумная навязчивая идея, но я не знаю. Возможно, если вы также читаете стек в воскресенье, вы понимаете:)

Какая функция называется «при наведении», которая отправляет команду для получения запросов изображения?

EDIT: Пока что есть несколько возражений по этому поводу, хотя я подумал, что я бы добавил немного больше информации для тех, кто хочет догнать Firebug, вы можете следить за тем, что происходит в javascript в любое время.

image

Is a picture of what google looks like "in memory" you can look at all of the functions and calls and the current state of variables.

You can also actually access and call those variables by putting links in your bookmarks bar. for example javascript:alert(google.base_href) after a search will tell you the URL you're at... and it gets way more exciting from there.

EDIT NUMER 2:

a huge thanks to Matt who managed to crack this in one go :) 

  проверить все VSC

1 Ответ

4 голосов
/ 22 ноября 2010

Мой подход: я запускал профилировщик и зависал над результатами столько раз, сколько это возможно (чтобы можно было выделить функцию в результатах профилировщика)

Функция предварительного просмотра выглядит как google.vs.P

Вызывается со следующими аргументами:

  • элемент DOM для результата (div.vsc)
  • Информация о результате (похожа на google.vs.ha store)

Второй аргумент вычисляется с помощью 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);

Объяснение * * 1023 Как указано ниже, вот немного больше информации Я запустил профилировщик, который поставляется вместе с Webkit Inspector в Chromium. После наведения результатов несколько раз результаты профилировщика выглядели так: profiler Как видите, функции действительно достигли вершины. Поэтому после этого я решил перегрузить google.vs.P и google.vs.ea, чтобы просто напечатать аргументы, которые им были отправлены: overloaded functions Как вы можете видеть на скриншоте ... глядя на аргументы, связь между двумя функциями становится немного более ясной. (Но, конечно, в этой кроличьей норе еще предстоит много копать ..) Надеюсь, это поможет.

...