:sparkles: PWA :sparkles:
Twarz autora bloga

Piotr Kowalski

Organizator WarsawJS Trener YouTuber

Jak podsłuchać iPhona?


Tym artykułem chciałbym pomóc wszystkim tym, którzy podobnie jak ja, tworzą aplikacje cross-platformowe, i mają problem z debugowaniem na urządzeniach z rodziny Apple. Przedstawię jak podsłuchać komunikację przeglądarki uruchomionej na iPhonie, iPadzie albo iPodzie.

Baner reklamujący artykuł

Jako developer aplikacji multi-platformowych, często (moim zdaniem za często) poprawiam błędy pojawiające się tylko na jednej platformie. Nie jest to miłe.

JESTEM OGROMNYM ZWOLENNIKIEM SPÓJNOŚCI

...dlatego moim marzeniem byłaby sytuacja taka, że jedno rozwiązanie powinno działać, albo nie działać wszędzie zarazem.

Wolę mieć jasną sytuację, że jeśli na jednej platformie nie działa, to na pozostałych również. Wtedy wiem, że gdy na jednej zrobię poprawkę, to na wszystkich innych będzie także działało.
Niestety, to rzadkość w tym fachu.

Problem kompatybilności z Apple

Jakiś czas temu w pewnym moim projekcie istniał problem przeglądarki uruchomionej na iPhonie komunikującej się z serwerem HTTP. Korzystając z przeglądarki Google Chrome, nie można niestety wejść w tryb developerski (remote debugging), czyli mieć połączenie komputer - urządzenie i weryfikować stan aplikacji uruchomionej na urządzeniu.

Taki remote debugging działa tylko na urządzeniach z Androidem, które podłączymy do komputera z Windowsem / OSXem / Linuksem.

Wtedy po podłączeniu telefonu z Androidem wchodzimy na komputerze (korzystamy z Google Chrome) na chrome://inspect i wybieramy urządzenie, które chcemy połączyć z naszym komputerem.

Chcę po prostu podłączyć się do iPhona, ale jak? Może... to narysuję.

Ryc. 1. Połączenie MacBook z iPhonem albo iPadem.

Kabel podłączam. iTunes wykrywa urządzenie. Na razie wszystko gra. Co dalej?

Tryb remote debugging działa w Safari (specjalnie nie nazywam tego programu przeglądarką ze względu na implementację specyfikacji W3C oraz kiepskie narzędzia developerskie - Google Chrome to jedyna słuszna przeglądarka). No dobra, przedstawię kroki jak skorzystać z remote debugging.

Safari - Remote debugging

Poniżej lista kroków, aby korzystać z DevToolsów (czytaj "narzędzi developerskich") dla Safari.

  1. Pierwszy krok to konfiguracja sprzętowa: podłączasz kabelkiem iPhona z MacBookiem (to chyba jasne).
  2. iPhone: Drugim krokiem jest włączenie Inspektora w przeglądarce Safari. Wykonać to należy wchodząc w urządzeniu w: Ustawienia → Safari → Zaawansowane → Inspektor WWW. Przełączamy Inspektora w stan włączenia.
  3. iPhone: uruchamiasz Safari i wchodzisz na stronę example.org
    Ryc. 2. Otworzona strona example.org na iPhone.
  4. MacBook: uruchamiasz Safari i wybierasz z menu górnego Programowanie, a potem iPhone (albo iPad, albo iPod)
    Ryc. 3. Otwieramy zakładkę Programowanie → iPhone i widzimy wszystkie otwarte strony.
    Jeżeli będziesz w takiej sytuacji:
    Ryc. 4. Otwieramy zakładkę Programowanie → iPhone i nie widzimy otwartych stron.
    ...to w sekcji FAQ (na dole strony) znajdziesz rozwiązanie.
  5. MacBook: wybierasz stronę example.org klikając w element menu.
    Ryc. 5. Klikamy w konkretną stronę otwartą na Safari na iPhone.
  6. MacBook: naszym oczom ukazują się narzędzia developerskie znane z typowego debugowania pod Safari na OSX.
    Ryc. 6. Otwarte DevToolsy (narzędzia developerskie), które są podłączone do Safari uruchomionego na iPhone.
  7. Od teraz jesteśmy podłączeni konsolą do strony otworzonej na iPhonie. Możemy w pełni debugować naszą aplikację.

Co jeśli jednak chcielibyśmy podłączyć się Wiresharkiem? Tutaj pojawia się problem, ponieważ nie wykrywa on podłączonego urządzenia!

