10 sie 2023 10 min read

typeofweb x michalczukm #23 | server-driven UI wraca oknem

Siema!

Poniżej to ja podczas próby napisania newslettera we wtorek wieczorem. Jak widzicie - nie udało się, zostałem pokonany przez grawitację.

Zatem z 1 dniową obsuwą zapraszam was na kolejne wydanie newslettera gdzie piszę o tym jak server-driven UI wraca na tapet, kolejni bad-actors chcą dobrać się do naszych danych przez npm supply chain ataki a szaleni ludzie uruchamiają JS w Pythonie. Enjoy!

🧑‍💻 Michał Michalczuk | michalczukm.xyz

Kolejny npm supply chain atak prze Lazarus Group

Ostatnio pisałem o serii artykułów “State Of Npm 2023” popełnionych przez Sandworm z którego wynikało że ok 500 000 nowych pakietów to spam.

Spam to jedno. Część z nich to złośliwy kod, który chce się dobrać do waszych danych. Nihil novi, ale schemat ataku grupy Lazarus odkryty przez badaczy jest błyskotliwy (niech będzie - złowieszczo błyszczący). A opis znajdziecie na blogu Socket.

Targetem byli badacze bezpieczeństwa, oraz ludzie pracujący z krypto i blockchainem.

A jak to wyglądało.

1. Socjotechnika

Klasyczek. Atakujący podszywali się pod rekruterów, badaczy security, lub developerów szukających pomocy lub chcących pomóc przy projektach.

Kontaktowali się przez GitHub, LinkedIn, Slack czy Telegram a celem było zaproszenie do pracy nad projektem na GitHub’ie, który zawierał w zależnościach pakiety npm z malware.

2. Uruchomienie kodu

Gdy cel pobrał repo i zainstalował zależności podczas uruchomienia projektu złośliwe pakiety działały w tandemie.

Pierwsza z zależności pobierała token potrzebny do uruchomienia drugiej. Dobrym przykładem jest pakiet tslib-reac

Następnie ta sama paczka (lub inna w zależności od schematu) odczytywała zapisany wcześniej token i z jego pomocą pobierała skrypt i wykonywała go.

Makao i po makale.

Artykuł wymienia 24 pakiety npm które brały udział w atakach. Najbardziej urzekła mnie paczka snykaudit-helper, która podszywa się pod kod pracujący z narzędziem security jakim jest snyk 🥲

Przy okazji Socket dostał ostatnio $20M finansowania serii A od Andreessen Horowitz. Brawo oni!

Server-driven UI, znowu czuje się jak w 2010

Zawsze jak słyszę hasło server-driven UI mam przed oczami bardziej deklaratywną wersję Vaadin 😀 To chyba PTSD, chociaż sam miałem okazję pracować z takimi rozwiązaniami również w JS i działało to bardzo rozsądnie.

Ale ale, o co chodzi. Server-driven UI to dynamiczny sposób sterowania UI, który dostaje użytkownik dosłownie z poziomu back-end’u.

💻 Klient dostaje obiekt JSON z drzewem komponentów do zbudowania i wyświetlenia. Brzmi jak mieszanie odpowiedzialności i zbędne budowanie complexity w aplikacjach webowych, ale zanim z krzykiem zamkniecie ten newsletter pomyślcie o zastosowaniu tego w aplikacjach mobilnych. Wykorzystuje to między innymi Instagram, Lyft, Airbnb czy Allegro (mają własny rendering tool MBox, pozdrawiam!)

Aplikacje mobilne mają o wiele dłuższy release cycle niż klienci web, ponieważ użytkownik musi pobrać naszą aktualizację z AppStore/PlayStore/InnyStore.

I krytyczny bug który uniemożliwia zarabianie lub użytkowanie naszej aplikacji musi grzecznie poczekać na to aż user zaktualizuję aplikacje. W między czasie może zdążyć ją odinstalować z “co to za 💩” na ustach.

Wprowadzając takie rozwiązania jak server-driven UI skracamy ten loop do minimum, bo klient dostaje na bierząco kształt UI do wyświetlenia.

