Skryptozakładki / bookmarklets – jak z zakładki w przeglądarce zrobić narzędzie do OSINTu [OSINT hints]

Najprawdopodobniej wszyscy znają mechanizm działania zakładek w przeglądarkach – chcemy zachować odnośnik do jakiejś strony, więc zapisujemy go sobie jako zakładkę i w każdej chwili możemy do tej strony przejść za pomocą tego właśnie odnośnika. Czy można jednak zamiast linku rozpoczynającego się np. od http(s) lub ftp(s) wpisać tam coś innego? Otóż tak – można rozpocząć od „javascript:”, co sprawi, że powstanie właśnie skryptozakładka.

Temat znany jest nie od dziś, ale pomimo swojej historii nie należy do zakresu „wiedzy powszechnej” o działaniu przeglądarek. Skryptozakładki (osobiście wolę słowo „bookmarklet” – „skryptozakładka” brzmi trochę jak „hydrozagadka”) wywołują po prostu funkcję w javascripcie, mogą więc przykładowo modyfikować stronę wyświetloną lokalnie, wywoływać polecenia, które posłużą do analizy strony lub generować przekierowania w oparciu o określone dane.

Na początek należy jednak podkreślić, że wszelkie skrypty, uruchamiane lokalnie w naszej przeglądarce, powinny być przez nas gruntownie przeanalizowane, jeśli je skądś pobieramy lub nawet przepisujemy. Innymi słowy – powinniśmy być zawsze pewni czy skrypt robi tylko i wyłącznie to, co chcemy. Wykonywanie skryptów, co do których nie jesteśmy przekonani co do ich działania, może być równoznaczne z XSS-em, który będzie miał pełen dostęp do naszych danych ze strony i będzie mógł je wysyłać do wszelkiej maści przestępców.

Zacznijmy jednak od podstawowego, bazowego wyglądu skryptozakładki:

javascript:(function(){

// tutaj wpisujemy kod w javascripcie

})();

Pomiędzy klamrami muszą znaleźć się polecenia w javascripcie. Można je wstępnie wpisywać linia pod linią, jednak docelowo i tak cały kod będzie zapisany w jednej linii, co jednak nie stanowi dla przeglądarki problemu – polecenia będą rozdzielone średnikami, entery są więc tylko dla lepszej wizualizacji kodu, który piszemy.

Chcąc zmodyfikować wyświetlaną stronę (bo nasze modyfikacje będą miały wpływ jedynie na już pobraną stronę, nie modyfikujemy nic w serwisie hostującym), odwołujemy się do elementów DOM (Document Object Model). Tym sposobem możemy na przykład stworzyć sobie narzędzie do przełączania aktualnie oglądanej strony w tryb ciemny:

 javascript:(function(){
      document.body.style.background='black';
      document.body.style.color='white';
 })(); 

Kod skryptozakładki wpisany w polu „Adres URL” zakładki w Chrome

W powyższym skrypcie najpierw odwołujemy się do treści strony i zmieniamy jej styl (a konkretnie kolor) tła na czarny. Tak samo robimy z całym tekstem na stronie – zmieniamy mu kolor na biały. Ten trik oczywiście zadziała tylko na stronach, nie posiadających obrazków w tle, które mimo wszystko nałożą się na nasze czarne tło. Kolory możemy dobrać sobie dowolnie, nie tylko z zakresu kolorów nazwanych w HTML, ale także podając ich składowe w dowolnej akceptowanej przez HTML postaci, np. #0000FF będzie odpowiednikiem niebieskiego (#RRGGBB, gdzie RR – czerwony, GG – zielony, BB –niebieski, każde podawane w zakresie 00-FF, szesnastkowo). Może się oczywiście okazać, że na stronach, które chcemy „przełączać” stosowane są elementy, na które nasz skrypt nie będzie działał. Musimy wtedy zajrzeć do źródła strony i sprawdzić, w jakich elementach strony są one wyświetlane i te konkretne elementy zmieniać.

Portal gov.pl w wersji domyślnej i po zastosowaniu narzędzia zmiany kolorów