Wireshark podsłuchuje iPhona

Wireshark to najlepszy sniffer (analizator pakietów) na rynku. Każdy kto uważa się za programistę sieciowego, a Ty jako programista aplikacji internetowych należysz do takich, to na pewno wiesz jak sobie poradzić z Wiresharkiem.

Jeśli nie korzystałeś nigdy z tego programu, to polecam książkę pt. "Praktyczna analiza pakietów" autorstwa Chrisa Sandersa. Książka jest dostępna po polsku w księgarni internetowej Helion: helion.pl/ksiazki/praktyczna-analiza-pakietow-....htm Wkrótce na blogu pojawi się recenzja tej książki. Jeśli kogoś temat interesuje, to zachęcam do śledzenia mojego bloga.

Ryc. 7. Wireshark z listą interfejsów.

Na powyższym zrzucie ekranu nie widać połączenia (odpowiedni interfejs) z iPhonem. Rozwiązanie zagadki jest proste. Do komunikacji z tym urządzeniem brakuje odpowiedniego interfejsu! Dodajmy go!

Dodajemy interfejs do komunikacji z iPhone

  1. Za pomocą narzędzia rvictl, czyli Remote Virtual Interface Tool możemy zarządzać interfejsami. Zobaczmy jak wygląda pełny opis narzędzia:
    Ryc. 8. Program rvictl.
  2. Skorzystamy z opcji -s, aby uruchomić kanał komunikacyjny między MacBookiem a iPhonem. Potrzebujemy do tego UUID urządzenia (dowolnego z rodziny Apple: iPhone, iPad, iPod).

    Jeśli nie wiesz co to jest UUID, to odpowiedź znajdziesz w FAQ.

    Żeby to zrobić uruchamiamy program iTunes:

    Ryc. 9. Program iTunes.
  3. Następnie wybieramy nasze urządzenie:

    Ryc. 10. Wybieramy iPhona w programie iTunes.
  4. Klikamy w "Numer seryjny" aby pokazał nam się UUID urządzenia:

    Ryc. 11. Wyświetlony UUID urządzenia iPhone.
  5. Klikamy prawym przyciskiem myszy, pokazuje nam się menu kontekstowe z jedną opcją "kopiuj".

  6. Przechodzimy do terminala i wpisujemy polecenie:

    rvictl -s [UUID]

    ...zastępując [UUID] skopiowanym ciągiem znaków.

  7. Resetujemy Wiresharka, a w nowej sesji programu widzimy listę interfejsów z nowym rv0:
    Ryc. 12. Wireshark z dłuższą listą interfejsów (pojawił się interfejs rv0)."
  8. Wybieramy interfejs rv0 (klikając 2x w daną pozycję) i od teraz możemy nasłuchiwać wszelką komunikację telefonu ze światem zewnętrznym!

    Przykład poniżej:
    Ryc. 13. Request HTTP do strony example.org widziany w programie Wireshark.

Dzięki takiemu nasłuchiwaniu pakietów jesteśmy w 100% pewni jakie zapytania generuje urządzenie, oraz tym samym jakie dostaje odpowiedzi z serwera.

FAQ

Nie widzę w Safari na MacBooku żadnej strony na moim iPhonie?
Zerknij na iPhone, czy przypadkiem nie zgasł Ci ekran. Aby korzystać z Remote debugging, musisz ciągle mieć otwartą aplikację Safari na pierwszym planie (musi być widoczne).
Co to jest UUID urządzenia?
Pełne rozwinięcie akronimu to Universally unique identifier. Jednoznacznie identyfikuje urządzenie, które podłączyliśmy do komputera. Ciąg znaków jest 128-bitowy, więc ma 2128 kombinacji. Więcej szczegółów dostępnych na Wikipedii (hasło: Universally_unique_identifier).

Podsumowanie

Jak widać wystarczy kilka minut, aby podsłuchiwać dowolne narzędzie z rodziny Apple, czy to będzie iPhone, iPad czy iPod. Trzeba posiadać "kompatybilny" komputer z rodziny Apple. Po podłączeniu kabelkami możemy podglądać co tam "lata w tle".

Na oficjalnej stronie firmy Apple, w sekcji dla developerów, znajduje się wyjaśnienie po angielsku, może dla kogoś będzie to przystępniejsza forma pozyskania wiedzy.
Zapraszam do oficjalnego manuala na developer.apple.com.