b4rtaz.blog

Od czasu gdy Google wydało swój odpowiednik dla Facebooka na niektórych stronach firmy z Mountain View - w tym G+ oczywiście, możemy w rogu znaleźć przycisk Wyślij opinię który pozwala użytkownikom raportować błędy na stronie. Nie było by w tym nic dziwnego gdyby nie fakt, że ta niby zwykła funkcjonalność pozwala zaznaczyć na stronie jaki obszar nas interesuje a na domiar tego jakimś sposobem Google generuje zrzut ekranu naszej strony. Ciekawość mnie zżerała więc zabrałem się za analizę...

Na początku oczywiście wertowanie w Sieci, znalazłem kilka wątków w serwisie stackoverflow.com ale w dyskusji niestety nie odnalazłem sensownej odpowiedzi. Niektórzy użytkownicy sugerowali, że skrypt po stronie użytkownika przesyła do serwera współrzędne zaznaczonych obszarów + adres gdzie się znajdujemy, a resztę renderuje serwer. Niby wszystko jasne ale Firebugiem zmieniamy logotyp Google na napis "WTF" i nasz wygenerowany screen będzie z... nowym napisem.

Legenda głosi, że JavaScript dopuszcza wykonywanie zrzutów strony za pomocą metody drawWindow() w obiekcie canvas. Jest to prawda ale tylko wtedy gdy otrzymamy od przeglądarki (tu Firefox) uprawnienia do XPCOM (albo ewentualnie do UniversalBrowserRead). A jeżeli próbujemy to zrobić ze strony internetowej to niestety dane nam to nie będzie. Żebranie za pomocą enablePrivilege() również się na nic nie zda.

Niestety nadszedł czas na analizę skryptów Google - a każdy kto choć raz do nich zajrzał wie o co chodzi - analiza jednej linijki może zająć nawet parę minut. Tak na marginesie, w skryptach odpowiadających za feedback (product__pl.js, render_frame.js itd.) znaleźć można dużo ciekawych rzeczy, np. algorytm kompresujący grafikę z obiektu canvas do formatu JPG od... Adobe. :)

Po jakimś czasie w końcu odnalazłem rozwiązanie. Większość kodu odpowiedzialnego za generowanie zrzutu strony jest w pliku product__pl.js, a zasada działania metody Google jest bardzo prosta: skrypt na partyzanta generuje screena strony skacząc kolejno po obiektach w DOM dokumentu i generuje samodzielnie widok każdego obiektu (ustala pozycje, oblicza paddingi itd.). Na chłopski rozum mamy do czynienia z przeglądarką w przeglądarce. :)

Na ale o efekt chodzi, prawda?