🛣️ Nie jest to lekka droga. Poza zmianą mental modelu wytwarzania aplikacji i rozwiązania tego technicznie mamy jeszcze guidelines sklepów z aplikacjami które musimy spełniać które nie przepadają za takimi dynamicznymi rozwiązaniami podczas audytów.

W artykule znajdziecie więcej szczegółów oraz live z inżynierem Instagram (wł. Meta), który opowiada jak oni to robią.

Odszyfrowując payload React Server Components

Poprzedni wpis o server-driven UI to idealny wstęp do tego newsa. Jeśli mieliście okazję korzystać już z RSC (React Server Components) i zaglądaliście w zakładkę network aby sprawdzić czy wasz komponent został poprawnie ze-streamowany do klienta to mogła was uderzyć hmm … niska czytelność “wire format”.

Jeśli otworzycie DevToolsy i network na podlinkowanym blogu → przenawigujcie na inną stronę a dostaniecie stream komponentu jak poniżej.

Alternatywnie tutaj możecie się pobawić innym przykładem - demo na Stackblitz.

Jak narazie brak toolingu który wspomógłby nam w debugowaniu i optymalizacji RSC nie pomaga. Ale Alvar Lagerlöf stworzył

RSC Parser

Generated by create next app

i pracuje nad rozszerzeniem do chroma, które oszczędzi nam copy-paste i zwiększy DX pracy z RSC ❤️

Trzymam kciuki! W artykule znajdziecie więcej szczegółów o tym jak autor odszyfrował “wire format”.

Przed Next13 Masters

Michał Miszczyszyn i Jakuba "Zaiste" Neander w ramach startu NEXT13 MASTERS odpalają kolejne live.

Nie jeden, nie dwa, a trzy (to brzmi cheesy, ale wiecie o co chodzi 😀 )

17 SIERPNIA | 20:00-21:30 - Zoptymalizuj wydajność, popraw SEO i zwiększ konwersję
22 SIERPNIA | 20:00-21:30 - Dlaczego Next.js wyprzedza swoją epokę? 5 najważniejszych różnic między Next.js 13 a innymi narzędziami
29 SIERPNIA | 20:00-21:30 - Czego nauczyliśmy się przez 10+ lat jako full stack developerzy?

Na wszystkie wydarzenia możecie zapisać się na stronie. Do zobaczenia!

Omijanie blokad anti-debugging

Jeśli mieliście kiedyś okazję debugować w przeglądarce kod 3rd party, do którego nie macie dostępu wiecie jak wspaniała to zabawa.

Być może próbowaliście robić reverse engineering [which is potential illegal 💩] i wpadliście na zabezpieczenia przeciwko debuggowaniu jak ciągłe zatrzymywanie się na debugger;

Dlaczego do ominięcia tego autor zbudował customową wersję Firefox’a 😮 - szczegóły w tekście.

PythonMonkey 🐍 ❤️ 🐵

🌴 Kącik egzotyczny na dzisiaj.

PythonMonkey to kolejne podejście (w artykule znajdziecie pokrewne projekty) na stworzenie interop’u pomiędzy Python’em a JavaScript.

Zatem możemy uruchomić kod JavaScript w Python’ie

async def someAsyncStuff():
    two_sec_promise = pythonmonkey.eval("""
        new Promise((resolve, reject) => {
            setTimeout(resolve, 2000);
        });
    """)

    print("before calling the 2 second timer")
    await two_sec_promise
    print("two seconds have now passed")

To rozwiązanie jest unikatowe z paru powodów:

Działamy w event-loop, mamy mikrotaski więc można używać Promises w kodzie JS ❤️
Wykorzystuje SpiderMonkey, silnik JS od Mozilla
Z pythona można odpalić kod kod w WebAssembly wykonywany z SpiderMonkey (i to jeszcze z Promises!)

Poza uruchamianiem JS w Pythonie, możemy też uruchomić kod Python w JS. PythonMonkey przychodzi z PMJS który to umożliwia.

const { getStringLength } = require('./my-python-module');

function printStringLength(s) {
  console.log(`String: "${s}" has a length of ${getStringLength(s)}`);
}

module.exports = { printStringLength, };

