Apa rincian teknis harus seorang programmer aplikasi web pertimbangkan sebelum membuat situs publik?

Hal-hal apa yang harus seorang programmer pelaksana teknis rincian dari aplikasi web pertimbangkan sebelum membuat situs publik? Jika Jeff Atwood bisa melupakan HttpOnly cookies, peta situs, and cross-site request pemalsuan semua sama site, apa yang penting aku bisa melupakan juga?

I'm berpikir tentang hal ini dari seorang pengembang web's perspektif, seperti yang orang lain adalah menciptakan desain yang sebenarnya dan konten untuk situs. Jadi sementara kegunaan dan konten mungkin lebih penting daripada platform, anda programmer memiliki sedikit itu. Apa yang anda perlu khawatir tentang adalah bahwa pelaksanaan platform yang lebih stabil, handal, aman, dan memenuhi setiap bisnis lainnya goals (seperti biaya yang tidak terlalu banyak, memakan waktu terlalu lama untuk membangun, dan peringkat serta dengan Google karena konten yang mendukung).

Berpikir tentang hal ini dari perspektif pengembang yang's melakukan beberapa pekerjaan untuk intranet-jenis aplikasi dalam waktu yang cukup dipercaya lingkungan, dan memiliki tembakan pertama dan memadamkan berpotensi situs populer untuk seluruh big bad world wide web.

Juga, saya'm mencari sesuatu yang lebih spesifik dari yang samar-samar "standar web" respon. Maksudku, HTML, JavaScript, dan CSS melalui HTTP yang cukup banyak diberikan, terutama ketika saya've sudah ditentukan bahwa anda're profesional web developer. Jadi di luar itu, Which standar? Dalam keadaan apa, dan mengapa? Menyediakan link untuk indeks standard's keterangan.

Larutan

