Manipulasi DOM aman dengan Sanitizer API

Sanitizer API baru bertujuan untuk membuat prosesor yang andal agar string arbitrer dapat disisipkan dengan aman ke dalam halaman.

Jack J
Jack J
GitHub

Aplikasi selalu menangani string yang tidak tepercaya, tetapi merender konten tersebut dengan aman sebagai bagian dari dokumen HTML bisa jadi rumit. Tanpa kehati-hatian yang memadai, Anda dapat dengan mudah secara tidak sengaja menciptakan peluang untuk pembuatan skrip lintas situs (XSS) yang dapat dimanfaatkan oleh penyerang berbahaya.

Untuk mengurangi risiko tersebut, proposal Sanitizer API baru bertujuan untuk membuat prosesor yang andal agar string arbitrer dapat disisipkan dengan aman ke dalam halaman. Artikel ini memperkenalkan API, dan menjelaskan penggunaannya.

// Expanded Safely !!
$div.setHTML(`<em>hello world</em><img src="" onerror=alert(0)>`, new Sanitizer())

Mengekskresi input pengguna

Saat menyisipkan input pengguna, string kueri, konten cookie, dan sebagainya, ke dalam DOM, string harus di-escape dengan benar. Perhatian khusus harus diberikan pada manipulasi DOM melalui .innerHTML, dengan string yang tidak di-escape adalah sumber XSS yang umum.

const user_input = `<em>hello world</em><img src="" onerror=alert(0)>`
$div.innerHTML = user_input

Jika Anda meng-escape karakter khusus HTML dalam string input di atas atau memperluasnya menggunakan .textContent, alert(0) tidak akan dieksekusi. Namun, karena <em> yang ditambahkan oleh pengguna juga diperluas sebagai string apa adanya, metode ini tidak dapat digunakan untuk mempertahankan dekorasi teks dalam HTML.

Hal terbaik yang harus dilakukan di sini bukanlah escape, tetapi sanitasi.

Mensterilkan input pengguna

Perbedaan antara escape dan pembersihan

Escaping mengacu pada penggantian karakter HTML khusus dengan Entity HTML.

Pembersihan mengacu pada penghapusan bagian yang berbahaya secara semantik (seperti eksekusi skrip) dari string HTML.

Contoh

Pada contoh sebelumnya, <img onerror> menyebabkan pengendali error dijalankan, tetapi jika pengendali onerror dihapus, Anda dapat memperluasnya dengan aman di DOM tanpa mengubah <em>.

// XSS 🧨
$div.innerHTML = `<em>hello world</em><img src="" onerror=alert(0)>`
// Sanitized ⛑
$div.innerHTML = `<em>hello world</em><img src="">`

Untuk melakukan pembersihan dengan benar, Anda harus mengurai string input sebagai HTML, menghapus tag dan atribut yang dianggap berbahaya, dan mempertahankan tag dan atribut yang tidak berbahaya.

Spesifikasi Sanitizer API yang diusulkan bertujuan untuk menyediakan pemrosesan tersebut sebagai API standar untuk browser.

Sanitizer API

Sanitizer API digunakan dengan cara berikut:

const $div = document.querySelector('div')
const user_input = `<em>hello world</em><img src="" onerror=alert(0)>`
$div.setHTML(user_input, { sanitizer: new Sanitizer() }) // <div><em>hello world</em><img src=""></div>

Namun, { sanitizer: new Sanitizer() } adalah argumen default. Jadi, tampilannya bisa seperti di bawah.

$div.setHTML(user_input) // <div><em>hello world</em><img src=""></div>

Perlu diperhatikan bahwa setHTML() ditentukan di Element. Sebagai metode Element, konteks yang akan diuraikan sudah jelas (<div> dalam hal ini), penguraian dilakukan sekali secara internal, dan hasilnya langsung diperluas ke dalam DOM.

Untuk mendapatkan hasil sanitasi sebagai string, Anda dapat menggunakan .innerHTML dari hasil setHTML().

const $div = document.createElement('div')
$div.setHTML(user_input)
$div.innerHTML // <em>hello world</em><img src="">

Menyesuaikan melalui konfigurasi

Sanitizer API dikonfigurasi secara default untuk menghapus string yang akan memicu eksekusi skrip. Namun, Anda juga dapat menambahkan penyesuaian Anda sendiri ke proses pembersihan melalui objek konfigurasi.

const config = {
  allowElements: [],
  blockElements: [],
  dropElements: [],
  allowAttributes: {},
  dropAttributes: {},
  allowCustomElements: true,
  allowComments: true
};
// sanitized result is customized by configuration
new Sanitizer(config)

Opsi berikut menentukan cara hasil pembersihan harus memperlakukan elemen yang ditentukan.

allowElements: Nama elemen yang harus dipertahankan oleh pembersih.

blockElements: Nama elemen yang harus dihapus oleh pembersih, sambil mempertahankan turunannya.

dropElements: Nama elemen yang harus dihapus oleh pembersih, beserta turunannya.

const str = `hello <b><i>world</i></b>`

$div.setHTML(str)
// <div>hello <b><i>world</i></b></div>

$div.setHTML(str, { sanitizer: new Sanitizer({allowElements: [ "b" ]}) })
// <div>hello <b>world</b></div>

$div.setHTML(str, { sanitizer: new Sanitizer({blockElements: [ "b" ]}) })
// <div>hello <i>world</i></div>

$div.setHTML(str, { sanitizer: new Sanitizer({allowElements: []}) })
// <div>hello world</div>

