JavaScript: Same-origin policy i CORS w akcji
w Praktyce
9 godz. 47 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Omówienie koncepcji OOP
- Dziedziczenie prototypowe i Domkniecia
- Format danych JSON oraz praca z AJAX
- Cookies
- Wyrazenia regularne
- “strict mode” w JavaScript
- Praktyczne projekty
- Niezliczona ilosc sztuczek i dobrych praktyk
- I wiele, wiele wiecej!
Witaj w kursie JavaScript w Praktyce!
W pierwszym rozdziale tego kursu poznasz bardzo dokładnie koncepcje programowania zorientowanego obiektowo. W jednej z lekcji, omówimy wszystkie z nich na przykładzie pseudo-kodu, niezwiązanego bezpośrednio z językiem JavaScript. Dzięki temu zrozumiesz, jak realizowane jest programowanie obiektowe w wielu popularnych językach programowania. Dowiesz się czym jest klasa, obiekt, instancja, właściwości, metody, a także zrozumiesz takie pojęcia jak dziedziczenie, polimorfizm, abstrakcja czy enkapsulacja. Następnie przejdziemy już do języka JavaScript i do zrozumienia tego, w jaki sposób powyższe koncepcje są w nim zaimplementowane. Język ten nie jest bowiem w 100% klasycznie obiektowy, jak np. język PHP. Co jednak bardzo istotne, JavaScript implementuje tzw. dziedziczenie prototypowe, którego bardzo dogłębne zrozumienie, gwarantuje zrozumienie całego języka JavaScript. Dowiesz się zatem czym są konstruktory i jak je tworzyć, a także jak korzystać z prototypu funkcji. Dzięki temu będziemy mogli wykorzystać obiektowość do własnych celów, co później w praktycznych przykładach uczynimy.Na przestrzeni kilku lekcji zobaczysz krok po kroku, jak w języku JavaScript zaimplementować dziedziczenie wielokrotne. Taka wiedza absolutnie otwiera oczy na zależności rządzące obiektami w tym języku. Dowiesz się również jak rozszerzać wbudowane konstrukcje języka JavaScript czy Obiektowego Modelu Dokumentu, a także kiedy powinniśmy to robić. Omówimy problemy, jakie mogą się pojawiać przy korzystaniu ze słowa kluczowego this, a także sposoby ich rozwiązania. Poznasz 3 bardzo ważne metody funkcji: call, apply i bind.JavaScript ma wiele specyficznych cech, a jedną z nich są tzw. domknięcia. W jednym z rozdziałów zobaczysz, do czego one służą i kiedy powinniśmy z nich korzystać. Dopełnimy tym również wiedzę związaną z programowaniem obiektowym i tzw. prywatnością.Rozdział o obiektowości został celowo umieszczony na samym początku kursu, gdyż zrozumienie tych koncepcji pozwala patrzeć zupełnie inaczej na wszystkie pozostałe. Po tym rozdziale przejdziemy do omówienia bardzo popularnego, lekkiego formatu wymiany danych JSON. Dowiesz się jak wygląda składnia tego formatu, a także jak współpracuje on z językiem JavaScript.Następnie przejdziemy do bardzo ekscytującego tematu, jakim jest technologia AJAX. Dzięki niej możemy wysyłać zapytania do serwera i pobierać dane, bez przeładowywania witryny. Do zrozumienia AJAXa niezbędne jest jednak rozumienie działania protokołu HTTP, na którym opiera się sieć www. Z tego powodu, jedna z lekcji została w 100% poświęcona HTTP i dowiesz się z niej jak wysyłane są żądania i odpowiedzi, a także tzw. nagłówki, które będą dla nas niezwykle istotne. Chwilę później omówimy również bardzo ważne mechanizmy: Same- origin policy i CORS, które blokują możliwość wysyłania żądań AJAX do pewnych serwerów. Kiedy już będziesz rozumiał te niezwykle istotne koncepcje, przejdziemy do napisania pierwszego kodu, wysyłającego asynchroniczne żądanie do serwera. Następnie dowiesz się jak wysyłać, a także odbierać dane z serwera, umieszczać je na stronie oraz śledzić postęp zarówno wysyłania, jak i pobierania danych.W tym rozdziale na przestrzeni kilku lekcji napiszemy swoją własną bibliotekę AJAX, która pozwoli w niezwykle łatwy sposób wysyłać i odbierać dane. Skorzystamy w niej już w kolejnej lekcji, gdzie zobaczysz, jak wysłać wiadomość e-mail z użyciem AJAX i PHP po stronie serwera. Gotowy skrypt, będziesz mógł umieścić na własnej stronie internetowej. Na zakończenie tego rozdziału omówimy również dokładnie niezwykle sprytną technikę o nazwie JSONP, które pozwala wysyłać tzw. żądania “cross-origin”. Przekonasz się dlaczego taka technika powstała i jak współpraca klienta i serwera potrafi obejść zabezpieczenia przeglądarek.Kolejnym tematem omówionym w kursie będą Cookies, czyli tzw. ciasteczka. Dowiesz się czym są, w jakim celu istnieją, a także jak są ustawianie przez serwer. Co ciekawe, również z poziomu języka JavaScript będziemy mieli do nich dostęp, a zatem zobaczysz jak je ustawiać i odczytywać. Na tym etapie przyda nam się wiedza zdobyta w lekcji o protokole HTTP.W kursie znajdziesz również rozdział poświęcony w 100% wyrażeniom regularnym. To mechanizm języka, który pozwala dopasowywać tekst do definiowanych przez nas wzorców. Wyrażenia regularne potrafią być bardzo zaawansowane i odstraszać, dlatego rozłożymy je na czynniki pierwsze, byś dokładnie je zrozumiał. Na przestrzeni wielu lekcji dowiesz się jakie są specjalne symbole wykorzystywane przy wyrażeniach regularnych, czym są kwantyfikatory, kotwice czy np. grupowanie. Następnie przejdziemy do wykorzystania wyrażeń regularnych w języku JavaScript. Poznasz zarówno metody obiektu RegExp jak i te dostępne na obiekcie String. Dzięki nim będziemy mogli wyszukiwać np. adresów e- mail w podanym tekście, usuwać je lub zamieniać na coś innego. Jako praktyczny projekt, stworzymy “Antybluzgacz”. Wykorzystamy do tego celu programowanie obiektowe, a sama aplikacja będzie pozwalała filtrować wpisywany przez użytkownika tekst wiadomości i wyłapywać w nim niecenzuralne słowa. Wszystkie z nich zamienimy na przypadkową reprezentację znaków, np. $#!@%^. Ten projekt pokaże Ci nie tylko jak korzystać z wyrażeń regularnych, ale także jak profesjonalnie pracować z kodem JavaScript.W przedostatnim rozdziale tego kursu znajdziesz lekcje związane z dobrymi praktykami pracy. Omówimy tzw. “strict mode” języka JavaScript, zagadnienia związane z minifikacją i konkatenacją skryptów, sprawdzaniem poprawności pisanego kodu oraz delegacją zdarzeń DOM.Na końcu kursu znajdziesz 10 krótkich lekcji z serii Tips & Tricks, które przybliżą Ci wiele ciekawych konstrukcji języka JavaScript, a także technik na rozwiązanie różnych problemów. Zobaczysz np. jak wczytać obrazy w tle czy jak wyświetlić na pasku tytułowym witryny migające powiadomienie.Podsumowując, kurs ten jest dopełnieniem wiedzy z zakresu języka JavaScript i Obiektowego Modelu Dokumentu z kursu “JavaScript od Podstaw”. Poprzedni kurs nie jest wymagany, lecz jego przerobienie z pewnością pozwoli dużo lepiej przyswoić wiedzę z tego kursu, gdyż były one przygotowywane równocześnie. Oba te materiały, pozwolą od zera, wskoczyć na naprawdę wysoki poziom rozumienia języka, a także dobrych praktyk pisania kodu.
Kurs JavaScript w Praktyce to między innymi:
- Omówienie koncepcji OOP
- Dziedziczenie prototypowe
- Domknięcia
- Format danych JSON
- Praca z AJAX
- Cookies
- Wyrażenia regularne
- “strict mode” w JavaScript
- Praktyczne projekty
- Niezliczona ilość sztuczek i dobrych praktyk
- I wiele, wiele więcej!
Dla kogo jest ten kurs?
Do tego kursu mogą jednak przystąpić wszystkie osoby, które znają już podstawy języka HTML, CSS i JavaScript i chcą poszerzyć swoją wiedzę, a także spojrzeć zupełnie inaczej na ten język.
W tej lekcji pokażę ci jak działa w praktyce to o czym mówiliśmy w poprzedniej lekcji czyli same origin
policy oraz cors w przypadku Ajax i dzięki temu będziesz już rozumiał jakie możemy mieć problemy
kiedy z Ajaksem będziemy pracować czy kiedy będziesz pracował z iframe jesteśmy na stronie która pod takim
adresem się znajduje.
Jest to moja domena natomiast w momencie kiedy ten kurs oglądasz ja to już usunąłem więc nie próbuj przechodzić
pod taki adres.
Mamy tutaj stronę i H1 Global oraz wewnątrz załadowaną ramkę iframe i pokażę ci jak to wygląda jak widzisz
zwykła strona tutaj jest ta jedynka h1 Global którą widzisz tutaj a pod spodem element i frame.
Mam nadzieję że już znasz taki element ale on bardzo prosto działa.
Mianowicie jeżeli napiszemy iframe i src to tutaj możemy podać stronę którą chcemy załadować wewnątrz.
Jak widzisz ta strona została tutaj wewnątrz załadowana.
Podobnie jest z takim przyciskiem Like
z Facebooka jeżeli go osadzamy albo np. wideo z YouTube'a to jest całkowicie oddzielna strona która
ma swoją przestrzeń ma swoje window document itd.
Ta strona wygląda w ten sposób gdybyśmy pod nią przeszli.
Jak widzisz jest tutaj tylko h1.
Natomiast co jest ważne to na tej stronie jeżeli przejdziemy do kodu ładuje sobie skrypty które nazywają
się Scripts inner js i mam tam w środku funkcję change H1 która znajdzie sobie H1 i zmieni
ją na zmieniony tekst.
Czyli jeżeli na tej stronie tutaj wywołam funkcję change H1 to zauważ co stanie się z tym tekstem.
Zostanie on zmieniony i teraz chciałbym z tej naszej strony globalnej czyli z tej właśnie odwołać się
do tego iframe wejść sobie do jego window.
O tym mówiłem w prezentacji która była w lekcji poprzedniej.
I na to window wywołać taką metodę bo jeżeli to jest funkcja globalna to wiesz że na window będzie
dostępna tak jak tutaj pokazałem change H1.
To jest w rzeczy samej window change H1 i dokładnie tak samo to działa ten tekst się tutaj zmienia.
Ok.
Czyli tutaj będziemy chcieli to zrobić.
I jeszcze taka uwaga że na tej stronie z kolei na samym dole mamy załadowany skripts global które są
tutaj.
Pobrałem sobie do zmiennej iframe właśnie odwołanie do tego inner side czyli do tego elementu i będziemy
się chcieli odwołać dalej. Na naszej stronie.
Mamy tutaj iframe.
Czyli to jest ten element i pokazywałem ci w prezentacji w lekcji poprzedniej że możemy poprzez content document
i content window odwoływać się do poszczególnych obiektów.
Czyli content window odwoła nam się do obiektu window
w tej wewnętrznej ramce no i okazuje się że to działa.
Nie ma problemu zwróciliśmy tutaj window więc teraz pod tym window tak jak ci mówiłem to jest to window
które było tutaj odwołamy się do change H1 i zobaczymy czy ten wewnętrzny tekst się zmieni czyli raz jeszcze
content Window i następnie Change H1.
Zobaczmy.
No i pojawił się błąd.
Zadziałał mechanizm Same Origin Policy bo strona depalage.com według mechanizmu
który pokazałem ci w wersji poprzedniej to nie są te same origin dlatego że tutaj mamy Files i co możemy
z tym zrobić jak widzisz nie udało nam się tego zmienić i mamy tutaj błąd i napisane blocked a frame
with origin depalage com from accessing a cross origin frame czyli z innego pochodzenia ramki nie mogliśmy tutaj
odczytać nie mogliśmy przejść do tego window i teraz w przypadku iframe co możemy zrobić bo to nie ma wiele
wspólnego z ajaxem ale chciałem ci o tym powiedzieć w wersji poprzedniej więc pokażę ci teraz gdybyś
miał taki problem z iframe i jak go rozwiązać.
Otóż możemy się odwołać do czegoś takiego jak document domain tutaj.
I zauważ że jest to depalage kropka com.
Na tej stronie document domain jest to files depalage com.
Dlatego w tym skrypcie czyli na tej stronie inner skrypcie inner js możemy napisać document domain i przypisać
tutaj depalage com.
I nie myśl sobie że możemy dowolne rzeczy tutaj przypisywać tak nie jest.
Ale jeżeli ta strona jest serwowana z files depalage com czyli ta ramka którą widać to możemy na niej
zmienić document domain na depalage com czyli na eduweb pl bym nie mógł ale na depalage com
mogę zmienić ale to jeszcze nie wystarczy bo teraz w naszej stronie globalnej czyli tu gdzie mamy scripts
global pokazywałem że tutaj document domain to jest depalage com
Czyli teraz one powinny się zgadzać ale nadal nam to nie zadziała dlatego że musimy ręcznie zmienić
na tej stronie document domain na taki sam.
Czyli możemy w tym skrypcie global napisać document domain równa się depalage com i teraz na obydwu z nich
ręcznie to zmieniliśmy.
Czyli zarówno tutaj na tym globalnym jak i na tej wewnętrznej stronie albo możemy tutaj napisać document
domain równa się document domain bo wiesz że to zwraca właśnie depalage com.
Więc można to jeszcze raz przepisać.
Widziałeś w przeglądarce że document domain miało taką wartość więc dlaczego trzeba to przypisać drugi
raz. Otóż musimy to zrobić ręcznie aby javascript wiedział aby przeglądarka konkretnie wiedziała że skoro ręcznie
to przypisaliśmy to znaczy że ręcznie chcieliśmy to zrobić.
Czyli jeżeli raz jeszcze piszemy to co już tutaj teoretycznie było i tutaj piszemy coś takiego to teraz
może odświeżmy sobie najpierw tutaj żeby zerknąć spróbujmy document domain.
Teraz zostało to zmienione i ta właśnie strona jest ładowana tutaj w ramce więc jeżeli odświeżę to document
domain tej strony zostało zmienione na takie.
Na tej stronie też to ręcznie zmieniliśmy i spróbujmy się odwołać do tego co mieliśmy wcześniej czyli
change H1 i zerknijmy
Czy ten tekst się zmieni kiedy wcisnę enter. Wciskam enter.
No i teraz się udało.
Czyli jeżeli będziemy ładować dwie ramki i one będą jakby z tej samej domeny czyli depalage com oraz files depalage com
to na tej drugiej możemy zmienić domenę właśnie na depalage com i na tej również możemy to zrobić.
Wtedy nam to będzie działać.
Czyli jak widzisz do obiektu window odwołaliśmy się zupełnie wewnętrznej ramki.
Natomiast gdyby tutaj był lajk z Facebooka załadowany i odwołalibyśmy się do jego iframe to nie moglibyśmy tam wejść
do window i np. odczytywać sobie ciasteczek czy innych rzeczy o których jeszcze będę mówił w tym kursie.
Teraz chciałbym przejść do drugiego przykładu z Ajaksem.
Ok.
Jesteśmy w drugim przykładzie tym razem z Cross Origin Resource Sharing.
I tutaj będę chciał wysłać Ajax.
Jeszcze nie wiesz jak Ajax działa będziemy o tym mówić w kolejnych już lekcjach natomiast uwierz mi
że po wciśnięciu przycisku chciałbym wysłać zapytanie Ajax będzie to zapytanie GET pod taki adres.
Get json PHP i jak widzisz tutaj json jest zwracany jeżeli tutaj wejdziemy.
O json już mówiliśmy czyli tablica z takimi obiektami to pod tym adresem jest odsyłane.
Jeżeli pod taki adres przejdziemy czyli chciałbym wysłać teraz zapytanie GET pod taki adres.
To samo robi przeglądarka w momencie kiedy wciskam enter.
Tak sobie napisałem skrypt że po naciśnięciu załaduj treść wyślemy żądanie GET zauważ skąd z depalage kropka com.
do files depalage kropka com czyli tutaj znowu Same Origin Policy będzie inne
I zobaczmy czy uda nam się wysłać takie zapytanie i tą treść tutaj sobie wczytać bo tak sobie to napisałem.
Przejdźmy do konsoli klikam zakładuj treść no i Ajax został wysłany
ale jak widzisz mamy błąd dlatego że tutaj jest napisane No Access Control Allow Origin header is present under
requested resource czyli nie ma takiego nagłówku o tym ci mówiłem.
Próbowaliśmy wysłać Ajax do innej domeny gdybym chciał go wysłać pod depalage com.
Gdyby to się tutaj znajdowało pod takim adresem bez tego files to by zadziałało.
Ale do takiej domeny już nie mogę.
Dlatego właśnie że jeżeli przejdziemy tutaj do tego get json do network to zauważ co nam odsyła serwer
kiedy przeglądarka kiedy ja tutaj wciskam enter wysyła żądanie get pod taki adres to w tym żądaniu get
w response header czyli w odpowiedzi nie mamy czegoś takiego jak Access Control Allow Origin o czym ci mówiłem
w lekcji poprzedniej i nie zadziała nam to.
Natomiast jeśli tutaj przejdę chciałbym Ci pokazać co przeglądarka wysłała do serwera pod ten adres.
Przejdźmy sobie tutaj do headers i request headers czyli to co przeglądarka wysyła zapisała tutaj to o
czym ci mówiłem w lekcji poprzedniej czyli Origin.
Napisała Origin to jest depalage com i to możemy odczytać po stronie serwera natomiast serwer nam odesłał
odpowiedź w której jak widzisz tutaj nie znalazło się takie oto zapytanie w zasadzie tutaj też możemy
to zobaczyć tutaj mamy response i będziemy mieli request czyli serwer odesłał poprawną odpowiedź ale nigdzie
tutaj nie było tego nagłówka o którym wspominałem.
Teraz przejdę do kodu i odkomentuję tutaj taką linijkę w kodzie PHP w moim pliku i w języku PHP taką funkcją
możemy taki nagłówek dodać czyli Access Control Allow Origin.
Jeżeli to ustawię zamiast gwiazdki na HTTP na depalage com to również będzie działać bo właśnie przeglądarka jak
widzisz wysłała w request headers origin taki czyli jeżeli serwer odeśle nam taki nagłówek właśnie z tamtym
origin to zadziała.
A jeśli odeśle z gwiazdką to również zadziała dla każdego hosta teraz to zapisze to zostanie przesłane
na serwer.
Tutaj może sobie odświeżę żeby również ci to pokazać.
Teraz to co odsyła serwer czyli response headers zawiera taki oto nagłówek access control allow origin.
I o to nam chodzi jak widzisz po stronie serwera my o to musimy zadbać w tym przypadku zrobiłem to w
języku PHP więc jeżeli teraz tutaj odświeżę.
Przejdźmy do konsoli odświeżam raz jeszcze spróbuje sobie załadować treść.
Tym razem się pobrała i zadawała jak możesz zobaczyć raz jeszcze.
Widzimy że get został wysłany pod taki adres.
Przeglądarka znowu w Request Headers wysłała Origin to po stronie serwera nie jest odczytywane nic z tym
nie robiliśmy więc nie ma to znaczenia ale bardzo istotne jest to że serwer z odpowiedzią wysłał właśnie
ten nagłówek i wtedy przeglądarka wie że on pozwala na pobieranie treści właśnie w taki Ajaxowy sposób z dowolnego
hosta.
Mam nadzieję że tymi dwoma lekcjami przybliżyłem ci jak działa Same Origin Policy oraz CORS i teraz
już będziesz wiedział dlaczego pod pewne adresy możemy wysyłać zapytania Ajax a niektóre z nich nie.
W kolejnej lekcji zajmiemy się już pisaniem swojego pierwszego kodu związanego z Ajaksem.