Idenya di sini adalah bahwa sebagian besar dari kita harus already tahu most dari apa yang ada di daftar ini. Tapi mungkin ada satu atau dua item yang anda ingin't benar-benar melihat ke dalam sebelum, don't sepenuhnya memahami, atau mungkin bahkan tidak pernah mendengar. Antarmuka dan Pengalaman Pengguna

  • Diketahui bahwa browser menerapkan standar-standar yang konsisten dan pastikan situs anda bekerja cukup baik di semua browser utama. Minimal tes terhadap beberapa Gecko mesin (Firefox), WebKit engine (Safari dan beberapa browser mobile), Chrome, anda didukung IE browser (mengambil keuntungan dari Kompatibilitas Aplikasi VPC Gambar), dan Opera. Juga mempertimbangkan bagaimana browser membuat situs anda di sistem operasi yang berbeda.
  • Pertimbangkan bagaimana orang bisa menggunakan situs lain selain dari browser utama: ponsel, layar pembaca dan mesin pencari, misalnya. — Beberapa aksesibilitas info: WAI dan Section508, pengembangan Mobile: MobiForge.
  • Pementasan: Bagaimana untuk menyebarkan update tanpa mempengaruhi pengguna anda. Memiliki satu atau lebih tes atau pementasan lingkungan yang tersedia untuk menerapkan perubahan arsitektur, kode atau menyapu konten dan memastikan bahwa mereka dapat digunakan dalam cara yang terkontrol tanpa melanggar apa-apa. Memiliki cara otomatis kemudian menyebarkan menyetujui perubahan ke situs hidup. Ini adalah yang paling efektif diterapkan dalam hubungannya dengan penggunaan version control system (git, Subversion, dll.) dan otomatis membangun mekanisme (Ant, NAnt, dll.).
  • Don't display ramah kesalahan langsung ke pengguna.
  • Don't menempatkan pengguna' alamat email dalam teks biasa karena mereka akan mendapatkan spam kematian.
  • Tambahkan atribut rel="nofollow" untuk user-generated link untuk menghindari spam.
  • Membangun baik-dianggap batas ke situs anda - Ini juga termasuk dalam Keamanan.
  • Belajar bagaimana untuk melakukan progressive enhancement.
  • Redirect setelah POSTING jika POSTING yang telah berhasil, untuk mencegah refresh dari mengirimkan lagi.
  • Don't lupa untuk mengambil aksesibilitas ke rekening. It's selalu ide yang baik dan dalam keadaan tertentu itu's persyaratan hukum. WAI-ARIA dan WCAG 2 ini adalah sumber daya yang baik di daerah ini.
  • Baca Don't Membuat Saya Berpikir. Keamanan
  • It's banyak untuk mencerna tapi OWASP pengembangan panduan mencakup Situs Web keamanan dari atas ke bawah.
  • Tahu tentang Injeksi terutama SQL injection dan bagaimana untuk mencegahnya.
  • Jangan pernah percaya input pengguna, atau apa pun yang datang dalam permintaan (yang mencakup cookie dan tersembunyi bentuk nilai-nilai bidang!).
  • Hash password menggunakan garam dan gunakan garam yang berbeda untuk baris untuk mencegah pelangi serangan. Gunakan lambat algoritma hashing, seperti bcrypt (saat diuji) atau scrypt (bahkan lebih kuat, tetapi yang lebih baru) (1, 2), untuk menyimpan password. (Cara Aman Menyimpan Password). The NIST juga menyetujui PBKDF2 untuk hash password", dan's FIPS disetujui dalam .NET (info lebih lanjut di sini). Menghindari menggunakan MD5 atau SHA keluarga ini diatas.
  • Don't mencoba untuk datang dengan anda sendiri fancy otentikasi system. It's seperti hal yang mudah untuk mendapatkan salah dalam halus dan diuji cara dan anda tidak't bahkan tahu sampai after anda're hacked.
  • Tahu aturan untuk kartu kredit pengolahan. (Lihat pertanyaan ini juga)
  • Gunakan SSL/TLS/HTTPS untuk setiap situs di mana data sensitif yang dimasukkan (seperti kepercayaan, Informasi Pribadi, informasi kartu kredit). Let's Mengenkripsi adalah gratis otoritas sertifikat yang dapat membantu.
  • Mencegah pembajakan sesi.
  • Menghindari cross site scripting (XSS).
  • Menghindari cross site request pemalsuan (CSRF).
  • Menghindari Pembajakan Klik.
  • Menjaga sistem anda(s) up to date dengan patch terbaru.
  • Pastikan koneksi database informasi yang diamankan.
  • Menjaga diri informasi terbaru tentang teknik serangan dan kerentanan yang mempengaruhi platform anda.
  • Baca Peramban Google Security Handbook.
  • Baca Aplikasi Web Hacker's Handbook.
  • Pertimbangkan prinsip dari least privilege. Cobalah untuk menjalankan aplikasi server sebagai non-root. (tomcat contoh)
  • Menempatkan rel="noopener noreferrer" pada semua pengguna yang disediakan link dengan target="_blank" untuk mencegah JavaScript pada halaman tujuan dari mengarahkan halaman anda ke tempat lain, seperti halaman login palsu. Info
  • Pertimbangkan untuk menggunakan ketat Kebijakan Keamanan Konten. Kinerja
  • Mengimplementasikan caching jika diperlukan, memahami dan menggunakan HTTP caching dengan benar serta HTML5 Mewujudkan.
  • Mengoptimalkan gambar - don't menggunakan 20 KB gambar untuk mengulangi latar belakang.
  • Kompres konten untuk kecepatan, lihat brotli, gzip/deflate (<menyerang>mengempis lebih baik</strike>).
  • Menggabungkan/menggabungkan beberapa stylesheet atau beberapa file script untuk mengurangi jumlah koneksi browser dan meningkatkan kemampuan untuk kompres gzip duplikasi antara file.
  • Lihatlah Yahoo Kinerja yang luar Biasa situs, banyak pedoman, termasuk meningkatkan front-end kinerja dan mereka YSlow alat (membutuhkan Firefox, Safari, Chrome, atau Opera). Juga, Google page speed (dengan menggunakan ekstensi browser) adalah alat lain untuk profil kinerja, dan mengoptimalkan gambar anda terlalu.
  • <menyerang>Penggunaan [Gambar CSS Sprite][51] untuk kecil gambar terkait seperti toolbar (lihat "meminimalkan permintaan HTTP" point)</strike>
  • Gunakan SVG gambar sprite untuk usaha kecil gambar terkait seperti toolbar. SVG mewarnai adalah sedikit rumit. Anda dapat membaca tentang hal itu di sini.
  • Sibuk situs web harus mempertimbangkan memisahkan komponen-komponen di seluruh domain. Secara khusus...
  • Konten statis (yaitu gambar, CSS, JavaScript, dan umumnya konten yang doesn't membutuhkan akses ke cookie) harus pergi di domain terpisah yang tidak menggunakan cookies, karena semua cookie untuk domain dan subdomain yang dikirim dengan setiap request ke domain dan subdomain. Salah satu pilihan yang baik di sini adalah untuk menggunakan Jaringan Pengiriman Konten (CDN), tapi mempertimbangkan kasus di mana bahwa CDN mungkin gagal oleh termasuk alternatif Cdn, atau salinan lokal yang dapat disajikan sebagai gantinya.
  • Meminimalkan jumlah permintaan HTTP yang diperlukan untuk sebuah browser untuk me-render halaman.
  • Pilih template engine dan membuat/pre-compile menggunakan tugas-pelari seperti gulp atau mengorok
  • Pastikan ada favicon.ico file yang di root dari situs ini, yaitu /favicon.ico. Browser akan secara otomatis permintaan itu, bahkan jika ikon tidak disebutkan di kode HTML sama sekali. Jika anda tidak memiliki sebuah /favicon.ico, hal ini akan mengakibatkan banyak 404s, menguras bandwidth server anda. SEO (Search Engine Optimization)
  • Gunakan "search engine friendly" Url, yaitu menggunakan example.com/pages/45-article-title bukannya example.com/index.php?page=45
  • Bila menggunakan # untuk konten dinamis mengubah # ke #! dan kemudian pada server $_REQUEST["_escaped_fragment_"] adalah apa yang googlebot menggunakan bukan #!. Dengan kata lain, ./#!page=1 menjadi ./?_escaped_fragments_=page=1. Juga, bagi pengguna yang dapat menggunakan FF.b4 atau Kromium, sejarah.pushState({"anu":"bar"}, "Tentang", "./?page=1"); Adalah perintah yang besar. Jadi meskipun address bar telah berubah halaman tidak reload. Hal ini memungkinkan anda untuk menggunakan ? bukan #! untuk menjaga konten dinamis dan juga memberitahu server ketika anda mengirim email link yang kita setelah halaman ini, dan AJAX tidak perlu lagi tambahan permintaan.
  • Don't menggunakan link yang mengatakan "klik di sini". Anda're membuang-buang SEO kesempatan dan itu membuat hal-hal sulit bagi orang-orang dengan pembaca layar.
  • Memiliki sitemap XML, sebaiknya di lokasi default /sitemap.xml.
  • Gunakan <link rel="kanonik" ... /> ketika anda memiliki beberapa Url yang mengarah ke konten yang sama, masalah ini juga bisa diatasi dari Google Webmaster Tools.
  • Gunakan Google Webmaster Tools dan Bing Webmaster Tools.
  • Install Google Analytics tepat di awal (atau open source alat analisis seperti Piwik).
  • Tahu bagaimana robots.txt dan laba-laba mesin pencari bekerja.
  • Mengarahkan permintaan (menggunakan 301 Dipindahkan secara Permanen) meminta www.example.com untuk example.com (atau sebaliknya) untuk mencegah membelah google peringkat di antara kedua situs.
  • Tahu bahwa tidak dapat buruk-berperilaku laba-laba di luar sana.
  • Jika anda memiliki kamar bebas-text content melihat ke Google's sitemap ekstensi untuk video dll. Ada beberapa informasi yang baik tentang hal ini di Tim Farley's jawaban. Teknologi
  • Memahami HTTP dan hal-hal seperti GET, POST, session, cookies, dan apa artinya menjadi "stateless".
  • Menulis XHTML/HTML dan CSS menurut spesifikasi W3C dan pastikan mereka memvalidasi. Tujuan di sini adalah untuk menghindari browser quirks mode dan sebagai bonus membuatnya jauh lebih mudah untuk bekerja dengan non-tradisional browser seperti pembaca layar dan perangkat mobile.
  • Memahami bagaimana JavaScript diproses di browser.
  • Memahami bagaimana JavaScript, style sheets, dan sumber daya lain yang digunakan oleh anda halaman yang dimuat dan mempertimbangkan dampaknya terhadap dirasakan kinerja. Hal ini sekarang secara luas dianggap sebagai yang tepat untuk pindahkan script ke bawah dari halaman anda dengan pengecualian biasanya menjadi hal-hal seperti analisis aplikasi atau HTML5 shims.
  • Memahami bagaimana JavaScript sandbox bekerja, terutama jika anda berniat untuk menggunakan iframe.
  • Diketahui bahwa JavaScript dapat dan akan dinonaktifkan, dan bahwa AJAX adalah karena perpanjangan, bukan dasar. Bahkan jika sebagian besar pengguna normal meninggalkannya sekarang, ingat bahwa NoScript adalah menjadi lebih populer, perangkat mobile mungkin tidak bekerja seperti yang diharapkan, dan Google tidak't menjalankan sebagian besar dari JavaScript anda ketika mengindeks situs.
  • Belajar perbedaan antara 301 dan 302 mengarahkan (ini juga masalah SEO).
  • Belajar sebanyak mungkin tentang penyebaran platform.
  • Pertimbangkan untuk menggunakan Reset Style Sheet atau menormalkan.css.
  • Mempertimbangkan kerangka kerja JavaScript (seperti jQuery, MooTools, Prototype, Dojo atau YUI 3), yang akan menyembunyikan banyak browser perbedaan ketika menggunakan JavaScript untuk manipulasi DOM.
  • Mengambil kinerja yang dirasakan dan JS kerangka kerja bersama-sama, pertimbangkan untuk menggunakan layanan seperti Google Libraries API untuk memuat kerangka sehingga browser dapat menggunakan copy dari kerangka itu sudah di-cache daripada men-download salinan duplikat dari situs anda.
  • Don't menemukan kembali roda. Sebelum melakukan apa-APA mencari komponen atau contoh tentang bagaimana untuk melakukan itu. Ada kemungkinan 99% bahwa seseorang telah melakukan hal itu dan merilis sebuah OSS versi dari kode.
  • Pada flipside itu, don't mulai dengan 20 perpustakaan sebelum anda've bahkan memutuskan apa kebutuhan anda. Terutama pada sisi klien web di mana itu's hampir selalu pada akhirnya yang lebih penting untuk menjaga hal-hal ringan, cepat, dan fleksibel. Memperbaiki Bug
  • Memahami anda'akan menghabiskan 20% dari waktu anda coding dan 80% dari itu menjaga, sehingga kode yang sesuai.
  • Set up sebuah kesalahan pelaporan solusi.
  • Memiliki sistem bagi orang untuk menghubungi anda dengan saran dan kritik.
  • Dokumen bagaimana aplikasi bekerja untuk masa depan dukungan staf dan orang-orang yang melakukan pemeliharaan.
  • Sering backup! (Dan pastikan backup fungsional) Telah mengembalikan strategi, tidak hanya strategi cadangan.
  • Menggunakan sistem kontrol versi untuk menyimpan file anda, seperti Subversion, Mercurial atau Git.
  • Don't lupa untuk melakukan Pengujian Penerimaan. Kerangka kerja seperti Selenium dapat membantu. Terutama jika anda sepenuhnya mengotomatisasi pengujian anda, mungkin dengan menggunakan Continuous Integration alat, seperti Jenkins.
  • Pastikan anda memiliki cukup logging di tempat dengan menggunakan kerangka kerja seperti log4j, log4net atau log4r. Jika ada sesuatu yang tidak beres di situs hidup anda, anda'll perlu cara untuk mencari tahu apa.
  • Ketika login pastikan anda menangkap kedua ditangani pengecualian, dan pengecualian tidak tertangani. Laporan/menganalisis log output, seperti'akan menunjukkan kepada anda di mana isu-isu kunci di situs anda. Lain-lain
  • Menerapkan kedua server-side dan client-side monitoring dan analytics (salah satu harus proaktif dan bukan reaktif).
  • Menggunakan layanan seperti UserVoice dan Interkom (atau alat lain yang sejenis) untuk terus tetap berhubungan dengan pengguna.
  • Ikuti Vincent Driessen's Git model percabangan Banyak hal yang dihilangkan tidak tentu karena mereka're tidak berguna jawaban, tetapi karena mereka're terlalu rinci, keluar dari ruang lingkup, atau pergi sedikit terlalu jauh untuk seseorang yang ingin mendapatkan gambaran tentang hal-hal yang mereka harus tahu. Silahkan merasa bebas untuk mengedit ini juga, saya mungkin melewatkan beberapa hal atau membuat beberapa kesalahan.
Komentar (19)