Traducere: Vlad Merzhevich
Toată lumea știe despre formularele web, nu? Lipiți eticheta
Browserele care nu acceptă atributul substituent îl ignoră pur și simplu. Nici un rău sau daune.
Întrebați profesorul Markup
☞ Î. Pot folosi marcajul HTML pentru atributul substituent? Vreau să inserez o poză sau poate să schimb culorile.
A. Atributul substituent poate conține doar text, fără cod HTML. Cu toate acestea, există extensii CSS speciale care vă permit să setați stilul textului în unele browsere.
Câmpuri cu autofocus
| IE | Firefox | safari | Crom | Operă | iPhone | Android |
| - | - | 4.0+ | 3.0+ | 10.0+ | - | - |
Site-urile pot folosi JavaScript pentru a se concentra automat pe primul câmp de formular. De exemplu, pe pagina principală Google.com focalizarea automată este în câmpul pentru introducerea căutării Cuvinte cheie. Deși acest lucru este convenabil pentru majoritatea oamenilor, poate fi enervant pentru utilizatorii avansați și persoanele cu nevoi speciale. Dacă apăsați pe bara de spațiu în timp ce așteptați derularea paginii, nu va exista derulare deoarece accentul este pus pe câmpul de introducere a formularului (va fi un spațiu introdus în câmp în loc de defilare). Dacă mutați focalizarea pe un alt câmp de introducere în timp ce pagina se încarcă, scriptul de focalizare automată a site-ului poate muta „util” focalizarea înapoi la câmpul de introducere original, întrerupând tastarea și determinându-vă să tastați în locul greșit.
Deoarece focalizarea automată funcționează prin JavaScript, pot exista complexități pentru a gestiona aceste extreme și puține opțiuni pentru persoanele care nu doresc ca o pagină web să le „fure” concentrarea.
Pentru a rezolva aceste probleme, HTML5 introduce atributul autofocus pe toate elementele de formular. Atributul de focalizare automată face exact ceea ce sună: de îndată ce pagina se încarcă, mută focalizarea în câmpul specificat. Dar, deoarece acesta este doar un marcaj și nu un script, comportamentul va fi consecvent pe toate site-urile. În plus, producătorii de browsere (sau autorii extensiilor) pot oferi utilizatorilor o modalitate de a dezactiva focalizarea automată.
Acesta este modul în care puteți seta un câmp de formular de focalizare automată.
Browserele care nu acceptă atributul de focalizare automată îl vor ignora.
Ce s-a întâmplat? Vrei să spui că vrei ca focalizarea automată să funcționeze peste tot, nu doar în browserele HTML5 de lux? Puteți lăsa scriptul curent cu autofocus, doar faceți două mici modificări:
- adăugați atributul autofocus la codul HTML;
- verificați dacă browserul acceptă atributul de focalizare automată și, dacă nu, rulați propriul script.
Focalizare automată cu o alternativă
Concentrați-vă cât mai devreme posibil
Multe pagini web așteaptă ca window.onload să se declanșeze și să se concentreze. Dar evenimentul window.onload nu se va declanșa până când toate imaginile nu se vor încărca. Dacă pagina dvs. are o mulțime de imagini, astfel de scripturi naive se vor schimba potențial după ce utilizatorul a început să interacționeze cu o altă parte a paginii dvs. De aceea utilizatori avansați urăsc scripturile de focalizare automată.
De exemplu, în secțiunea anterioară, scriptul de focalizare automată este plasat imediat după câmpul de formular la care se referă. Acest soluție optimă, dar s-ar putea să vă rănească sentimentele să puneți un bloc de cod JavaScript în mijlocul paginii (sau mai banal, sistemul dumneavoastră ar putea să nu fie atât de flexibil). Dacă nu puteți insera un script în mijlocul unei pagini, trebuie să setați focalizarea printr-un eveniment personalizat precum $(document).ready() în jQuery în loc de window.onload .
Focalizare automată prin jQuery
Evenimentul personalizat jQuery se declanșează de îndată ce DOM-ul este disponibil - adică așteaptă să se încarce textul paginii, dar nu așteaptă să se încarce toate imaginile. Aceasta nu este abordarea optimă - dacă pagina este neobișnuit de mare sau conexiune retea lent, este posibil ca utilizatorul să interacționeze în continuare cu pagina înainte ca scriptul cu focus să fie executat. Dar este totuși mult mai bine decât să așteptați ca evenimentul window.onload să se declanșeze.
Dacă sunteți de acord și sunteți dispus să inserați un script cu o singură declarație în codul paginii dvs., acesta este un compromis care este mai puțin dezastruos decât prima opțiune și mai bun decât a doua. Puteți folosi evenimente personalizate jQuery pentru a vă seta propriile evenimente, să spunem autofocus_ready. Apoi puteți apela acest eveniment manual, imediat după ce câmpul de focalizare automată este disponibil. Mulțumesc lui E. M. Shtenberg pentru că m-a învățat această tehnică.
Focalizare automată cu eveniment personalizat alternativ
Această soluție este optimă, ca și prima abordare. Accentul va fi setat pe câmpul formular de îndată ce este posibil din punct de vedere tehnic, în timp ce textul paginii încă se încarcă. O parte a logicii aplicației (concentrarea pe câmpul formularului) a fost mutată din corpul paginii în secțiune
. Acest exemplu se bazează pe jQuery, dar conceptul de evenimente personalizate nu este unic pentru jQuery. Alte biblioteci JavaScript precum YUI și Dojo oferă funcționalități similare.Să rezumam.
- Concentrarea corectă este importantă.
- Dacă este posibil, cereți browserului să folosească atributul de focalizare automată pe câmpul în care doriți să vă focalizați.
- Dacă utilizați cod alternativ pentru browsere mai vechi, definiți suportul pentru atributul de focalizare automată, astfel încât scriptul să ruleze numai în browsere mai vechi.
- Concentrați-vă cât mai devreme posibil. Lipiți scriptul de focalizare în cod imediat după câmpul formularului. Dacă asta nu vă deranjează, încorporați o bibliotecă JavaScript care acceptă evenimente personalizate și declanșați evenimentul în cod imediat după câmpul formularului. Dacă acest lucru nu este posibil, utilizați un eveniment precum $(document).ready() din jQuery.
- În niciun caz nu așteptați ca window.onload să seteze focalizarea.
Adrese de email
De mai bine de zece ani, formularele au conținut doar câteva tipuri de câmpuri. Cele mai frecvente sunt următoarele.
Toate aceste tipuri de câmpuri încă funcționează în HTML5. Dacă faceți „upgrade la HTML5” (poate prin schimbarea !DOCTYPE ), nu va trebui să faceți nicio modificare în formularele dvs. Ura pentru compatibilitatea anterioară!
Cu toate acestea, HTML5 definește 13 noi tipuri de câmpuri și nu există niciun motiv pentru a nu începe să le utilizați.
Primul dintre aceste noi tipuri de adrese E-mail. Arata asa.
Eram pe cale să scriu o propoziție care începea „în browsere care nu acceptă tip="email"..." dar s-a oprit. De ce? Pentru că nu sunt sigur dacă browserele nu acceptă type="email" . Toate browserele „support” type="email" . S-ar putea să nu facă nimic special, dar browserele care nu recunosc type="email" îl vor trata ca tip="text" și îl vor reda ca un câmp de text normal.
Voi sublinia cât de important este acest lucru. Există milioane de formulare pe Internet care solicită o adresă de e-mail și toate folosesc . Vedeți un câmp de text, introduceți adresa dvs. de e-mail în el și gata. Și aici vine HTML5, care definește type="email" . Înnebunesc browserele? Nu. Fiecare browser de pe pământ tratează atributul tip necunoscut drept type="text" - chiar și IE6. Așa că vă puteți „actualiza” formularele cu type="email" chiar acum.
Ce se întâmplă dacă, de exemplu, browserul acceptă type="email"? Ei bine, ar putea însemna orice. Specificația HTML5 nu necesită nicio interfață de utilizator anume pentru noile tipuri de câmpuri. Opera completează câmpul formularului cu o pictogramă mică. Alte browsere HTML5, cum ar fi Safari și Chrome, redă ca un câmp de text - la fel ca tip="text" - astfel încât utilizatorii dvs. să nu observe diferența (până când nu se uită la sursă).
Și apoi este iPhone-ul.
iPhone-ul nu are tastatură fizică. Toată „tastarea” se face atingând tastatura de pe ecran care apare la momentul potrivit, cum ar fi atunci când navigați la un câmp de formular pe o pagină web. Apple a făcut ceva complicat în browserul iPhone-ului. Recunoaște câteva câmpuri HTML5 noi și schimbă dinamic tastatura de pe ecran pentru a optimiza introducerea.
De exemplu, o adresă de e-mail este text, nu? Sigur, dar este un tip special de text. De exemplu, aproape toate adresele de e-mail conțin simbolul @ și cel puțin un punct (.), dar este puțin probabil să conțină un spațiu. Deci, atunci când utilizați un iPhone și navigați la un element , veți primi o tastatură pe ecran care conține mai puțin spațiu decât cel normal, precum și taste dedicate pentru caractere. și @.
Lasă-mă să rezum. Nu există niciun dezavantaj să traduceți imediat toate câmpurile dvs adrese de emailîn type="email" . Practic nimeni nu va observa, cu excepția utilizatorilor de iPhone, care probabil nici nu o vor observa. Dar cei care observă vor zâmbi încet și vă vor mulțumi că le-ați ușurat puțin munca.
Adrese web
Adresa web - pe care tocilarii standardelor o numeau URL-uri, cu excepția câtorva pedanți care au numit URI-uri - este un alt tip de text specializat. Sintaxa unei adrese web este limitată de standardul relevant de Internet. Dacă cineva vă cere să introduceți o adresă web într-un formular, se așteaptă la ceva de genul „http://www.google.com/”, nu „125 Farwood Road”. Liniile oblice sunt comune - chiar și în pagina principala Google are trei. Perioadele sunt și ele comune, dar spațiile sunt interzise. Și fiecare adresă web are un sufix de domeniu precum „.com” sau „.org”.
Și așa... (rogă de tobe, vă rog)... . Pe iPhone, așa arată.
iPhone-ul și-a schimbat tastatura virtuală așa cum a făcut-o pentru o adresă de e-mail, dar acum a optimizat-o pentru tastarea unei adrese web. Spațiul a fost complet înlocuit cu trei taste virtuale: bară oblică, punct și „.com” (puteți țineți apăsată tasta „.com” pentru a selecta un sufix diferit, cum ar fi „.org” sau „.net”).
Browserele care nu acceptă HTML5 vor trata type="url" ca type="text" , așa că nu există niciun dezavantaj în utilizarea acestui tip pentru toate câmpurile în care trebuie să introduceți o adresă web.
Numerele ca contoare
Următorul pas: numerele. A cere un număr este mai complex decât a cere o adresă de e-mail sau web. În primul rând, cifrele sunt mai complicate decât crezi. Selectați rapid un număr. -unu? Nu, mă refer la un număr între 1 și 10,7 ½? Nu, nu, nici o fracțiune, prostule. π? Acum tocmai ai ales un număr irațional.
Aș dori să subliniez că nu ești adesea întrebat „doar un număr”. Este mai probabil ca aceștia să ceară un număr într-un anumit interval. Este posibil să doriți doar anumite tipuri de numere în acest interval - poate numere întregi, dar nu fracții sau zecimale sau ceva mai exotic, cum ar fi multiplii lui 10. HTML5 acoperă toate acestea.
Alegeți un număr, aproape orice
min="0"
max="10"
step="2"
value="6">
Să ne uităm la un atribut.
- type="number" înseamnă că este un câmp numeric.
- min="0" specifică valoarea minimă permisă pentru acest câmp.
- max="10" este valoarea maximă permisă.
- step="2" combinat cu valoarea minima definește numere valide în intervalul: 0, 2, 4 și așa mai departe, până la valoarea maximă.
- value="6" valoare implicită. Ar trebui să pară familiar, același atribut este întotdeauna folosit pentru a defini valorile câmpurilor de formular. Îl menționez aici pentru punctul de plecare pe care se bazează HTML5 Versiunile anterioare HTML. Nu trebuie să reînveți să faci ceea ce ai făcut înainte.
Acesta este codul numeric al câmpului. Rețineți că toate aceste atribute sunt opționale. Dacă aveți un minim, dar nu un maxim, puteți specifica atributul min, dar nu și atributul max. Valoarea implicită a pasului este 1 și puteți omite atributul pas până când este necesară o valoare de pas diferită. Dacă nu există o valoare implicită, atunci atributul value poate fi un șir gol sau chiar omis cu totul.
Dar HTML5 nu se oprește aici. Pentru acelasi mic preț scăzut libertate veți obține aceste metode de confort JavaScript.
- input.stepUp(n) crește valoarea câmpului cu n.
- input.stepDown(n) scade valoarea câmpului cu n.
- input.valueAsNumber returnează valoarea curentă ca un float (proprietatea input.value este întotdeauna un șir).
Probleme de afișare? Ei bine, interfața corectă pentru manipularea numerelor în browsere este implementată diferit. Pe iPhone, unde tastarea este dificilă, browserul optimizează din nou tastatura virtuală pentru tastarea numerelor.
Pe versiunea pentru desktop a Opera, câmpul type="number" apare ca un contor cu mici săgeți în sus și în jos pe care puteți face clic pentru a modifica valorile.
Opera respectă atributele min , max și step, astfel încât veți obține întotdeauna o valoare numerică rezonabilă. Dacă creșteți valoarea la maxim, săgeata sus din contor devine gri.
Ca și în cazul tuturor celorlalte câmpuri de introducere pe care le-am discutat în acest capitol, browserele care nu acceptă type="number" îl vor trata ca tip="text" . Valoarea implicită va fi afișată în câmp (cum este stocată în atributul value), dar alte atribute precum min și max vor fi ignorate. Sunteți liber să le implementați singur sau să utilizați un cadru JavaScript care implementează deja gestionarea contoarelor. Mai întâi verifică cum aici.
dacă(!.inputtypes.number)(
// nu există suport nativ pentru câmpul tip=număr
// ar putea încerca Dojo sau alt cadru JavaScript
}
Numere de glisare
Contorul nu este singura modalitate de a reprezenta introducerea numerelor. Probabil că ați văzut și un glisor care arată așa.
Acum puteți avea și un glisor pe formular. Codul arată ciudat de asemănător cu un câmp de contor.
min="0"
max="10"
step="2"
value="6">
Toate atributele disponibile sunt identice cu type="number" - min , max , step , value - și înseamnă același lucru. Singura diferență este în interfața cu utilizatorul. În loc de un câmp de introducere, se așteaptă ca browserele să afișeze type="range" sub formă de glisor. La momentul scrierii ultimele versiuni Safari, Chrome și Opera au funcționat cu asta. Din păcate, iPhone-ul se afișează ca un simplu câmp de text, nici măcar nu își optimizează tastatura de pe ecran pentru introducerea numerelor. Toate celelalte browsere tratează pur și simplu câmpul ca type="text" , așa că nu există niciun motiv pentru a începe să utilizați acest tip imediat.
HTML 4 nu include selector de date prin calendar. Cadrele JavaScript vă permit să ocoliți acest lucru (Dojo , jQuery UI , YUI , Closure Library), dar, desigur, fiecare dintre aceste soluții necesită ca cadrul să fie „încorporat” pentru orice calendar încorporat.
HTML5 definește în sfârșit o modalitate de a activa selectorul de date încorporat fără nicio scriptare. Există de fapt șase dintre ele: dată, lună, săptămână, oră, dată + oră și dată + oră cu un fus orar.
Până acum, sprijinul... este limitat.
| Un fel | Operă | Alte browsere |
|---|---|---|
| tip="data" | 9.0+ | - |
| tip="lună" | 9.0+ | - |
| tip="săptămână" | 9.0+ | - |
| tip="timp" | 9.0+ | - |
| type="datetime" | 9.0+ | - |
| type="datetime local" | 9.0+ | - |
Așa se afișează Opera :
Dacă aveți nevoie de ora împreună cu data, Opera acceptă și :
Dacă aveți nevoie de o lună plus un an (de exemplu, data de expirare Card de credit), Opera poate afișa :
Mai puțin obișnuită, dar disponibilă, este alegerea săptămânii din an prin :
Nu în ultimul rând este momentul :
Selector de date cu alternativă
...
Este probabil ca alte browsere să accepte în cele din urmă aceste tipuri. La fel ca type="email" și alte tipuri, aceste câmpuri de formular vor fi afișate ca text simplu în browserele care nu recunosc tipul="date" și variantele acestuia. Dacă vrei, poți doar să folosești decât să-i facă pe utilizatorii Opera fericiți și să aștepte ca alte browsere să ajungă din urmă. Este mai realist de utilizat , dar verificați dacă browserul are suport încorporat pentru selectorul de date și activați solutie alternativa ca script la alegere (Dojo, jQuery UI, YUI, Closure Library sau alte opțiuni).
Fereastra de căutare
Deci caută. Nu doar căutări de pe Google sau Yahoo (ei bine, și acelea). Gândiți-vă la orice casetă de căutare, pe orice pagină, pe orice site. Amazon are o casetă de căutare, Yandex are o casetă de căutare, majoritatea blogurilor au și ele. Cum sunt făcute? , la fel ca orice alt câmp de text de pe web. Să reparăm asta.
Căutați o nouă generație
În unele browsere, nu veți observa nicio diferență față de un câmp de text obișnuit. Dar dacă utilizați Safari pe Mac OS X, va arăta așa.
Ați găsit o diferență? Câmpul de introducere are colțuri rotunjite! Știu, știu, cu greu poți să-ți stăpânești sentimentele. Dar stai, asta nu e tot! Când începeți să tastați în câmpul type="search", Safari va insera un mic buton "x" cu partea dreapta fereastră. Făcând clic pe „x” șterge conținutul câmpului. Google Chrome, care are aceeași tehnologie sub capotă, se comportă la fel. Ambele trucuri arată și se comportă în mod similar cu căutarea nativă din iTunes și alte aplicații client Mac OS X.
Apple.com folosește pentru a căuta pe site-ul dvs., pentru a ajuta site-ul să transmită o senzație de „make-loving”. Dar nu este nimic specific pentru Mac aici. Este doar un cod, astfel încât fiecare browser de pe orice platformă să poată alege cum să se afișeze conform convențiilor platformei. Ca și în cazul tuturor celorlalte tipuri noi, browserele care nu recunosc type="search" îl vor trata drept type="text" , așa că nu există absolut niciun motiv să nu începeți să utilizați type="search" pentru toate casetele de căutare astăzi. .
spune profesorul Markup
În mod implicit, Safari nu se aplică majoritatea stilurilor. Dacă doriți să forțați Safari să trateze câmpul de căutare ca pe un câmp de text obișnuit (pentru a vă aplica propriile stiluri), adăugați această regulă în foaia de stil.
intrare(
-webkit-aspect:textfield;
}
Îi mulțumesc lui John Lane pentru că m-a învățat acest truc.
Alegerea culorilor
HTML5 definește, de asemenea, un câmp , care vă permite să selectați o culoare și o returnează în notație hexazecimală. Niciun browser nu acceptă alegerea culorilor, ceea ce este păcat pentru că întotdeauna mi-au plăcut paletele Mac OS. Poate intr-o zi.
Notă. traducător. Opera 11 acceptă această caracteristică.
Validarea formularului
În acest capitol, am vorbit despre noi elemente de formular și despre noi funcții precum focalizarea automată, dar nu am menționat poate cea mai interesantă parte a formularelor HTML5: verificare automată date de intrare. Să ne uităm la problemele comune ale introducerii unei adrese de e-mail într-un formular. Probabil că aveți validare pe partea client prin JavaScript, urmată de validare pe partea server prin PHP, Python sau un alt limbaj pe partea serverului. HTML5 nu va înlocui niciodată validarea pe partea de server, dar ar putea să înlocuiască într-o zi validarea pe partea client.
Există două mari probleme cu validarea adresei de e-mail JavaScript:
- Unii dintre vizitatorii dvs. (probabil în jur de 10%) nu au JavaScript activat.
- Veți primi o adresă incorectă.
Serios, vei primi adresa greșită. Determinarea faptului că un set de caractere aleatoare este o adresă de e-mail validă este incredibil de dificilă. Cu cât te uiți mai greu, cu atât devine mai greu. Am spus deja că este foarte, foarte greu? Nu este mai ușor să agăți această durere de cap pe browser?
Opera verifică tipul = "email"
Iată o captură de ecran din Opera 11, deși funcționalitatea este prezentă încă de la Opera 9. Codul include setarea atributului de tip la e-mail. Când un utilizator Opera încearcă să trimită un formular cu , browserul verifică automat adresa de e-mail chiar dacă scripturile sunt dezactivate.
HTML5 oferă, de asemenea, validarea adresei web cu un câmp si numere cu . Validarea numărului respectă valorile minime și maxime ale atributelor, astfel încât browserele nu vă vor permite să trimiteți formularul dacă introduceți un număr prea mare.
Nu există niciun cod pentru a activa validarea formularelor în HTML5, aceasta se face în mod implicit. Pentru a dezactiva validarea, utilizați atributul novalidate.
Nu mă testa
Browserele permit treptat suportul pentru validarea formularelor în HTML5. Firefox 4 va avea suport complet. Din păcate, Safari și Chrome îl implementează doar parțial: validează elementele formularului, dar nu afișează niciun mesaj vizibil atunci când câmpurile formularului nu sunt validate. Cu alte cuvinte, dacă introduceți o dată nevalidă (sau scrisă greșit) în type="date" , Safari și Chrome nu vor trimite formularul, dar nu vă vor spune de ce nu a făcut-o. Ei vor seta focalizarea pe un câmp care conține o valoare nevalidă, dar nu vor afișa un mesaj de eroare precum Opera sau Firefox 4.
Câmpuri obligatorii
| IE | Firefox | safari | Crom | Operă | iPhone | Android |
| - | 4.0+ | - | - | 9.0+ | - | - |
Validarea formularelor în HTML5 nu se limitează la tipul fiecărui câmp. De asemenea, puteți specifica că anumite câmpuri sunt obligatorii, astfel de câmpuri trebuie să aibă o valoare înainte de a putea trimite formularul.
Codul pentru câmpurile obligatorii este cât se poate de simplu.
Browserele pot modifica aspectul implicit al unui câmp obligatoriu. Iată un exemplu despre cum arată în Mozilla Firefox 4.0.
De asemenea, dacă încercați să trimiteți un formular fără a completa o valoare necesară, Firefox va afișa o bară de informații care spune că câmpul este obligatoriu și nu poate fi gol.
După primirea și interpretarea unui mesaj de solicitare, un server răspunde cu un mesaj de răspuns HTTP:
- O linie de stare
- Zero sau mai multe câmpuri de antet (General|Răspuns|Entitate) urmate de CRLF
- O linie goală (adică, o linie fără nimic înaintea CRLF) care indică sfârșitul câmpurilor de antet
- Opțional un mesaj-corp
Următoarele secțiuni explică fiecare dintre entitățile utilizate într-un mesaj de răspuns HTTP.
Linia de stare a mesajului
O linie de stare constă din versiunea protocolului urmată de un cod de stare numeric și fraza textuală asociată. Elementele sunt separate prin caractere SP spațiale.
Versiunea HTTP
Un server care acceptă HTTP versiunea 1.1 va returna următoarele informații despre versiune:
Versiune HTTP=HTTP/1.1
codul de stare
Elementul Status-Code este un număr întreg de 3 cifre în care prima cifră a Status-Code definește clasa de răspuns, iar ultimele două cifre nu au niciun rol de categorizare. Există 5 valori pentru prima cifră:
| S.N. | Cod și descriere |
|---|---|
| 1 | 1xx: Informațional Înseamnă că cererea a fost primită și procesul continuă. |
| 2 | 2xx: Succes Înseamnă că acțiunea a fost primită, înțeleasă și acceptată cu succes. |
| 3 | 3xx: Redirecționare Înseamnă că trebuie luate măsuri suplimentare pentru a finaliza cererea. |
| 4 | 4xx: Eroare client Înseamnă că cererea conține o sintaxă incorectă sau nu poate fi îndeplinită. |
| 5 | 5xx: Eroare server Înseamnă că serverul nu a reușit să îndeplinească o solicitare aparent validă. |
Codurile de stare HTTP sunt extensibile, iar aplicațiile HTTP nu sunt necesare pentru a înțelege semnificația tuturor codurilor de stare înregistrate. O listă cu toate codurile de stare a fost dată într-un capitol separat pentru referință.
Câmpuri antet răspuns
Vom studia General-header și Entity-header într-un capitol separat când vom afla câmpurile de antet HTTP. Deocamdată, să verificăm care sunt câmpurile antetului răspunsului.
Câmpurile pentru antetul răspunsului permit serverului să transmită informații suplimentare despre răspuns care nu pot fi plasate în linia de stare. Aceste câmpuri de antet oferă informații despre server și despre accesul suplimentar la resursa identificată de Request-URI.
-
Autentificare proxy
-
WWW-Autentificare
Puteți introduce câmpurile dvs. personalizate în cazul în care aveți de gând să scrieți propriul Web Client și Server personalizat.
Exemple de mesaje de răspuns
Acum să le punem pe toate împreună pentru a forma un răspuns HTTP pentru o solicitare de preluare a salut.htm pagina de pe serverul web care rulează pe site
HTTP/1.1 200 OK Data: Luni, 27 iulie 2009 12:28:53 GMT Server: Apache/2.2.14 (Win32) Ultima modificare: miercuri, 22 iulie 2009 19:15:56 GMT Lungimea conținutului: 88 conținut- Tip: text/html Conexiune: închis
Salut Lume!
Următorul exemplu arată un mesaj de răspuns HTTP care afișează o condiție de eroare atunci când serverul web nu a putut găsi pagina solicitată:
HTTP/1.1 404 Nu a fost găsit Data: Duminica, 18 Oct 2012 10:36:20 GMT Server: Apache/2.2.14 (Win32) Lungimea conținutului: 230 Conexiune: Tip conținut închis: text/html; set de caractere=iso-8859-1
nu a fost gasit
Adresa URL solicitată a fost /t.html nu a fost gasit pe acest server.
Următorul este un exemplu de mesaj de răspuns HTTP care arată starea de eroare atunci când serverul web a întâlnit o versiune HTTP greșită în cererea HTTP dată:
HTTP/1.1 400 Data solicitării greșite: Duminica, 18 octombrie 2012 10:36:20 GMT Server: Apache/2.2.14 (Win32) Lungimea conținutului: 230 Tipul conținutului: text/html; set de caractere=iso-8859-1
Cerere greșită
Browserul dvs. a trimis o solicitare pe care acest server nu a putut-o înțelege.
Linia de solicitare conținea caractere nevalide după șirul de protocol.
Să presupunem că trebuie să obținem date de pe site, a căror colectare manuală este imposibilă sau imposibilă din cauza volumului. Într-un astfel de caz, putem automatiza procesul folosind instrumentele descrise mai jos.
solicită bibliotecă
Biblioteca Python pentru a face cereri către server și pentru a procesa răspunsurile. Fundamentul scriptului de analiză și arma noastră principală. Folosind această bibliotecă, obținem conținutul paginii sub formă de html pentru o analiză ulterioară.
import cereri răspuns = solicitări . get ("https://ya.ru") # get-request print (răspuns . text ) # imprimați conținutul paginii sarcină utilă = ( „cheie1”: „valoare1” , „cheie2” : „valoare2” ) răspuns = solicitări. get("http://httpbin.org/get" , parametri = sarcină utilă ) # cerere cu parametri anteturi = ( "user-agent": "my-app/0.0.1") răspuns = solicitări . get(url, anteturi = anteturi) # cerere cu antete html specifice
API
Interfață de programare a aplicației - o interfață de programare a aplicației furnizată de proprietarul aplicației web altor dezvoltatori. Lipsa unui API care să ne poată satisface nevoile este primul lucru de care trebuie să ne asigurăm înainte de a ne grăbi să analizăm codul sursă al paginii și să scriem un parser pentru acesta. Multe site-uri populare au propria lor API și documentație care explică cum să le folosească. Putem folosi api în acest fel - formăm o cerere http conform documentației și obținem un răspuns folosind cereri.
BS4
Beautifulsoup4 este o bibliotecă pentru analizarea documentelor html și xml. Vă permite să accesați direct conținutul oricăror etichete în html.
din bs4 import BeautifulSoup soup = BeautifulSoup (raw_html , "html.parser" ) print (soup . find ("p" , class_ = "some-class") . text ) # imprimați conținutul etichetei „p” după clasa „some-class”
Selenium WebDriver
Datele de pe site pot fi generate dinamic folosind javascript. În acest caz, solicitările + bs4 nu vor putea analiza aceste date. Cert este că bs4 analizează codul sursă al paginii fără a executa js. Pentru a executa codul js și a obține o pagină identică cu cea pe care o vedem în browser, puteți utiliza driverul web selenium - acesta este un set de drivere pentru browsere diferite, furnizat cu biblioteci pentru lucrul cu aceste drivere.
Și dacă există autorizație?
session = requests.Session() data = ("login_username":"login", "login_password":"parolă") url = "http://site.com/login.php" răspuns = session.post(url, date =date)
Dar dacă site-ul interzice o mulțime de solicitări?
- Setați o întârziere între solicitări:
răspuns = requests.get(url, timeout=(10, 0.01)) # timeout conexiune, timeout citire (în secunde)
- Pretindeți-vă că sunteți un browser care utilizează driverul web selenium sau transmiteți conținutul antetului user-agent, făcând o solicitare:
user_agent = ("Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:50.0) " "Gecko/20100101 Firefox/50.0") cerere = requests.get(url, headers=("User-Agent":user_agent))
- Utilizarea proxy:
Atacuri între site-uri cu injectare de script
Într-un atac XSS (cross-site script injection), un atacator injectează cod rău intenționat într-o pagină Web legitimă, care rulează apoi un script rău intenționat la nivelul clientului. Când un utilizator vizitează o pagină infectată, scriptul este descărcat în browserul utilizatorului și executat acolo. Această schemă are multe varietăți. Un script rău intenționat poate accesa module cookie de browser, jetoane de sesiune sau alte informații sensibile stocate în browser. Cu toate acestea, toate atacurile urmează modelul prezentat în Figura 1.
Figura 1. Figura 1. Atacul XSS tipic
Vulnerabilități XSS
Într-un atac XSS tipic, atacatorul găsește o modalitate de a injecta un șir în pagina Web a serverului. Să presupunem că un atacator a injectat următoarea linie într-o pagină Web:. De fiecare dată când un utilizator vizitează această pagină, browserul său descarcă acest script și îl rulează împreună cu restul conținutului paginii. În acest caz, ca urmare a rulării scriptului, utilizatorul va vedea o fereastră pop-up cu textul „ești sub atac”.
Consecințele XSS
Dacă un atacator reușește să exploateze o vulnerabilitate XSS într-o aplicație web, ar putea injecta un script în pagină care ar oferi acces la date. cont utilizator. În acest caz, atacatorul poate efectua multe acțiuni rău intenționate, de exemplu:
- fura un cont;
- răspândiți viruși;
- obțineți acces la istoricul paginilor vizitate și la conținutul clipboard-ului;
- pentru a primi o oportunitate telecomandă browser
- scanează și folosește resurse și aplicații hardware și software din rețeaua internă.
Prevenirea atacurilor XSS
Pentru a preveni atacurile XSS, o aplicație trebuie să cripteze ieșirea paginii înainte de a fi trimisă utilizatorului final. Când rezultatul este criptat, marcajul HTML este înlocuit cu reprezentări alternative - obiecte. Browserul afișează aceste obiecte, dar nu le rulează. De exemplu, , apoi atunci când se folosește strategia descrisă, serverul va returna șirul .
Când browserul încarcă scriptul criptat, îl va converti înși va afișa scriptul ca parte a paginii Web, dar nu îl va rula.
Adăugarea HTML la o aplicație Java pe partea serverului
Pentru a preveni ieșirea codului de script rău intenționat în pagină, aplicația dvs. trebuie să cripteze toate variabilele șir înainte ca acestea să fie afișate pe pagină. Criptarea este pur și simplu o chestiune de conversie a fiecărui caracter în numele obiectului HTML corespunzător, așa cum se arată în codul Java din Lista 1.
Listarea 1. Conversia caracterelor în nume de obiecte HTML
clasă publică EscapeUtils ( public static final HashMap m = new HashMap(); static ( m. put(34, """); //< - меньше чем m.put(60, "<"); // < - меньше чем m.put(62, ">"); // > - mai mare decât //Utilizatorul trebuie să potrivească toate obiectele html cu valorile zecimale corespunzătoare. //Obiectele cu valori zecimale sunt afișate în tabelul de mai jos ) public static String escapeHtml() ( String str = ""; încercați ( StringWriter writer = new StringWriter((int) (str.length() * 1.5)); escape(writer, str); System.out.println("șirul codificat este " + writer.toString()); return writer.toString(); ) catch (IOException ioe) ( ioe.printStackTrace(); return null; ) ) public static void escape (Writer writer, String str) aruncă IOException ( int len = str.length(); pentru ( int i = 0;i< len; i++) { char c = str.charAt(i); int ascii = (int) c; String entityName = (String) m.get(ascii); if (entityName == null) { if (c >0x7F) ( writer.write(""); writer.write(Integer.toString(c, 10)); writer.write(";"); ) else (writer.write(c); ) ) else (writer. scrie (nume entitate); ) ) ) )Codul Java din Lista 1 codifică șirul HTML String String "" . Utilizați următoarea procedură:
Ca rezultat, ieșirea va fi rândul următor: .
Tabelul 2 arată maparea entităților HTML la valorile lor zecimale.
Tabelul 2. Valori zecimale pentru obiectele HTML
| Valoare zecimală | Un obiect | Descriere |
|---|---|---|
| 160 | Spațiu care nu se rupe | |
| 60 | < | Mai puțin decât |
| 62 | > | Mai mult decât |
| 38 | & | Ampersand |
| 162 | ¢ | Cent |
| 163 | £ | Livre |
| 165 | ¥ | Jena |
| 8364 | € | Euro |
| 167 | § | Paragraf |
| 169 | Drepturi de autor | |
| 174 | ® | Marca inregistrata |
| 8482 | ™ | Marcă |
Concluzie
Injectarea de scripturi între site-uri este una dintre cele mai comune moduri de a ataca computerul unui utilizator. Cu toate acestea, puteți reduce considerabil capacitatea unui atacator de a vă infecta aplicația web cu cod rău intenționat. Când construiți o aplicație, aveți grijă să criptați toate rezultatele paginii înainte de a le trimite către browserul utilizatorului final.
