Szeroka Perspektywa Full-Stack Web Developmentu: Błędy CORS

0:00W tej lekcji przyjrzymy się bliżej błędom typu kod.

0:03Prawdopodobnie zdarzyło Ci się już z nimi

0:05spotykać lub z całą pewnością będzie spotykać się z nimi w przyszłości.

0:09Początkowo, jeżeli nie masz wystarczającej wiedzy na temat tego, dlaczego występują i

0:14na czym polegają, mogą sprawić Ci dużo problemów.

0:17Dlatego teraz przyjrzymy się tym przynajmniej najczęściej występującym

0:21przypadkom i tym, jak możesz sobie z nimi radzić.

0:24Zacznijmy od tego, że kod to nic innego

0:27jak pewnego rodzaju polityka uwzględniająca zestaw zasad dotyczący

0:31wymiany informacji pomiędzy różnymi domenami.

0:34Czyli przykładowo jeżeli mamy dwie aplikacje działające w dwóch różnych

0:38domenach, to domyślnie nie mogą one komunikować się ze sobą, o ile po stronie

0:43serwera nie skonfigurujemy odpowiednich ustawień i też ewentualnie po stronie

0:47klienta nie będziemy respektować ustawień serwera.

0:51Zatem chodzi tutaj o nic innego jak o bezpieczeństwo przesyłania informacji

0:55pomiędzy różnymi serwerami albo naszą aplikacją.

0:59Nietrudno tutaj się domyślić, że w

1:00momencie, gdy mamy różne aplikacje i różne źródła, no to wiadomo, że fajnie byłoby

1:05ograniczyć możliwość komunikacji ich ze sobą.

1:08Ale jeżeli mamy dwie aplikacje, które należą do nas, np.

1:11część działającą po stronie klienta, a drugą po stronie serwera, to jak

1:15najbardziej chcielibyśmy umożliwić tą komunikację.

1:18Rzecz w tym, że wiele tutoriali wskazuje

1:20rozwiązanie problemu jako odblokowanie połączeń całkowicie.

1:24Jest to jak najbardziej zła praktyka i nie należy się jej stosować ze względu na to,

1:29że w ten sposób narażamy naszą aplikację na ataki z zewnątrz.

1:33Tutaj na Eden mamy pełną listę błędów związanych z KOD.

1:37Teoretycznie moglibyśmy teraz przejść

1:38przez całą tę listę, natomiast teraz skupimy się wyłącznie na praktyce i tym,

1:43co faktycznie może spotkać w codziennej pracy.

1:46Z całą pewnością to, co będzie wymagało naszej uwagi to obsługa funkcji fetch,

1:50którą prawdopodobnie już teraz na każdym kroku wykorzystujesz.

1:54Oczywiście jeżeli korzystasz chociażby z

1:56Excela bądź innej biblioteki do wykonywania zapytań HTTP, to oczywiście

2:01większość z tych ustawień również tam znajdziesz.

2:03Jak oczywiście wiesz, w momencie gdy wysyłamy zapytanie musimy ustawić np.

2:07metodę zapytania oraz nagłówki.

2:09Rzecz w tym, że ustawienia kodów mogą limituje przede wszystkim to, jakie metody

2:14możemy uwzględniać w komunikacji z naszym serwerem.

2:17I to samo tyczy się nagłówków.

2:19Z tego powodu w momencie, gdy komunikujesz się z inną domeną niż ta, na której działa

2:24aktualnie Twoja aplikacja, musisz przede wszystkim aktywować kod.

2:28W przeciwnym razie od razu Twoje połączenie zostanie odrzucone.

2:32Następnie, w momencie, gdy do komunikacji dochodzi właśnie pomiędzy różnymi

2:36domenami, a Ty chcesz przesłać nagłówki autoryzacji bądź ciasteczka i chcesz np.

2:41w przypadku http only i kuki ustawia się

2:43automatycznie, tą właściwość kredensu musisz ustawić na include.

2:47Ewentualnie gdy komunikujesz się w ramach

2:49jednej domeny ustawiasz ją na sam origin, przy czym jest to domyślna wartość.

2:54No i teraz tak właściwie to co właśnie

2:56powiedziałem to są najważniejsze informacje w kontekście metody POST.

3:00Przejdźmy więc teraz do praktycznego przykładu.

3:03Przygotowałem tutaj dwie aplikacje.

