Pembangunan Sambungan Pelayar (Chrome & Edge) · Pelajaran

Amalan Pengekodan Selamat

Laksanakan prinsip keselamatan untuk mencegah kerentanan biasa seperti penskripan rentas tapak (XSS) dan kebocoran data.

Pelajaran 2 daripada 411 langkah

Amalan Pengekodan Selamat ialah pelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pembangunan Sambungan Pelayar (Chrome & Edge), dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pembangunan Sambungan Pelayar (Chrome & Edge) merangkumi sejumlah 4 pelajaran.

Mengapa Keselamatan Penting untuk Sambungan

Sambungan pelayar beroperasi dengan keistimewaan yang besar dan berinteraksi rapat dengan data pengguna serta sesi penyemakan imbas. Oleh itu, amalan pengekodan selamat amat penting.

Keselamatan yang lemah boleh menyebabkan kelemahan serius seperti Cross-Site Scripting (XSS) dan kebocoran data, sekali gus menjejaskan privasi pengguna serta integriti sistem.

Memahami Kerentanan XSS

Cross-Site Scripting (XSS) berlaku apabila penyerang menyuntik skrip berniat jahat ke dalam aplikasi web yang dipercayai, atau dalam kes kita, ke dalam antara muka pengguna atau skrip kandungan sambungan anda.

Skrip ini boleh mencuri data sensitif, merampas sesi pengguna atau malah mengubah rupa laman web, semuanya dalam konteks keizinan sambungan anda.

Bahaya `innerHTML`

Salah satu punca XSS yang paling biasa dalam pembangunan web, dan oleh itu juga dalam sambungan, ialah penggunaan innerHTML dengan input yang tidak dipercayai.

Jika anda mengambil teks terus daripada pengguna (contohnya, daripada medan borang, parameter URL atau kandungan laman web) dan menyuntikkannya ke dalam DOM menggunakan innerHTML, apa-apa skrip yang disertakan akan dilaksanakan.

Manipulasi DOM yang Selamat: `textContent`

Untuk mencegah XSS apabila memaparkan teks biasa yang tidak dipercayai, sentiasa gunakan sifat textContent dan bukannya innerHTML.

textContent menganggap semua input sebagai teks mentah, lalu menghalang sebarang tag HTML atau skrip daripada dihuraikan dan dilaksanakan oleh pelayar. Inilah barisan pertahanan pertama anda.

Menggunakan `textContent` dalam Amalan

Cuba jalankan contoh JavaScript ringkas ini. Perhatikan bahawa textContent memaparkan skrip dengan selamat sebagai teks biasa, manakala innerHTML akan cuba melaksanakannya secara berbahaya.

const userInput = "<script>alert('XSS!');</script>";

// Simulate a DOM element
const divSafe = { textContent: '' };
const divUnsafe = { innerHTML: '' };

// Safe way: Using textContent
divSafe.textContent = userInput;
console.log("Safe (textContent):", divSafe.textContent);

// Unsafe way: Using innerHTML (DO NOT DO THIS!)
divUnsafe.innerHTML = userInput;
console.log("Unsafe (innerHTML):", divUnsafe.innerHTML);

Membersihkan HTML Apabila Diperlukan

Bagaimana jika anda benar-benar perlu membenarkan *sebahagian* HTML (seperti tebal atau condong) daripada input pengguna? Dalam kes ini, textContent tidak mencukupi.

Anda mesti menggunakan pustaka pembersihan HTML yang kukuh dan diselenggara dengan baik (contohnya, DOMPurify). Pustaka ini menghuraikan HTML, membuang tag dan atribut berniat jahat, kemudian mengembalikan HTML yang selamat. Jangan sekali-kali bina pembersih HTML sendiri.

Mengelakkan Pelaksanaan Kod Dinamik

Fungsi seperti eval(), new Function(), setTimeout(string) dan setInterval(string) melaksanakan kod JavaScript daripada rentetan.

Ini merupakan risiko keselamatan yang besar. Jika penyerang dapat mengawal hujah rentetan tersebut, mereka boleh melaksanakan kod sewenang-wenangnya dalam konteks sambungan anda dan berpotensi memintas langkah keselamatan lain.

Melindungi daripada Kebocoran Data

Kebocoran data berlaku apabila data pengguna yang sensitif terdedah kepada pihak ketiga yang tidak dibenarkan, sama ada secara tidak sengaja atau berniat jahat. Ini merupakan kebimbangan kritikal bagi sambungan.

Berhati-hatilah apabila menghantar data daripada sambungan anda ke pelayan luaran. Sentiasa sahkan destinasi, gunakan protokol selamat (HTTPS) dan sulitkan maklumat sensitif jika perlu.

Prinsip Keistimewaan Minimum

Apabila mengisytiharkan keizinan dalam sambungan manifest.json anda, sentiasa patuhi Prinsip Keistimewaan Minimum.

Minta hanya keizinan minimum mutlak yang diperlukan untuk kefungsian sambungan anda. Keizinan yang terlalu luas meningkatkan permukaan serangan dan kemungkinan kebocoran data jika sambungan anda terjejas.

Semakan Amalan Terbaik Keselamatan

Antara yang berikut, yang manakah merupakan amalan pengekodan selamat yang disyorkan untuk sambungan pelayar?

Imbas Kembali: Mengekalkan Keselamatan Sambungan

Anda telah mempelajari amalan pengekodan selamat yang penting untuk membina sambungan pelayar yang kukuh:

  • Bersihkan Semua Input: Gunakan textContent untuk teks biasa; gunakan pustaka kukuh seperti DOMPurify untuk HTML.
  • Elakkan Kod Dinamik: Jangan sekali-kali melaksanakan kod daripada rentetan yang tidak dipercayai menggunakan fungsi seperti eval().
  • Keistimewaan Minimum: Minta hanya keizinan penting yang diperlukan oleh sambungan anda.
  • Cegah Kebocoran Data: Berhati-hati apabila menghantar data pengguna, serta pastikan destinasi dan protokolnya selamat.

Dengan menggabungkan amalan ini, anda membina sambungan yang lebih boleh dipercayai serta melindungi privasi dan keselamatan pengguna.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
12
Pelajaran
48

Soalan Lazim

Adakah pelajaran “Amalan Pengekodan Selamat” percuma?

Ya — teks penuh “Amalan Pengekodan Selamat” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Pembangunan Sambungan Pelayar (Chrome & Edge), tingkat taraf kepada CoddyKit PRO. Kursus Pembangunan Sambungan Pelayar (Chrome & Edge) merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Amalan Pengekodan Selamat”?

Laksanakan prinsip keselamatan untuk mencegah kerentanan biasa seperti penskripan rentas tapak (XSS) dan kebocoran data. Anda berlatih Pembangunan Sambungan Pelayar (Chrome & Edge) menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Pembangunan Sambungan Pelayar (Chrome & Edge)?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Amalan Pengekodan Selamat” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) ini?

Ya. Setiap pelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Memahami Kebenaran Lanjutan
  2. Amalan Pengekodan Selamat
  3. Dasar Keselamatan Kandungan (CSP)
  4. Keizinan Pilihan dan Permintaan Masa Jalan
← Kembali ke Pembangunan Sambungan Pelayar (Chrome & Edge)