Jakie mamy zastosowania? You name it - oba środowiska mają swoje unikatowe zalety oraz ekosystem pakietów który może nam pomóc.

Autorzy wskazują jeszcze inny case - jeśli chcemy aby nasze rozwiązało działało zarówno w Pythonie jak i JS (SDK, biblioteka, etc) zamiast tworzyć adaptery lub implementować to samo rozwiązanie w wielu językach możemy wykorzystać PythonMonkey i napisać binding.

🌴 Koniec kącika egzotycznego na dzisiaj.

CFP na 4Developers Gdańsk do 14.08

Wydłużyliśmy o tydzień termin CFP na gdańską edycje 4Developers.

Ja (Michał Michalczuk) wraz z Bartkiem Cytrowskim opiekujemy się ścieżką JavaScript, nie krępujcie się i nawrzucajcie nam … tematów 😎 Więcej - o tym kogo szukamy na stronie.

Oraz wpadajcie na konferencje! Do zobaczenia 👋

dnt - Deno to Node transform

Aby opublikować pakiet na npm który będzie szeroko używany powinien być opublikowany jako ESM, CommonJS, z typami TypeScript, działać w Node.js, Deno i przeglądarce (jeśli zasadne).

Dodaje to 👷‍♂️ pracy i złożoności do procesu budowania.

Deno możemy wydało dnt który zrobi za nas tą robotę jeśli napiszemy kod w… Deno. To kolejna cegiełka do zwiększenia adopcji Deno przez możliwość połączenia go z ekosystemem Node.js i npm.

react-tweet = 16kb bez layout shift

Embeddowanie tweetów (chyba wciąż się tak nazywają 🤔) na stronie wiązało się z pobraniem ~550kb JavaScript’u w iframe który ładujemy na stronę. Dodatkowo dostawaliśmy layout shift, który nie poprawiał wrażenia. Sprawdźcie na https://publish.twitter.com.

Vercel wydał react-tweet, który rozwiązuje te problemy dostarczając własne komponenty UI do wyświetlenia treści oraz fetchuje zawartość tweeta bez logowania się do ich API.

Aby pobrać treść tweeta korzystają z CDN twittera - https://github.com/vercel/react-tweet/blob/main/packages/react-tweet/src/api/get-tweet.ts

Doceniam to obejście 🙂

Tailwind connect

W lipcu Tailwind zorganizował pierwsze spotkanie in-person, które miało być małym meetupem a wyszło z tego spotkanie na 200 osób i poziom realizacji którego nie powstydziła by się poważna konferencja. Tak wyszło.

Jak na “ot taki meetup” padło tam sporo konkretnych ogłoszeń.

Oxide to nowy silnik Tailwind CSS, który wykorzystuje Lightning CSS - all-in-one parser/bundler/minifikator w Rust’cie stworzony i wykorzystywany w Parcel’u. Oxide ma wyjść w Tailwind v3.4 i poza uproszczeniem konfiguracji ma przynieść skrócenie czasu budowania projektu o 50%
Catalyst to zestaw komponentów React, który chce się porozpychać na rynku bibliotek komponentów. Jego przewagą ma być pełna komponowalność

Spotkanie otwiera keynote Adama Watchman’a, który opowiada jak Tailwind z małego projektu urósł do rozwiązania które zjadło rynek i aktualnie ma 25M pobrań miesięcznie 😲

Generator palet kolorów do Tailwind

Pozostając w temacie Tailwind’a. Małe i przydatne narzędzie do wygenerowania palet kolorów.

To tyle na dzisiaj, do przeczytania za 2 tygodnie 👋

Stopka

Podobało się? Nie podobało się? Daj mi znać. Jeśli coś z wrzuconych tu materiałów Ci się przydało, to daj lajka, udostępniaj, albo po prostu powiedz znajomym. Chętnie przyjmuję też wszelkie sugestie. Dzięki!

👋

Stale poszukuję sponsorów. Chcesz, aby Twoje materiały lub ogłoszenie było tutaj promowane? Odezwij się na [email protected] lub typeofweb.com/wspolpraca. Dokładną ofertę znajdziesz na podstronie Reklama.