3:05Pierwsza z nich działa po stronie klienta i próbuje wysłać dwa zapytania jedno typu

3:09POST, drugie typu GET, a następnie odczytać odpowiedź.

3:13Następnie mamy tutaj aplikację działającą po stronie serwera.

3:17Pierwszy endpoint ustawia ciastko

3:18zawierające access token i to ciastko jest typu HTTP only.

3:23Oznacza to, że w momencie gdy wykonamy

3:25zapytanie na ten endpoint, do naszego klienta powinno trafić ciasteczko.

3:29Następnie mamy tutaj drugi endpoint, który

3:32próbuje odczytać ciastka przesłane razem z zapytaniem.

3:35Inaczej mówiąc w tym pierwszym endpoint

3:37ustawiamy ciasteczko, a w drugim próbujemy je odczytać.

3:40Jeżeli teraz uruchomimy naszą aplikację, a

3:43następnie przejdziemy do konsoli, to okaże się, że oczywiście mamy tutaj błąd

3:48połączenia wynikający właśnie z polityki KOD.

3:51Próbujemy tutaj nawiązać połączenie pomiędzy domeną localhost działającą na

3:55porcie 3000 z domeną 127.0.0.1 działającą na porcie 5000 173.

4:02Coś takiego oczywiście nie działa.

4:04I w tym momencie mamy tutaj informację o

4:06tym, że moglibyśmy tutaj ustawić tryb na kod.

4:09Natomiast w naszym przypadku zupełnie nas to nie urządza ze względu na to, że wtedy

4:14nie będziemy w stanie odczytać faktycznej zawartości odpowiedzi.

4:18W związku z tym to co musimy zrobić, to

4:20dostać się do naszego serwera i odpowiednio skonfigurować kilka rzeczy.

4:24W moim przypadku od razu ustawię sobie tutaj Helmet ze względu na to, że jest to

4:28dobra praktyka i w Twoim przypadku również warto o to zadbać.

4:32Następnie musimy tutaj przekazać obiekt konfiguracyjny do metody tworzącej naszą

4:36aplikację, a konkretnie będzie nas interesowała właściwość Codes, gdzie

4:40normalnie w tutorialach jako origin wskazywana jest tutaj gwiazdka.

4:44Rzecz w tym, że w naszym przypadku ta gwiazdka nie będzie nas interesować, tylko

4:49będziemy chcieli wskazać konkretną domenę, której chcemy umożliwić połączenia.

4:53Poza tym chcemy przekazywać również kredyty szare, czyli chcemy, aby zarówno

4:57nagłówki jak i ciasteczka wędrowały pomiędzy.

5:00Zapytaniami i w tym przypadku uwzględniamy

5:02również wszystkie metody HTTP, z których chcemy przyjmować zapytania.

5:07Poza tym, jak widzisz, mamy tutaj jeszcze

5:08możliwość kontrolowania nagłówków, które może przesyłać do nas klient oraz

5:13nagłówków, które wystawiamy po stronie naszego serwera.

5:16W tym przypadku nas to nie będzie interesowało, natomiast warto zadbać o to,

5:20aby kontrolować to, jakie nagłówki mogą być do nas przesyłane.

5:24W każdym razie, jeżeli teraz wrócimy do

5:26naszego klienta i ponownie wyślemy zapytanie, wszystko tutaj działa.

5:30Oznacza to mniej więcej tyle, że na etapie pierwszego zapytania.

5:34Jeżeli teraz przejdziemy do niego,

5:36powinniśmy mieć ustawione ciastko http only.

5:40Rzeczywiście mamy tutaj taki nagłówek.

5:42Ciasteczko zostało ustawione po stronie

5:44naszej przeglądarki, a więc w momencie, gdy wykonujemy drugie zapytanie.

5:48Teoretycznie to ciastko również powinno trafić do serwera.

5:52Jeżeli jednak podajemy zawartość konsoli

5:54loga, które mamy dokładnie tutaj, to okazuje się, że mamy tutaj NULL.

5:58Wynika to z faktu, że po stronie metody

6:01fetch musimy tutaj uwzględnić właściwość kredensu ustawioną na include.

6:06Analogicznie w przypadku drugim.

6:08I tak naprawdę w tym momencie, gdy wyślemy ponownie zapytanie do naszego serwera,

6:12okazuje się, że nasze szare zostały przekazane i ciasteczko jest dostępne.

