Frontend Thursday vol. 72 - wyciek danych z State of JS, Eleventy v1, Parcel CSS

1. Wyciek danych respondentów State of JS i State of CSS

Jeśli braliście udział w ankiecie State of JS lub State of CSS w 2020 roku lub wcześniej, to istnieje możliwość, że wasze dane wyciekły do sieci. Kompromitacji uległy właściwie tylko adresy email, ale niestety luka bezpieczeństwa miała taką postać, że bez problemu można powiązać je z odpowiedziami z ankiety. O ile opinia o frontendowych frameworkach raczej nie jest daną wrażliwą, o tyle informacje o zarobkach czy doświadczeniu z pewnością można za takowe uznać. Na razie nie ma jednak pewności, czy ktokolwiek zdążył wykorzystać zaistniałą lukę bezpieczeństwa.

W jaki sposób doszło do potencjalnego wycieku danych? Zarówno State of JS, jak i State of CSS to projekty Open Source. Aby umożliwić śledzenie wyników poszczególnych respondentów, na przestrzeni lat autorzy zdecydowali się hashować adresy email i wykorzystywać je jako identyfikatory. Jak się jednak okazało, przez pomyłkę zamiast funkcji haszującej użyto funkcji służącej do enkrypcji. Co za tym idzie oprócz kodowania możliwe było również dekodowanie maili – oczywiście, jeśli znało się odpowiedni klucz.

Około miesiąca temu klucz służący do enkrypcji został opublikowany przez jednego z kontrybutorów podczas pracy nad zupełnie innym projektem. Deweloper ten od razu zorientował się w sytuacji i szybko wyczyścił historię repozytorium. Jak się jednak okazuje, commit zawierający klucz enkrypcji przetrwał jako ghost commit i został usunięty dopiero w zeszłym tygodniu.

Na szczęście w całej tej sytuacji odnajdziemy chociaż szczyptę optymizmu. Projekt, w którym znalazły się wrażliwe dane miał bardzo mały ruch oraz zero gwiazdek i brak obserwujących na GitHubie. Ponadto, nawet jeśli komuś udało się przechwycić klucz enkrypcji, to powiązanie go z innym projektem było mocno nieoczywiste a skompromitowana baza danych zniknęła tymczasowo z sieci. Dlatego więc, jeśli ktoś wszedł w posiadanie klucza, ale do tej pory nie domyślił się jego przeznaczenia, to stracił już swoją okazję.

Na zakończenie mała zachęta dla odważnych. Jeśli pomimo wycieku nie boicie się wypełniać kolejnych edycji ankiety, to w minionym tygodniu wystartowało State of JS 2022. Ja już zacieram ręce, żeby zobaczyć wyniki i przygotować dla Was krótkie podsumowanie.

Źródła:

https://dev.to/sachagreif/disclosing-a-state-of-javascriptstate-of-css-data-breach-2lg1

2. Eleventy v1

Po prawie czterech latach wersji oznaczonych jako 0.x popularne narzędzie Eleventy wreszcie doczekało się wersji oznaczonej numerkiem 1.0. Jeśli jeszcze nie słyszeliście o Eleventy, to jest to narzędzie do generowania statycznych stron, które umożliwia korzystanie z szerokiej gamy formatów szablonów: od oczywistych takich jak HTMl czy Markdown poprzez bardziej zaawansowane takie jak Nunjucks, czy Mustache. Całość oparta jest o JavaScript, ale korzystając z narzędzia możemy nie napisać nawet linijki kodu w tym języku.

npm install -g @11ty/eleventy
echo '# Page header' > README.md
eleventy

Jeśli jesteście zainteresowani nowościami to najlepiej zrobicie, jeśli przyjrzycie się pełnej liście zamieszczonej na GitHubie. Ja przytoczę tutaj tylko trzy, które wydają mi się najbardziej istotne. Po pierwsze dodane zostało wsparcie dla dowolnych rozszerzeń plików oraz silników renderowania. Otwiera to drogę dla społeczności do rozszerzania narzędzia właściwie w dowolny sposób. Po drugie powstała wersja narzędzia integrująca się z serwisami Serverless przez co może ono być używane do prawdziwego renderowania po stronie serwera. Ostatnia zaś istotna zmiana to dodanie wsparcia dla uruchamiania Eleventy z poziomu skryptu Node.js.

Obserwując trendy w JavaScriptowym świecie nie sposób nie dostrzec coraz prężniej rozwijającego się renderowania po stronie serwera. Co prawda jeśli chodzi o zbiór funkcjonalności, to Eleventy raczej nie umywa się do takiego Next.js, ale zdecydowanie wpisuje się ono w ten trend. No i Eleventy, jeśli chodzi o ,prostotę bije na głowę chyba większość dostępnych alternatyw, a to w prostocie często leży klucz do sukcesu.

I tak, wiem, że Next.js i Eleventy to dwa różne narzędzia, które rozwiązują trochę inne grupy problemów

Źródła:

https://github.com/11ty/eleventy/releases/tag/v1.0.0
https://www.11ty.dev/

3. Parcel CSS

Twórcy Parcela w minionym tygodniu pochwalili się nowym narzędziem, które ma jeszcze bardziej przyspieszyć budowanie aplikacji. @parcel/css to parser, kompilator i minifikator CSS napisany w Rust. Jak to zwykle bywa z narzędziami napisanymi w tym języku, jeśli chodzi o wydajność, konkurencja zdecydowanie została sprowadzona do parteru. Parcel CSS jest ponad 100x szybszy niż CSSNano i 3x szybszy niż ESBuild oferując przy tym porównywalne rozmiary wynikowej paczki.

@parcel/css dostępny jest jako wtyczka do Parcela oraz niezależna biblioteka dla JavaScriptu oraz Rusta. Co ważne, twórcy zaprojektowali paczkę w taki sposób, aby można było ją użyć również z innymi narzędziami do budowania aplikacji. Oznacza to, że możemy wkrótce spodziewać się edycji dla WebPacka czy Gulpa od społeczności.

Źródła:

https://parceljs.org/blog/parcel-css/

Bonus: hiccupFX.js

Dziś na zakończenie mam dla Was mały bonus z przymrużeniem oka. Zdarzyło Wam się kiedyś próbować kliknąć w przycisk na stronie, podczas gdy ta z prędkością światła doładowała kolejne reklamy co sprawiało, że layout wyglądał jakby właśnie przechodził atak padaczki? Jeśli tak, to pewnie ucieszycie się na wieść, że dzięki jednej linijce kodu i bibliotece hiccupFX.js możecie obdarować swoich użytkowników w to niezapomniane doświadczenie.