Anda juga dapat mengontrol apakah pembersih akan mengizinkan atau menolak atribut yang ditentukan dengan opsi berikut:

  • allowAttributes
  • dropAttributes

Properti allowAttributes dan dropAttributes mengharapkan daftar kecocokan atribut—objek yang kuncinya adalah nama atribut, dan nilainya adalah daftar elemen target atau karakter pengganti *.

const str = `<span id=foo class=bar style="color: red">hello</span>`

$div.setHTML(str)
// <div><span id="foo" class="bar" style="color: red">hello</span></div>

$div.setHTML(str, { sanitizer: new Sanitizer({allowAttributes: {"style": ["span"]}}) })
// <div><span style="color: red">hello</span></div>

$div.setHTML(str, { sanitizer: new Sanitizer({allowAttributes: {"style": ["p"]}}) })
// <div><span>hello</span></div>

$div.setHTML(str, { sanitizer: new Sanitizer({allowAttributes: {"style": ["*"]}}) })
// <div><span style="color: red">hello</span></div>

$div.setHTML(str, { sanitizer: new Sanitizer({dropAttributes: {"id": ["span"]}}) })
// <div><span class="bar" style="color: red">hello</span></div>

$div.setHTML(str, { sanitizer: new Sanitizer({allowAttributes: {}}) })
// <div>hello</div>

allowCustomElements adalah opsi untuk mengizinkan atau menolak elemen kustom. Jika diizinkan, konfigurasi lain untuk elemen dan atribut tetap berlaku.

const str = `<custom-elem>hello</custom-elem>`

$div.setHTML(str)
// <div></div>

const sanitizer = new Sanitizer({
  allowCustomElements: true,
  allowElements: ["div", "custom-elem"]
})
$div.setHTML(str, { sanitizer })
// <div><custom-elem>hello</custom-elem></div>

Platform API

Perbandingan dengan DomPurify

DOMPurify adalah library terkenal yang menawarkan fungsi pembersihan. Perbedaan utama antara Sanitizer API dan DOMPurify adalah DOMPurify menampilkan hasil pembersihan sebagai string, yang perlu Anda tulis ke elemen DOM melalui .innerHTML.

const user_input = `<em>hello world</em><img src="" onerror=alert(0)>`
const sanitized = DOMPurify.sanitize(user_input)
$div.innerHTML = sanitized
// `<em>hello world</em><img src="">`

DOMPurify dapat berfungsi sebagai pengganti saat Sanitizer API tidak diterapkan di browser.

Implementasi DOMPurify memiliki beberapa kelemahan. Jika string ditampilkan, string input akan diuraikan dua kali, oleh DOMPurify dan .innerHTML. Pemrosesan ganda ini membuang-buang waktu pemrosesan, tetapi juga dapat menyebabkan kerentanan menarik yang disebabkan oleh kasus saat hasil penguraian kedua berbeda dengan yang pertama.

HTML juga memerlukan konteks untuk diuraikan. Misalnya, <td> masuk akal di <table>, tetapi tidak di <div>. Karena DOMPurify.sanitize() hanya menggunakan string sebagai argumen, konteks penguraian harus ditebak.

Sanitizer API meningkatkan pendekatan DOMPurify dan dirancang untuk menghilangkan kebutuhan penguraian ganda dan memperjelas konteks penguraian.

Status API dan dukungan browser

Sanitizer API sedang dibahas dalam proses standardisasi dan Chrome sedang dalam proses menerapkannya.

Langkah Status
1. Membuat penjelasan Selesai
2. Membuat draf spesifikasi Selesai
3. Mengumpulkan masukan dan melakukan iterasi pada desain Selesai
4. Uji coba origin Chrome Selesai
5. Luncurkan Intent to Ship di M105

Mozilla: Menganggap proposal ini layak dibuat prototipenya, dan secara aktif menerapkannya.

WebKit: Lihat respons di mailing list WebKit.

Cara mengaktifkan Sanitizer API

Mengaktifkan melalui opsi about://flags atau CLI

Chrome

Chrome sedang dalam proses menerapkan Sanitizer API. Di Chrome 93 atau yang lebih baru, Anda dapat mencoba perilaku ini dengan mengaktifkan tanda about://flags/#enable-experimental-web-platform-features. Di versi Chrome Canary dan saluran Dev sebelumnya, Anda dapat mengaktifkannya melalui --enable-blink-features=SanitizerAPI dan mencobanya sekarang. Lihat petunjuk cara menjalankan Chrome dengan flag.

Firefox

Firefox juga menerapkan Sanitizer API sebagai fitur eksperimental. Untuk mengaktifkannya, tetapkan tanda dom.security.sanitizer.enabled ke true di about:config.

Deteksi fitur

if (window.Sanitizer) {
  // Sanitizer API is enabled
}

Masukan

Jika Anda mencoba API ini dan memiliki beberapa masukan, kami ingin mendengarnya. Bagikan pendapat Anda tentang masalah GitHub Sanitizer API dan diskusikan dengan penulis spesifikasi dan orang-orang yang tertarik dengan API ini.

Jika Anda menemukan bug atau perilaku tak terduga dalam penerapan Chrome, laporkan bug untuk melaporkannya. Pilih komponen Blink>SecurityFeature>SanitizerAPI dan bagikan detail untuk membantu pelaksana melacak masalah.

Demo

Untuk melihat cara kerja Sanitizer API, lihat Sanitizer API Playground oleh Mike West:

Referensi

Foto oleh Towfiqu barbhuiya di Unsplash.