6:17Oznacza to mniej więcej tyle, że jeżeli będziesz mieć aplikację, w przypadku

6:22wyślesz zapytanie o Access token, no to ustawiając właściwość

6:26Include będziesz w stanie automatycznie dodawać ewentualne do kolejnych zapytań.

6:31Tym samym Twoim jedynym zmartwieniem

6:33będzie ewentualnie to, że taki access token może przestać być aktualny i będzie

6:37potrzeba wykorzystania albo refresh tokena, albo przekierowania użytkownika do

6:42strony logowania, aby ponownie autoryzował swoje połączenie.

6:46Dodatkowo pamiętaj też o tym, że w momencie gdy serwer ogranicza to jakie

6:50nagłówki możesz przesłać, to oczywiście w momencie, gdy będziesz jednak próbować je

6:55przesłać, okaże się, że ponownie zderzamy się tutaj z błędem

6:59informujący nas o tym, że sorry, ale ten nagłówek nie jest tutaj mile widziany.

7:04W związku z tym w takiej sytuacji albo

7:06rezygnujemy z wysyłania nagłówka lub też ewentualnie dodajemy go do naszej listy.

7:11Jeżeli tak zrobię, dodam go do swojej

7:13listy, a następnie uwzględnię w naszym zapytaniu.

7:15Jak widzisz, wszystko jest tutaj w porządku.

7:18Zatem jeżeli chodzi o błędy typu kod,

7:20najważniejsze jest to, aby było dla Ciebie jasne, że występują one zawsze wtedy, gdy

7:25dochodzi do połączenia pomiędzy różnymi domenami.

7:28Co więcej, te domeny mogą również należeć

7:30do Ciebie, ale tak naprawdę nie ma to większego znaczenia.

7:33Dobra wiadomość jest taka, że po prostu masz kontrolę nad jedną i drugą aplikacją

7:38i możesz poustawiać sobie tak, jak będzie to Ci potrzebne.

7:42Jednocześnie nie stosuj proszę porad,

7:44które można spotkać w tutorialach dotyczące tego, aby stosować tutaj np.

7:48Fiskars. Sytuacja teoretycznie jest taka, że

7:51rozwiązuje Ci to problem błędów typu kors, natomiast jednocześnie np.

7:55podczas audytu w security coś takiego zostanie wskazane jako krytyczny błąd.

8:00Co ciekawe jednak, w naszej konkretnej

8:02sytuacji, w momencie gdy chcemy przesyłać sobie szale, to jak widzisz mamy tutaj

8:07problem polegający na tym, że access control allow origin nie może być

8:11ustawiony jako otwarty w momencie, gdy chcemy to robić.

8:14Dlatego jeżeli chcemy korzystać z takiego

8:16ustawienia, nie możemy korzystać z właściwości Health.

8:20W momencie gdy ja usunąłem błąd, kod zniknął i tym samym też jest to ostatni

8:25przykład najczęściej spotykanego błędu dotyczącego właśnie kod.

8:29Ostatnią rzeczą, na którą chciałbym

8:31zwrócić Twoją uwagę jest to, że w niektórych sytuacjach faktycznie Wizard

8:35może okazać się wręcz konieczny do ustawienia.

8:38Mowa tutaj o sytuacjach, w której wprost chcesz, aby z Twoim np.

8:42API komunikowały się dowolne domeny.

8:45Poza tym jeżeli zajrzymy do typów, to okazuje się, że możemy tutaj

8:49przekazać zarówno ciąg znaków opisujący pojedynczą domenę, bądź też ewentualnie

8:53tablicę ciągów znaków, uwzględniającą wtedy wiele różnych domen.

8:58I to samo tyczy się wyrażeń regularnych,

9:00więc możesz napisać sobie tutaj wydarzenie, które będzie dopasowywać

9:03źródło do tego, co zostało określone w ustawieniach.

9:07No i tak w zasadzie jeżeli chodzi o to by było na tyle, nie mam już tutaj nic więcej

9:12do dodania, ale proponuję obejrzeć ten film raz jeszcze.

9:15Ze względu na to, że wszystkie wymienione

9:17przeze mnie tutaj przypadki z pewnością wiedzą Cię jeszcze niejednokrotnie.

9:22Tymczasem dzięki za uwagę i do usłyszenia w kolejnej lekcji.