Terjemahan: Vlad Merzhevich
Semua orang tahu tentang formulir web, bukan? Masukkan tag
Browser yang tidak mendukung atribut placeholder abaikan saja. Tidak ada kerusakan atau pelanggaran.
Tanya Profesor Markup
T. Dapatkah saya menggunakan markup HTML untuk atribut placeholder? Saya ingin menyisipkan gambar atau mungkin mengubah warna.
A. Atribut placeholder hanya boleh berisi teks, tanpa kode HTML. Namun, ada ekstensi CSS khusus yang memungkinkan Anda mengatur gaya teks di beberapa browser.
Bidang fokus otomatis
| YAITU | Firefox | Safari | Chrome | Opera | iPhone | Android |
| - | - | 4.0+ | 3.0+ | 10.0+ | - | - |
Situs dapat menggunakan JavaScript untuk secara otomatis mendapatkan fokus pada bidang formulir pertama. Misalnya, di halaman rumah Google.com bidang untuk memasukkan kata kunci pencarian memiliki autofokus. Meskipun ini nyaman bagi kebanyakan orang, ini dapat mengganggu pengguna listrik dan orang-orang dengan kebutuhan khusus. Jika Anda menekan spasi sambil menunggu halaman digulir, tidak akan ada pengguliran karena fokus ada pada bidang input formulir (spasi akan diketik di bidang alih-alih menggulir). Jika Anda memindahkan fokus ke bidang input lain saat halaman sedang dimuat, skrip fokus otomatis situs dapat "membantu" memindahkan fokus kembali ke bidang input asli, mengganggu pengetikan Anda dan menyebabkan Anda mengetik di tempat yang salah.
Karena fokus otomatis bekerja melalui JavaScript, mungkin sulit untuk menangani kasus tepi ini dan sedikit peluang bagi orang yang tidak ingin halaman web mencuri fokus mereka.
Untuk mengatasi masalah ini, HTML5 memperkenalkan atribut fokus otomatis pada semua elemen formulir. Atribut fokus otomatis melakukan persis seperti apa bunyinya: segera setelah halaman dimuat, ia memindahkan fokus ke bidang yang ditentukan. Tetapi karena ini hanya markup, bukan skrip, perilakunya akan konsisten di semua situs. Selain itu, produsen browser (atau pembuat ekstensi) dapat menawarkan kepada pengguna cara untuk menonaktifkan fokus otomatis.
Ini adalah bagaimana Anda dapat mengatur bidang formulir fokus otomatis.
Browser yang tidak mendukung atribut autofocus akan mengabaikannya.
Apa? Katakanlah Anda ingin fokus otomatis berfungsi di mana saja, tidak hanya di browser HTML5 yang mewah? Anda dapat meninggalkan skrip saat ini dengan fokus otomatis, cukup buat dua perubahan kecil:
- tambahkan atribut fokus otomatis ke kode HTML Anda;
- periksa apakah browser mendukung atribut fokus otomatis, dan jika tidak, jalankan skrip Anda sendiri.
Fokus otomatis dengan alternatif
Tetapkan fokus sedini mungkin
Banyak halaman web menunggu window.onload menyala dan mengatur fokus. Tetapi acara window.onload tidak akan aktif sampai semua gambar dimuat. Jika halaman Anda memiliki banyak gambar, skrip naif tersebut berpotensi mengubah fokus setelah pengguna mulai berinteraksi dengan bagian lain halaman Anda. Itu sebabnya pengguna berpengalaman benci skrip autofokus.
Misalnya, di bagian sebelumnya, skrip fokus otomatis ditempatkan segera setelah bidang formulir yang dirujuk. Ini adalah solusi optimal, tetapi mungkin mengganggu indra Anda untuk meletakkan blok kode JavaScript di tengah halaman (atau lebih biasa, sistem Anda mungkin tidak begitu fleksibel). Jika Anda tidak dapat menyisipkan skrip di tengah halaman, Anda harus mengatur fokus melalui acara khusus seperti $ (document) .ready () di jQuery alih-alih window.onload.
Fokus otomatis melalui jQuery
Acara kustom jQuery diaktifkan segera setelah DOM tersedia - yaitu, menunggu teks halaman dimuat, tetapi tidak menunggu semua gambar dimuat. Ini bukan pendekatan terbaik - jika halamannya luar biasa besar atau koneksi jaringan lambat, pengguna masih dapat berinteraksi dengan halaman sebelum skrip fokus dieksekusi. Namun, ini jauh lebih baik daripada menunggu event window.onload terjadi.
Jika Anda setuju dan siap untuk menyisipkan skrip dengan satu operator ke dalam kode halaman Anda, ini adalah kompromi yang tidak terlalu buruk dibandingkan opsi pertama dan lebih baik daripada opsi kedua. Anda dapat menggunakan acara khusus jQuery untuk mengatur acara Anda sendiri, misalnya autofocus_ready. Kemudian Anda dapat memicu acara ini secara manual, segera setelah bidang fokus otomatis tersedia. Terima kasih kepada EM Shtenberg karena telah mengajari saya teknik ini.
Fokus otomatis dengan acara khusus alternatif
Solusi ini optimal, seperti pendekatan pertama. Fokus akan ditetapkan pada bidang formulir sesegera mungkin secara teknis, saat teks halaman masih dimuat. Bagian dari logika aplikasi (fokus di bidang formulir) telah dipindahkan dari badan halaman ke bagian
... Contoh ini didasarkan pada jQuery, tetapi konsep acara khusus tidak unik untuk jQuery. Pustaka JavaScript lain seperti YUI dan Dojo menawarkan kemampuan serupa.Mari kita rangkum.
- Pengaturan fokus yang benar adalah penting.
- Jika memungkinkan, minta browser menggunakan atribut fokus otomatis pada bidang di mana Anda ingin fokus.
- Jika Anda menggunakan kode alternatif untuk browser lama, tentukan dukungan untuk atribut fokus otomatis sehingga skrip hanya berjalan di browser lama.
- Tetapkan fokus sedini mungkin. Masukkan skrip fokus ke dalam kode tepat setelah bidang formulir. Jika itu tidak mengganggu Anda, sematkan pustaka JavaScript yang mendukung acara khusus dan panggil acara dalam kode Anda segera setelah bidang formulir. Jika tidak memungkinkan, gunakan event seperti $ (document) .ready() dari jQuery.
- Jangan dalam keadaan apa pun menunggu window.onload untuk mengatur fokus.
Alamat email
Selama lebih dari satu dekade, formulir hanya berisi beberapa jenis bidang. Yang paling umum adalah sebagai berikut.
Semua jenis bidang ini masih berfungsi di HTML5. Jika Anda "meningkatkan ke HTML5" (mungkin dengan mengubah! DOCTYPE), Anda tidak perlu membuat satu perubahan pun pada formulir Anda. Hore untuk kompatibilitas mundur!
Namun, HTML5 mendefinisikan 13 jenis bidang baru dan tidak ada alasan untuk tidak mulai menggunakannya.
Yang pertama dari jenis alamat baru ini Surel... Ini terlihat seperti ini.
Saya akan menulis kalimat yang dimulai "di browser yang tidak mendukung type =" email "..." tetapi berhenti. Mengapa? Karena saya tidak yakin apakah browser tidak mendukung type = "email". Semua browser "dukungan" ketik = "email". Mereka mungkin tidak melakukan sesuatu yang istimewa, tetapi browser yang tidak mengenali type = "email" akan memperlakukannya sebagai type = "text" dan menampilkannya sebagai bidang teks biasa.
Saya akan menekankan betapa pentingnya ini. Ada jutaan formulir di Internet yang meminta Anda memasukkan alamat email dan semuanya menggunakan ... Anda melihat kotak teks, masukkan alamat email Anda ke dalamnya dan hanya itu. Dan inilah HTML5, yang mendefinisikan type = "email". Apakah browser menjadi gila? Tidak. Setiap browser di Earth memperlakukan atribut type yang tidak diketahui sebagai type = "text" - bahkan IE6. Jadi Anda dapat "memperbarui" formulir Anda menggunakan type = "email" sekarang.
Apa yang terjadi jika, katakanlah, browser mendukung type = "email"? Yah, itu bisa berarti apa saja. Spesifikasi HTML5 tidak memerlukan antarmuka pengguna khusus untuk jenis bidang baru. Opera melengkapi bidang formulir dengan ikon kecil. Peramban HTML5 lainnya seperti Safari dan Chrome dirender sebagai bidang teks - sama seperti type = "text" - sehingga pengguna Anda tidak akan melihat perbedaannya (sampai mereka melihat sumber).
Dan kemudian ada iPhone.
iPhone tidak memiliki keyboard fisik. Semua "mengetik" dilakukan dengan mengklik keyboard di layar yang muncul pada waktu yang tepat, misalnya, ketika Anda menavigasi ke bidang formulir di halaman web. Apple telah melakukan sesuatu yang rumit di browser iPhone. Ini mengenali beberapa bidang HTML5 baru dan secara dinamis mengubah keyboard di layar untuk mengoptimalkan input.
Misalnya, alamat email adalah teks, bukan? Tentu, tapi ini adalah jenis teks khusus. Misalnya, hampir semua alamat email berisi simbol @ dan setidaknya satu titik (.), Namun kemungkinan tidak berisi spasi. Jadi ketika Anda menggunakan iPhone dan pergi ke item , Anda mendapatkan keyboard di layar yang berisi lebih sedikit ruang dari biasanya, serta tombol khusus untuk karakter. dan @.
Biarkan saya meringkas. Tidak ada ruginya untuk segera menerjemahkan semua bidang alamat email Anda ke type = "email". Hampir tidak ada yang akan memperhatikan ini, kecuali pengguna iPhone, yang mungkin juga tidak akan menyadarinya. Tetapi mereka yang memperhatikan akan tersenyum dengan tenang dan terima kasih telah membuat pekerjaan mereka sedikit lebih mudah.
Alamat web
Alamat web - yang disebut dengan URL, dengan pengecualian beberapa orang yang menyebut URI - adalah jenis teks khusus lainnya. Sintaks alamat web dibatasi oleh standar Internet yang relevan. Jika seseorang meminta Anda memasukkan alamat web ke dalam formulir, mereka mengharapkan sesuatu seperti "http://www.google.com/" dan bukan "125 Farwood Road". Garis miring adalah umum - bahkan untuk halaman rumah Google memiliki tiga di antaranya. Tanda titik juga umum, tetapi spasi tidak diperbolehkan. Dan setiap alamat web memiliki akhiran domain seperti ".com" atau ".org".
Dan jadi ... (drum roll, tolong) ... ... Di iPhone, tampilannya seperti ini.
iPhone mengubah keyboard virtualnya seperti yang dilakukan untuk alamat email, tetapi sekarang telah mengoptimalkannya untuk mengetik alamat web. Bilah spasi sepenuhnya digantikan oleh tiga tombol virtual: garis miring, titik, dan ".com" (Anda dapat menahan tombol ".com" untuk memilih akhiran yang berbeda seperti ".org" atau ".net").
Browser yang tidak mendukung HTML5 akan memperlakukan type = "url" sebagai type = "text", jadi tidak ada kerugian menggunakan jenis ini untuk semua bidang di mana Anda perlu memasukkan alamat web.
Angka sebagai penghitung
Langkah selanjutnya: angka. Meminta nomor lebih kompleks daripada meminta email atau alamat web. Pertama-tama, angka lebih sulit dari yang Anda pikirkan. Pilih nomor dengan cepat. -1? Tidak, maksud saya angka antara 1 dan 10,7 ? Tidak, tidak, tidak sedikit pun, tolol. ? Sekarang Anda baru saja memilih bilangan irasional.
Saya ingin menunjukkan bahwa Anda tidak sering ditanya "hanya angka". Kemungkinan besar mereka akan meminta nomor dalam kisaran tertentu. Anda mungkin hanya menginginkan jenis angka tertentu dalam rentang itu - mungkin bilangan bulat, tetapi bukan pecahan atau desimal, atau sesuatu yang lebih eksotis seperti kelipatan 10. HTML5 mencakup semuanya.
Pilih nomor, hampir semua
menit = "0"
maks = "10"
langkah = "2"
nilai = "6">
Mari kita lihat satu atribut pada satu waktu.
- type = "number" berarti ini adalah bidang numerik.
- min = "0" menunjukkan nilai minimum yang diizinkan untuk bidang ini.
- max = "10" adalah nilai maksimum yang diizinkan.
- langkah = "2" digabungkan dengan nilai minimum mendefinisikan angka yang valid dalam rentang: 0, 2, 4, dan seterusnya, hingga nilai maksimum.
- nilai = "6" nilai default. Seharusnya terlihat familier, atribut yang sama ini selalu digunakan untuk menentukan nilai untuk bidang formulir. Saya menyebutkan ini di sini sebagai titik awal bahwa HTML5 didasarkan pada versi sebelumnya HTML. Anda tidak perlu belajar kembali untuk melakukan apa yang telah Anda lakukan.
Ini adalah kode bidang numerik. Perlu diingat bahwa semua atribut ini opsional. Jika Anda memiliki minimum tetapi tidak maksimum, Anda dapat menentukan atribut min, tetapi tidak max. Secara default, nilai langkah adalah 1 dan Anda dapat menghilangkan atribut langkah hingga Anda memerlukan nilai langkah yang berbeda. Jika tidak ada default, maka atribut value bisa berupa string kosong, atau bahkan dihilangkan sama sekali.
Tapi HTML5 tidak berhenti di situ. Untuk rendah yang sama Harga rendah kebebasan Anda mendapatkan metode JavaScript yang berguna ini.
- input.stepUp (n) meningkatkan nilai bidang sebesar n.
- input.stepDown (n) mengurangi nilai bidang sebesar n.
- input.valueAsNumber mengembalikan nilai saat ini sebagai angka floating point (properti input.value selalu berupa string).
Masalah tampilan? Nah, antarmuka yang benar untuk memanipulasi angka di browser diterapkan secara berbeda. Di iPhone, di mana mengetik sulit, browser kembali mengoptimalkan keyboard virtual untuk memasukkan angka.
Pada Opera versi desktop, bidang type = "number" muncul sebagai penghitung dengan panah atas dan bawah kecil yang dapat Anda klik untuk mengubah nilai.
Opera menghormati atribut min, max, dan step, sehingga Anda akan selalu mencapai nilai numerik yang dapat diterima. Jika Anda meningkatkan nilainya secara maksimal, panah atas di penghitung berubah menjadi abu-abu.
Seperti semua bidang masukan lainnya yang telah saya bahas dalam bab ini, browser yang tidak mendukung type = "number" akan memperlakukannya sebagai type = "text". Nilai default akan muncul di bidang (karena disimpan dalam atribut nilai), tetapi atribut lain seperti min dan maks akan diabaikan. Anda dapat dengan bebas mengimplementasikannya sendiri, atau menggunakan kerangka kerja JavaScript yang sudah menerapkan manajemen penghitung. Pertama periksa bagaimana itu di sini.
jika (! .inputtypes.number) (
// tidak ada dukungan bawaan untuk tipe = bidang angka
// dapat mencoba Dojo atau framework JavaScript lainnya
}
Nomor penggeser
Penghitung bukan satu-satunya cara untuk mewakili input angka. Anda mungkin juga pernah melihat slider yang terlihat seperti ini.
Anda sekarang juga dapat memiliki slider dalam bentuk. Kodenya terlihat aneh seperti kotak putar.
menit = "0"
maks = "10"
langkah = "2"
nilai = "6">
Semua atribut yang tersedia sama dengan type = "number" - min, max, step, value - dan artinya sama. Satu-satunya perbedaan adalah antarmuka pengguna... Alih-alih bidang input, browser diharapkan menampilkan type = "range" sebagai penggeser. Pada saat menulis versi terbaru Safari, Chrome, dan Opera bekerja dengan ini. Sayangnya, iPhone ditampilkan sebagai kotak teks sederhana, bahkan tidak mengoptimalkan keyboard di layar untuk memasukkan angka. Semua browser lain hanya menganggap bidang sebagai type = "text", jadi tidak ada alasan untuk segera mulai menggunakan jenis ini.
HTML 4 tidak menyertakan pemilihan tanggal melalui kalender. Kerangka kerja JavaScript memungkinkan Anda untuk menyiasatinya (Dojo, jQuery UI, YUI, Perpustakaan Penutupan), tetapi tentu saja, masing-masing solusi ini memerlukan kerangka kerja "sematkan" untuk kalender bawaan apa pun.
HTML5 akhirnya mendefinisikan cara untuk mengaktifkan pemilih tanggal sebaris tanpa skrip apa pun. Sebenarnya ada enam di antaranya: tanggal, bulan, minggu, waktu, tanggal + waktu dan tanggal + waktu dengan zona waktu.
Sejauh ini, dukungan ... jarang.
| Jenis | Opera | Peramban lain |
|---|---|---|
| jenis = "tanggal" | 9.0+ | - |
| jenis = "bulan" | 9.0+ | - |
| jenis = "minggu" | 9.0+ | - |
| jenis = "waktu" | 9.0+ | - |
| ketik = "waktu tanggal" | 9.0+ | - |
| type = "datetime-local" | 9.0+ | - |
Beginilah tampilan Opera :
Jika Anda membutuhkan waktu bersama dengan tanggal, Opera juga mendukung :
Jika Anda membutuhkan satu bulan ditambah satu tahun (misalnya tanggal kedaluwarsa kartu kredit), Opera dapat menampilkan :
Kurang umum tetapi terjangkau adalah pilihan minggu sepanjang tahun melalui :
Last but not least adalah waktu dengan :
Pemilih tanggal dengan alternatif
...
Kemungkinan browser lain pada akhirnya akan mendukung jenis ini. Seperti type = "email" dan jenis lainnya, bidang formulir ini akan ditampilkan sebagai teks biasa di browser yang tidak mengenali type = "date" dan variannya. Jika mau, Anda cukup menggunakan daripada membuat pengguna Opera senang, dan menunggu browser lain menyusul. Lebih realistis untuk menggunakannya tetapi periksa apakah browser memiliki dukungan dan aktifkan pemilih tanggal bawaan solusi alternatif sebagai skrip pilihan Anda (Dojo, jQuery UI, YUI, Closure Library atau opsi lainnya).
Kotak pencarian
Jadi, cari. Bukan hanya pencarian dari Google atau Yahoo (yah, itu juga). Pikirkan kotak pencarian apa pun, di halaman mana pun, di situs mana pun. Amazon memiliki kotak pencarian, Yandex memiliki kotak pencarian, dan sebagian besar blog juga memilikinya. Bagaimana mereka dibuat? seperti kotak teks lainnya di internet. Mari kita perbaiki ini.
Mencari generasi penerus
Di beberapa browser, Anda tidak akan melihat perbedaan dari bidang teks biasa. Tetapi jika Anda menggunakan Safari di Mac OS X, tampilannya akan seperti ini.
Apakah Anda menemukan perbedaannya? Bidang input memiliki sudut membulat! Aku tahu, aku tahu, kamu hampir tidak bisa menahan perasaanmu. Tapi tunggu, bukan itu saja! Saat Anda mulai mengetik di bidang type = "search", Safari akan memasukkan tombol "x" kecil dengan sisi kanan jendela. Mengklik "x" akan menghapus konten bidang. Google chrome yang memiliki teknologi yang sama di bawah tenda berperilaku dengan cara yang sama. Kedua tweak kecil ini terlihat dan berperilaku mirip dengan pencarian asli di iTunes dan aplikasi klien Mac OS X lainnya.
Apple.com menggunakan untuk mencari situs Anda untuk membantu situs menyampaikan nuansa macho. Tetapi tidak ada yang khusus untuk Mac di sini. Ini hanya kode, jadi setiap browser di platform apa pun dapat memilih cara menampilkan sesuai dengan konvensi platform. Seperti semua jenis baru lainnya, browser yang tidak mengenali type = "search" akan memperlakukannya sebagai type = "text", jadi sama sekali tidak ada alasan untuk tidak mulai menggunakan type = "search" untuk semua kotak pencarian Anda hari ini. . ..
Profesor Markup mengatakan
Secara default, Safari tidak berlaku untuk kebanyakan gaya. Jika Anda ingin Safari memperlakukan kotak pencarian sebagai kotak teks biasa (sehingga Anda dapat menerapkan gaya Anda sendiri), tambahkan aturan ini ke lembar gaya Anda.
memasukkan (
-penampilan webkit: bidang teks;
}
Terima kasih kepada John Lane karena telah mengajari saya trik ini.
Pemilihan warna
HTML5 juga mendefinisikan bidang yang memungkinkan Anda memilih warna dan mengembalikannya dalam notasi heksadesimal. Tidak ada browser yang mendukung pemilih warna, yang memalukan karena saya selalu menyukai palet Mac OS. Mungkin suatu hari.
Kira-kira Penerjemah. Opera 11 mendukung fitur ini.
Validasi formulir
Dalam bab ini, saya telah berbicara tentang elemen formulir baru dan fitur baru seperti fokus otomatis, tetapi saya mungkin belum menyebutkan bagian paling menarik dari formulir HTML5: pemeriksaan otomatis memasukan data. Mari kita lihat masalah umum memasukkan alamat email dalam formulir. Anda mungkin memiliki validasi sisi klien melalui JavaScript diikuti dengan validasi sisi server melalui PHP, Python, atau bahasa sisi server lainnya. HTML5 tidak akan pernah bisa menggantikan validasi sisi server, tetapi suatu hari nanti mungkin akan menggantikan validasi sisi klien.
Ada dua masalah besar dengan validasi email JavaScript:
- Beberapa pengunjung Anda (mungkin sekitar 10%) tidak menyertakan JavaScript.
- Anda akan menerima alamat yang salah.
Serius, Anda mendapatkan alamat yang salah. Menentukan apakah sekumpulan karakter acak adalah alamat email yang valid sangatlah sulit. Semakin keras Anda melihat, semakin sulit. Apakah saya menyebutkan bahwa ini sangat, sangat sulit? Bukankah lebih mudah untuk menggantung sakit kepala ini di browser Anda?
Opera memeriksa jenis = "email"
Berikut adalah screenshot dari Opera 11, meskipun fungsinya telah ada sejak Opera 9. Kode ini melibatkan pengaturan nilai email untuk atribut type. Saat pengguna Opera mencoba mengirimkan formulir dengan , browser secara otomatis memeriksa alamat email meskipun skrip dinonaktifkan.
HTML5 juga menawarkan validasi bidang untuk alamat web dan angka dengan ... Validasi untuk angka memperhitungkan nilai atribut min dan max, sehingga browser tidak akan mengizinkan Anda mengirimkan formulir jika Anda memasukkan angka yang terlalu besar.
Tidak ada kode untuk mengaktifkan validasi formulir HTML5, ini dilakukan secara default. Untuk menonaktifkan validasi, gunakan atribut novalidate.
Jangan uji aku
Browser lambat untuk mengaktifkan dukungan validasi formulir HTML5. Firefox 4 akan memiliki dukungan penuh. Sayangnya, Safari dan Chrome hanya mengimplementasikan sebagian: mereka memvalidasi elemen formulir, tetapi tidak menampilkan pesan yang terlihat saat bidang formulir gagal divalidasi. Dengan kata lain, jika Anda memasukkan tanggal yang salah (atau salah eja) di type = "date", Safari dan Chrome tidak akan mengirimkan formulir, tetapi mereka tidak akan memberi tahu Anda alasannya. Mereka akan menetapkan fokus ke bidang yang berisi nilai yang tidak valid, tetapi tidak menampilkan pesan kesalahan seperti Opera atau Firefox 4.
Bidang yang harus diisi
| YAITU | Firefox | Safari | Chrome | Opera | iPhone | Android |
| - | 4.0+ | - | - | 9.0+ | - | - |
Validasi formulir dalam HTML5 tidak terbatas pada jenis setiap bidang. Anda juga dapat menentukan bahwa beberapa bidang wajib diisi, bidang tersebut harus valid sebelum Anda dapat mengirimkan formulir.
Kode untuk bidang yang diperlukan sesederhana mungkin.
Peramban dapat mengubah tampilan asli bidang wajib. Sebagai contoh, ini adalah tampilannya di Mozilla Firefox 4.0.
Selain itu, jika Anda mencoba mengirimkan formulir tanpa mengisi nilai yang diperlukan, Firefox akan menampilkan bilah informasi yang memberi tahu Anda bahwa bidang tersebut wajib diisi dan tidak boleh kosong.
Setelah menerima dan menafsirkan pesan permintaan, server merespons dengan pesan respons HTTP:
- Garis status
- Nol atau lebih bidang tajuk (Umum | Respons | Entitas) diikuti oleh CRLF
- Baris kosong (yaitu, baris tanpa apa pun sebelum CRLF) yang menunjukkan akhir bidang header
- Secara opsional, badan pesan
Bagian berikut menjelaskan setiap entitas yang digunakan dalam pesan respons HTTP.
Baris Status Pesan
Sebuah Status-Line terdiri dari versi protokol diikuti oleh kode status numerik dan frase tekstual yang terkait. Elemen dipisahkan oleh karakter SP spasi.
Versi HTTP
Server yang mendukung HTTP versi 1.1 akan mengembalikan informasi versi berikut:
Versi HTTP = HTTP / 1.1
Kode status
Elemen Kode-Status adalah bilangan bulat 3 digit di mana digit pertama Kode-Status mendefinisikan kelas respons dan dua digit terakhir tidak memiliki peran kategorisasi. Ada 5 nilai untuk digit pertama:
| S.N. | Kode dan Deskripsi |
|---|---|
| 1 | 1xx: Informasi Artinya request sudah diterima dan proses masih berlanjut. |
| 2 | 2xx: Sukses Artinya tindakan itu berhasil diterima, dipahami, dan diterima. |
| 3 | 3xx: Pengalihan Ini berarti tindakan lebih lanjut harus diambil untuk menyelesaikan permintaan. |
| 4 | 4xx: Kesalahan Klien Artinya permintaan tersebut mengandung sintaks yang salah atau tidak dapat dipenuhi. |
| 5 | 5xx: Kesalahan Server Itu berarti server gagal memenuhi permintaan yang tampaknya valid. |
Kode status HTTP dapat diperluas dan aplikasi HTTP tidak diperlukan untuk memahami arti dari semua kode status terdaftar. Daftar semua kode status telah diberikan dalam bab terpisah untuk referensi Anda.
Bidang Tajuk Respons
Kita akan mempelajari General-header dan Entity-header dalam bab terpisah ketika kita akan mempelajari bidang HTTP header. Untuk saat ini, mari kita periksa apa bidang header Respons.
Bidang response-header memungkinkan server untuk meneruskan informasi tambahan tentang respons yang tidak dapat ditempatkan di Baris-Status. Bidang header ini memberikan informasi tentang server dan tentang akses lebih lanjut ke sumber daya yang diidentifikasi oleh Request-URI.
-
Otentikasi Proksi
-
WWW-Otentikasi
Anda dapat memperkenalkan bidang kustom Anda jika Anda akan menulis Klien dan Server Web kustom Anda sendiri.
Contoh Pesan Tanggapan
Sekarang mari kita kumpulkan semuanya untuk membentuk respons HTTP untuk permintaan mengambil halo.htm halaman dari server web yang berjalan di situs
HTTP / 1.1 200 OK Tanggal: Sen, 27 Jul 2009 12:28:53 GMT Server: Apache / 2.2.14 (Win32) Terakhir Dimodifikasi: Rab, 22 Jul 2009 19:15:56 GMT Content-Length: 88 Content- Ketik: teks / html Sambungan: Tertutup
Halo Dunia!
Contoh berikut menunjukkan pesan respons HTTP yang menampilkan kondisi kesalahan saat server web tidak dapat menemukan halaman yang diminta:
HTTP / 1.1 404 Tidak Ditemukan Tanggal: Sun, 18 Okt 2012 10:36:20 GMT Server: Apache / 2.2.14 (Win32) Content-Length: 230 Connection: Closed Content-Type: text / html; rangkaian karakter = iso-8859-1
Tidak ditemukan
URL yang diminta /t.html adalah tidak ditemukan di server ini.
Berikut ini adalah contoh pesan respons HTTP yang menunjukkan kondisi kesalahan saat server web menemukan versi HTTP yang salah dalam permintaan HTTP yang diberikan:
HTTP / 1.1 400 Tanggal Permintaan Buruk: Minggu, 18 Okt 2012 10:36:20 GMT Server: Apache / 2.2.14 (Win32) Content-Length: 230 Content-Type: text / html; charset = iso-8859-1 Koneksi: Ditutup
Permintaan yang buruk
Browser Anda mengirimkan permintaan yang tidak dapat dipahami oleh server ini.
Baris permintaan berisi karakter yang tidak valid mengikuti string protokol.
Katakanlah kita perlu mendapatkan data dari situs, yang pengumpulannya secara manual tidak praktis atau tidak mungkin karena volumenya. Dalam hal ini, kita dapat mengotomatiskan proses menggunakan alat yang dijelaskan di bawah ini.
Perpustakaan permintaan
Pustaka Python untuk membuat permintaan ke server dan menangani respons. Dasar dari skrip parsing dan senjata utama kami. Menggunakan perpustakaan ini, kami mendapatkan konten halaman dalam bentuk html untuk parsing lebih lanjut.
tanggapan permintaan impor = permintaan. get ("https://ya.ru") # get-request print (respons.text) # tampilkan konten halaman payload = ("key1": "value1", "key2": "value2") response = permintaan. dapatkan ("http://httpbin.org/get", params = payload) # permintaan dengan parameter headers = ("user-agent": "my-app / 0.0.1") response = permintaan. dapatkan (url, header = header) # permintaan dengan header html tertentu
API
Antarmuka pemrograman aplikasi adalah antarmuka pemrograman aplikasi yang disediakan oleh pemilik aplikasi web untuk pengembang lain. Kurangnya API yang dapat memenuhi kebutuhan kita adalah hal pertama yang harus dipastikan sebelum bergegas menganalisis kode sumber halaman dan menulis parser untuknya. Banyak situs populer memiliki api dan dokumentasi sendiri yang menjelaskan cara menggunakannya. Kami dapat menggunakan api dengan cara ini - kami membentuk permintaan http sesuai dengan dokumentasi, dan mendapatkan respons menggunakan permintaan.
BS4
Beautifulsoup4 adalah perpustakaan untuk mem-parsing dokumen html dan xml. Memungkinkan Anda mengakses konten tag apa pun dalam html secara langsung.
dari bs4 import BeautifulSoup soup = BeautifulSoup (raw_html, "html.parser") print (sup. find ("p", class_ = "some-class").text) # menampilkan konten tag "p" dengan "beberapa-kelas"
Selenium Web Driver
Data di situs dapat dihasilkan secara dinamis menggunakan javascript. Dalam hal ini, permintaan + bs4 tidak akan dapat mengurai data ini. Intinya adalah bs4 mem-parsing kode sumber halaman tanpa mengeksekusi js. Untuk mengeksekusi kode js dan mendapatkan halaman yang identik dengan yang kita lihat di browser, Anda dapat menggunakan driver web selenium - satu set driver untuk browser yang berbeda, disertakan dengan perpustakaan untuk bekerja dengan driver ini.
Tapi bagaimana jika ada izin?
session = request.Session() data = ("login_username": "login", "login_password": "password") url = "http://site.com/login.php" response = session.post (url, data = data)
Tetapi bagaimana jika situs tersebut diblokir karena banyak permintaan?
- Setel penundaan antara permintaan:
response = request.get (url, timeout = (10, 0.01)) # koneksi timeout, read timeout (dalam detik)
- Berpura-pura menjadi browser menggunakan driver web Selenium atau dengan meneruskan konten header agen pengguna, membentuk permintaan:
user_agent = ("Mozilla / 5.0 (X11; Ubuntu; Linux x86_64; rv: 50.0)" "Gecko / 20100101 Firefox / 50.0") request = request.get (url, header = ("User-Agent": user_agent))
- Gunakan proxy:
Membuat skrip serangan lintas situs
Dalam serangan skrip lintas situs (XSS), penyerang menyuntikkan kode berbahaya ke halaman Web yang sah, yang kemudian meluncurkan skrip berbahaya di sisi klien. Saat pengguna mengunjungi halaman yang terinfeksi, skrip diunduh ke browser pengguna dan diluncurkan di sana. Skema ini memiliki banyak variasi. Skrip berbahaya dapat mengakses cookie browser, token sesi, atau informasi sensitif lainnya yang disimpan di browser. Namun, semua serangan mengikuti pola yang ditunjukkan pada Gambar 1.
Gambar 1. Gambar 1. Serangan XSS tipikal
Kerentanan XSS
Dalam serangan XSS yang khas, penyerang menemukan cara untuk menyuntikkan string ke halaman web server. Katakanlah penyerang telah menyuntikkan baris berikut ke dalam halaman Web:... Setiap kali pengguna mengunjungi halaman ini, browser mereka mengunduh skrip ini dan menjalankannya bersama konten halaman lainnya. Dalam hal ini, sebagai hasil dari menjalankan skrip, pengguna akan melihat jendela pop-up dengan teks "Anda diserang".
Konsekuensi dari XSS
Jika penyerang berhasil mengeksploitasi kerentanan XSS dalam aplikasi Web, ia dapat menyuntikkan skrip ke halaman yang menyediakan akses ke data. Akun pengguna. Dalam hal ini, penyerang dapat melakukan banyak tindakan jahat, misalnya:
- membajak akun;
- menyebarkan virus;
- mendapatkan akses ke riwayat kunjungan halaman dan konten papan klip;
- untuk mendapatkan kesempatan kendali jarak jauh peramban;
- memindai dan menggunakan sumber daya firmware dan aplikasi di jaringan internal.
Mencegah serangan XSS
Untuk mencegah serangan XSS, aplikasi harus mengenkripsi output halaman sebelum mengirimkannya ke pengguna akhir. Saat mengenkripsi output, markup HTML diganti dengan representasi alternatif - benda-benda... Browser menampilkan objek-objek ini, tetapi tidak meluncurkannya. Sebagai contoh, , maka saat menggunakan strategi yang dijelaskan, server akan mengembalikan string .
Saat browser mengunduh skrip terenkripsi, itu mengubahnya menjadi dan akan menampilkan skrip sebagai bagian dari halaman Web, tetapi tidak akan menjalankannya.
Menambahkan Kode HTML ke Aplikasi Java Sisi Server
Untuk mencegah kode skrip berbahaya ditampilkan bersama halaman, aplikasi Anda harus mengenkripsi semua variabel string sebelum ditampilkan di halaman. Enkripsi terdiri dari hanya mengubah setiap karakter ke nama objek HTML yang sesuai, seperti yang ditunjukkan pada kode Java di Listing 1.
Listing 1. Mengubah karakter menjadi nama objek HTML
public class EscapeUtils (Publik static final HashMap m = new HashMap(); static (m.put (34, "" "); //< - меньше чем m.put(60, "<"); // < - меньше чем m.put(62, ">"); //> - lebih besar dari // Pengguna harus mencocokkan semua objek html dengan nilai desimal yang sesuai. // Objek cocok dengan nilai desimal seperti yang ditunjukkan pada tabel di bawah) public static String escapeHtml() (String str =""; try (Penulis StringWriter = new StringWriter ((int) (str.length () * 1.5)); escape (penulis, str); System.out.println (" string yang disandikan adalah "+ writer.toString ()); return writer.toString();) catch (IOException ioe) (ioe.printStackTrace(); return null;)) public static void escape (Writer writer, String str) throws IOException (int len=str.length()); untuk ( 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 (penulis. tulis (entityName);))))Kode Java di Listing 1 mengkodekan HTML string String String "". Gunakan prosedur berikut:
Akibatnya, output akan muncul baris berikutnya: .
Tabel 2 menunjukkan bagaimana objek HTML sesuai dengan nilai desimalnya.
Tabel 2. Nilai Desimal untuk Objek HTML
| Nilai desimal | Sebuah Objek | Keterangan |
|---|---|---|
| 160 | Ruang tanpa putus | |
| 60 | < | Kurang dari |
| 62 | > | Lebih dari |
| 38 | & | Simbol untuk 'dan |
| 162 | ¢ | Sen |
| 163 | £ | Lb |
| 165 | ¥ | Yen |
| 8364 | € | Euro |
| 167 | § | Gugus kalimat |
| 169 | hak cipta | |
| 174 | ® | Merek dagang terdaftar |
| 8482 | ™ | Merek dagang |
Kesimpulan
Skrip lintas situs adalah salah satu cara paling umum untuk menyerang komputer pengguna. Namun, Anda dapat secara signifikan mengurangi kemampuan penyerang untuk menginfeksi aplikasi Web Anda dengan kode berbahaya. Saat membangun aplikasi Anda, berhati-hatilah untuk mengenkripsi semua keluaran halaman sebelum mengirimkannya ke browser pengguna akhir.
