Apa Itu Encoding Entitas HTML?

Encoding entitas HTML adalah teknik yang menggantikan karakter khusus dalam HTML dengan referensi entitas yang sesuai. Saat Anda menulis HTML, karakter tertentu memiliki arti khusus: < memulai tag, > mengakhiri tag, & memulai entitas, dan " serta ' membatasi nilai atribut. Jika Anda ingin menampilkan karakter-karakter ini secara literal di halaman web tanpa diartikan sebagai kode HTML, Anda harus menggunakan encoding entitas.

Browser merender referensi entitas sebagai karakter yang sesuai tanpa menafsirkannya sebagai markup. Mekanisme ini fundamental dalam pengembangan web, memainkan peran penting dalam tampilan konten dan keamanan. Tanpa encoding entitas, setiap tanda kurung sudut dalam konten buatan pengguna akan diperlakukan sebagai HTML, berpotensi merusak tata letak halaman atau menciptakan kerentanan keamanan yang parah.

Mengapa Encoding Entitas HTML Penting

Encoding entitas HTML memiliki dua tujuan utama: rendering karakter khusus yang benar dan pencegahan serangan cross-site scripting (XSS). Saat Anda menggunakan entitas seperti < alih-alih <, browser menampilkan tanda kurang-dari daripada menafsirkannya sebagai awal dari tag HTML.

Skenario paling umum di mana ini penting adalah konten buatan pengguna. Jika aplikasi Anda menerima komentar, posting forum, atau deskripsi profil, Anda harus meng-encode output sebelum merendernya di HTML. Tanpa encoding, pengguna dapat mengirimkan <script>alert('xss')</script> dan browser akan menjalankannya sebagai JavaScript, memberikan penyerang kendali atas apa yang berjalan di browser pengunjung Anda.

Referensi Entitas HTML Umum

Cara Kerja Encoding

Ketika parser HTML menemukan <, ia mengenali & sebagai awal dari referensi entitas. Kemudian membaca nama entitas lt dan berakhir pada titik koma. Parser mencari lt di tabel entitasnya dan mengganti karakter yang sesuai < dalam output yang dirender.

Referensi karakter numerik bekerja dengan cara yang sama tetapi menggunakan nilai desimal (<) atau heksadesimal (<). Parser mengonversi nilai numerik ke titik kode Unicode yang sesuai. Referensi numerik dapat mewakili karakter Unicode apa pun, sementara entitas bernama hanya mencakup subset karakter yang sering digunakan.

Encoding Input Pengguna

Aturan terpenting dalam pengembangan web adalah meng-encode semua konten buatan pengguna sebelum merendernya di HTML. Ini dikenal sebagai contextual output encoding dan harus diterapkan pada titik di mana data meninggalkan aplikasi Anda dan memasuki konteks HTML.

Contoh PHP

$userInput = '<script>alert("xss")</script>';
$safe = htmlspecialchars($userInput, ENT_QUOTES | ENT_HTML5, 'UTF-8');
echo $safe;
// Output: &lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;

Contoh JavaScript

function encodeHtml(str) {
  const div = document.createElement('div');
  div.appendChild(document.createTextNode(str));
  return div.innerHTML;
}

const userInput = '<script>alert("xss")</script>';
console.log(encodeHtml(userInput));
// Output: &lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;

Contoh Python

import html

user_input = '<script>alert("xss")</script>'
safe = html.escape(user_input, quote=True)
print(safe)
# Output: &lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;

Contoh Ruby

require 'erb'

user_input = '<script>alert("xss")</script>'
safe = ERB::Util.html_escape(user_input)
puts safe
# Output: &lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;

Konteks Encoding

Encoding HTML tidak bersifat satu-ukuran-untuk-semua. Konteks yang berbeda dalam dokumen HTML memerlukan strategi encoding yang berbeda.

Konteks tubuh HTML — konten di antara tag seperti <div>konten</div>. Encode semua lima karakter: <, >, &, ", '.

Konteks atribut HTML — nilai dalam atribut seperti <div class="value">. Encode lima karakter yang sama, tetapi perhatikan tanda kutip karena mereka membatasi nilai atribut.

Konteks URL — URL dalam atribut href atau src. Gunakan URL encoding (%20 untuk spasi) daripada encoding entitas HTML.

Konteks JavaScript — data yang disematkan dalam blok <script>. Gunakan JavaScript string escaping (\x3C untuk <) daripada encoding entitas HTML.

Alat Online

Alat HTML Entity Encoder & Decoder di Help2Code memudahkan encoding dan decoding entitas HTML. Tempel teks Anda, pilih mode encode atau decode, dan salin hasilnya dengan satu klik. Ini adalah cara tercepat untuk mengonversi karakter khusus ketika Anda tidak sedang menulis kode produksi.

Keamanan: Mencegah XSS

Cross-site scripting tetap menjadi salah satu kerentanan keamanan web yang paling umum. Pertahanan utamanya adalah output encoding yang tepat. Setiap framework menyertakan fungsi encoding bawaan: Blade di Laravel menggunakan {{ $var }} yang secara otomatis meng-encode output, Twig menggunakan {{ var|e('html') }}, dan React secara otomatis meloloskan ekspresi JSX.

Kesalahan pencegahan XSS yang paling umum adalah meng-encode data di titik yang salah dalam pipeline Anda. Selalu encode di lapisan output, tepat sebelum data dirender. Jika Anda meng-encode data saat disimpan di database, Anda berisiko melakukan double-encoding atau meng-encode data yang akan digunakan dalam konteks non-HTML seperti API JSON atau template email.

Kesimpulan

Encoding entitas HTML adalah keterampilan fundamental bagi setiap pengembang web. Ini memastikan karakter khusus ditampilkan dengan benar dan melindungi pengguna Anda dari serangan XSS. Aturan utamanya sederhana: encode semua konten buatan pengguna sebelum merendernya di HTML. Gunakan alat HTML Entity Encoder & Decoder untuk konversi cepat, dan andalkan encoding bawaan framework Anda untuk kode produksi.