No dobrze, ale chcemy stworzyć nieco bardziej skomplikowane narzędzie niż tylko zmieniacz kolorów. Ciekawe przykłady wykorzystania skryptozakładek do OSINTu zaproponował na SANS Summit 2021 Chris Poulter z australijskiego OSINT Combine. Jedno z zaproponowanych przez niego zastosowań posłuży nam do wyciągania wszystkich obrazków na danej stronie. Kod będzie zatem wyglądał następująco:

 javascript:(function(){
      var items = document.getElementsByTagName("img");
 for ( i = 0; i < items.length ; i++) {
      console.log(items[i].src);
 }
 })(); 

W powyższym przykładzie zapisujemy najpierw do zmiennej element typu “img”, czyli obrazki. Następnie, iterując po wszystkich znalezionych elementach, wypisujemy do konsoli zawartości pola „src”, czyli najprościej mówiąc linki do tych obrazków. Żeby zobaczyć, co się pojawiło w konsoli, musimy zajrzeć do narzędzi deweloperskich – bezpośredni skrót do konsoli w Chrome: Command+Option+J (Mac) / Control+Shift+J (Windows/Linux), a w Firefoksie: Command+Option+K (Mac) / Control+Shift+K (Windows/Linux).

Widok konsoli po wykonaniu skryptu wyszukującego obrazki na aktualnie otwartej stronie

Jeśli strona posiada nie tylko obrazki statyczne, ale także wczytywane przez CSS-y, możemy do zmiennej items wczytać wartości w poniższy sposób i następnie iterując wyszukiwać w otrzymanych wynikach pola “name”, a nie “src”. Otrzymamy wtedy kod w postaci:

 javascript:(function(){
 var items = performance.getEntriesByType('resource').filter(resource=>resource.initiatorType == 'img');
 for ( i = 0; i < items.length ; i++) {
      console.log(items[i].name);
 }
 })(); 

Oczywiście możemy pisać takie narzędzia, jakie będą nam potrzebne, ograniczają nas jedynie możliwości javascriptu. Jeśli na przykład chcemy automatycznie wyszukiwać zaznaczony tekst w wielu serwisach, możemy posłużyć się następującym kodem dla skryptozakładki:

 javascript:(function(){
      var szu = window.getSelection().toString();
      var google = "https://www.google.pl/search?q=";
      var bing = "https://www.bing.com/search?q=";
      var duck = "https://duckduckgo.com/?q=";
      window.open(google.concat(szu),'_blank');
      window.open(bing.concat(szu),'_blank');
      window.open(duck.concat(szu),'_blank');
 })(); 

Ale to jeszcze nie wszystkie sposoby na tworzenie nowych narzędzi OSINT-owych. Jeśli chcecie pójść krok dalej, zerknijcie na URLlauncher od OSINT Combine. Jest to prosta strona w HTML + javascript, gdzie najpierw wpisujemy do formularza ID użytkownika Facebooka oraz słowa kluczowe, które chcemy na jego profilu wyszukać. Pozwala to znacznie skrócić proces przeczesywania profili w poszukiwaniu informacji, które spodziewamy się tam znaleźć.

Przykład kodu strony z narzędzia do wyszukiwania fraz na profilu facebookowym od OSINT Combine – zaznaczenia i opisy moje.

Ten skrypt po niewielkiej modyfikacji linku facebookowego można użyć do przeszukiwania np. wspólnych znajomych naszej badanej osoby (userID) i dowolnej liczby innych osób, których identyfikatory możemy wpisać w drugim polu (keywords). Wystarczy zamienić tylko kod otwierający nowe zakładki na:

window.open(„www.facebook.com/browse/mutual_friends/?uid=”+baseUser+”&node=”+lines[i], „_blank”);

W ten sposób możemy dowolnie dostosowywać skrypty do naszych aktualnych potrzeb – możemy wyszukiwać informacje na zadany temat na określonych serwisach informacyjnych, możemy znajdować kombinacje nazwy użytkownika i wybranych domen w wyszukiwarkach tworząc adresy mailowe lub też wyciągać ze stron pożądane informacje i wyświetlać je w postaci do późniejszej obróbki. Za pomocą skryptozakładek można także wyciągać z kodu strony linki do zdjęć profilowych, materiałów video czy innych interesujących nas informacji. Przykłady kodu służącego do ekstrakcji informacji z różnych serwisów możecie znaleźć także na Githubie Sinwindie, który także opisał m.in. sposoby na wyodrębnianie linków z kodu strony i prezentowanie ich następnie w przeglądarce.

–Krzysztof Wosiński (@SEINT_pl), prowadzi szkolenia: OSINT master #1 oraz OSINT master #2.