การควบคุม DOM อย่างปลอดภัยด้วย Sanitizer API

Sanitizer API ใหม่มีเป้าหมายเพื่อสร้างตัวประมวลผลที่มีประสิทธิภาพสำหรับสตริงที่กำหนดเองเพื่อแทรกลงในหน้าเว็บอย่างปลอดภัย

Jack J
Jack J

แอปพลิเคชันจัดการกับสตริงที่ไม่น่าเชื่อถืออยู่ตลอดเวลา แต่การแสดงผลเนื้อหานั้นอย่างปลอดภัยโดยเป็นส่วนหนึ่งของเอกสาร HTML อาจเป็นเรื่องยุ่งยาก หากไม่มีการดูแลที่เพียงพอ อาจเกิดข้อผิดพลาดโดยไม่ได้ตั้งใจสำหรับ cross-site Scripting (XSS) ซึ่งผู้โจมตีที่เป็นอันตรายอาจแสวงหาประโยชน์ได้

ข้อเสนอ Sanitizer API ใหม่นี้มีจุดประสงค์เพื่อสร้างตัวประมวลผลที่มีประสิทธิภาพสำหรับสตริงที่กำหนดเองเพื่อแทรกลงในหน้าเว็บอย่างปลอดภัย เพื่อลดความเสี่ยงดังกล่าว บทความนี้จะแนะนำ API และอธิบายการใช้งาน

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

การใช้ Escape กับอินพุตของผู้ใช้

เมื่อแทรกอินพุตของผู้ใช้ สตริงการค้นหา เนื้อหาคุกกี้ และอื่นๆ ลงใน DOM สตริงต้องได้รับการหลีกอย่างเหมาะสม โปรดระมัดระวังเป็นพิเศษในการดัดแปลง DOM ผ่าน .innerHTML เนื่องจากสตริงที่ไม่มีการหลบเป็นแหล่งที่มาของ XSS โดยทั่วไป

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

หากคุณกำหนดสัญลักษณ์พิเศษของ HTML เป็นอักขระหลีกในสตริงอินพุตด้านบนหรือขยายสตริงโดยใช้ .textContent ระบบจะไม่เรียกใช้ alert(0) อย่างไรก็ตาม เนื่องจาก <em> ที่ผู้ใช้เพิ่มจะขยายออกเป็นสตริงตามที่เป็นอยู่ด้วย คุณจึงใช้วิธีการนี้เพื่อเก็บการตกแต่งข้อความใน HTML ไว้ไม่ได้

วิธีที่ดีที่สุดคือการหลบเลี่ยง แต่ควรทำความสะอาด

การดูแลข้อมูลที่ได้จากผู้ใช้

ความแตกต่างระหว่างการหลบเลี่ยงและการดูแลสุขอนามัย

การหนีค่าหมายถึงการแทนที่อักขระ HTML พิเศษด้วยเอนทิตี HTML

การทำความสะอาดให้ง่ายขึ้นหมายถึงการนำส่วนที่เป็นอันตรายทางความหมาย (เช่น การทำงานของสคริปต์) ออกจากสตริง HTML

ตัวอย่าง

ในตัวอย่างก่อนหน้านี้ <img onerror> ทําให้ระบบเรียกใช้ตัวแฮนเดิลข้อผิดพลาด แต่หากนําตัวแฮนเดิล onerror ออก ก็สามารถขยายใน DOM ได้อย่างปลอดภัยโดยที่ <em> ยังคงอยู่

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

ในการกรองอย่างถูกต้อง คุณต้องแยกวิเคราะห์สตริงอินพุตเป็น HTML ละเว้นแท็กและแอตทริบิวต์ที่ถือว่าอันตราย และเก็บแท็กและแอตทริบิวต์ที่ไม่เป็นอันตรายไว้

ข้อกำหนด Sanitizer API ที่เสนอมีจุดประสงค์เพื่อให้บริการประมวลผลดังกล่าวเป็น API มาตรฐานสำหรับเบราว์เซอร์

Sanitizer API

Sanitizer API ใช้ดังนี้

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>

แต่ { sanitizer: new Sanitizer() } เป็นอาร์กิวเมนต์เริ่มต้น ตัวอย่างจะเป็นดังนี้

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

โปรดทราบว่า setHTML() ได้รับการกําหนดใน Element เนื่องจากเป็นเมธอดของ Element บริบทที่จะแยกวิเคราะห์จึงอธิบายได้เอง (ในกรณีนี้คือ <div>) ระบบจะแยกวิเคราะห์ภายในเพียงครั้งเดียว และขยายผลลัพธ์ไปยัง DOM โดยตรง

หากต้องการดูผลลัพธ์ของการดูและล้างข้อมูลเป็นสตริง ให้ใช้ .innerHTML จากผลลัพธ์ setHTML()

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

ปรับแต่งผ่านการกําหนดค่า

Sanitizer API ได้รับการกําหนดค่าไว้โดยค่าเริ่มต้นให้นําสตริงที่จะทริกเกอร์การเรียกใช้สคริปต์ออก อย่างไรก็ตาม คุณยังเพิ่มการปรับแต่งของคุณเองลงในกระบวนการล้างข้อมูลผ่านออบเจ็กต์การกำหนดค่าได้

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

ตัวเลือกต่อไปนี้จะระบุวิธีที่ผลลัพธ์การทำให้ปลอดภัยควรจัดการองค์ประกอบที่ระบุ

allowElements: ชื่อองค์ประกอบที่โปรแกรมป้องกันไวรัสควรเก็บไว้

blockElements: ชื่อองค์ประกอบที่โปรแกรมทำความสะอาดควรนำออก แต่เก็บองค์ประกอบย่อยไว้

dropElements: ชื่อองค์ประกอบที่โปรแกรมทำความสะอาดควรนำออกพร้อมกับองค์ประกอบย่อย

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>

นอกจากนี้ คุณยังควบคุมได้ว่าโปรแกรมสุขาภิบาลจะอนุญาตหรือปฏิเสธแอตทริบิวต์ที่ระบุด้วยตัวเลือกต่อไปนี้

  • allowAttributes
  • dropAttributes

พร็อพเพอร์ตี้ allowAttributes และ dropAttributes ต้องการรายการการจับคู่แอตทริบิวต์ ซึ่งเป็นออบเจ็กต์ที่มีคีย์เป็นชื่อแอตทริบิวต์ และค่าเป็นรายการองค์ประกอบเป้าหมายหรือไวลด์การ์ด *

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 คือตัวเลือกในการอนุญาตหรือปฏิเสธองค์ประกอบที่กำหนดเอง หากได้รับอนุญาต การกำหนดค่าอื่นๆ สำหรับองค์ประกอบและแอตทริบิวต์จะยังคงมีผล

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>

แพลตฟอร์ม API

การเปรียบเทียบกับ DomPurify

DOMPurify เป็นไลบรารีที่รู้จักกันดีซึ่งมีฟังก์ชันการทำงานด้านสุขอนามัย ความแตกต่างที่สำคัญระหว่าง Sanitizer API กับ DOMPurify คือ DOMPurify จะแสดงผลผลลัพธ์ของการทำความสะอาดเป็นสตริง ซึ่งคุณต้องเขียนลงในองค์ประกอบ DOM ผ่าน .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 สามารถใช้เป็นทางเลือกสำรองได้เมื่อไม่ได้ติดตั้งใช้งาน Sanitizer API ในเบราว์เซอร์

การใช้งาน DOMPurify มีข้อเสียอยู่ 2 อย่าง หากระบบแสดงผลสตริง ระบบจะแยกวิเคราะห์สตริงอินพุต 2 ครั้งโดย DOMPurify และ .innerHTML การแยกวิเคราะห์ 2 ครั้งนี้ทำให้เสียเวลาในการประมวลผล แต่ก็อาจทำให้เกิดช่องโหว่ที่น่าสนใจได้ในกรณีที่ผลลัพธ์ของการแยกวิเคราะห์ครั้งที่ 2 แตกต่างจากครั้งแรก

HTML ยังต้องได้รับการแยกวิเคราะห์บริบทด้วย เช่น <td> ใช้ได้กับ <table> แต่ไม่ใช้ได้กับ <div> เนื่องจาก DOMPurify.sanitize() ใช้สตริงเป็นอาร์กิวเมนต์เท่านั้น จึงต้องเดาบริบทการแยกวิเคราะห์

Sanitizer API ปรับปรุงแนวทางของ DOMPurify และออกแบบมาเพื่อลดความจําเป็นในการแยกวิเคราะห์ 2 ครั้ง และเพื่อชี้แจงบริบทการแยกวิเคราะห์

สถานะ API และการรองรับเบราว์เซอร์

Sanitizer API อยู่ระหว่างการพูดคุยในกระบวนการกำหนดมาตรฐาน และ Chrome กำลังอยู่ระหว่างการใช้งาน

ขั้นตอน สถานะ
1. สร้างคําอธิบาย เสร็จสมบูรณ์
2. สร้างฉบับร่างข้อกำหนด เสร็จสมบูรณ์
3. รวบรวมความคิดเห็นและปรับปรุงการออกแบบ เสร็จสมบูรณ์
4. ช่วงทดลองใช้จากต้นทางของ Chrome เสร็จสมบูรณ์
5. เปิดตัว Intent to Ship ใน M105

Mozilla: พิจารณาว่าข้อเสนอนี้ควรสร้างต้นแบบ และกำลังใช้งานอย่างจริงจัง

WebKit: ดูคำตอบในรายชื่ออีเมลของ WebKit

วิธีเปิดใช้ Sanitizer API

การเปิดใช้ผ่านตัวเลือก about://flags หรือ CLI

Chrome

Chrome กำลังอยู่ระหว่างการติดตั้งใช้งาน Sanitizer API ใน Chrome 93 ขึ้นไป คุณสามารถลองใช้ลักษณะการทำงานนี้ได้โดยเปิดใช้ Flag about://flags/#enable-experimental-web-platform-features ใน Chrome Canary และช่อง Dev เวอร์ชันเก่า คุณสามารถเปิดใช้ผ่าน --enable-blink-features=SanitizerAPI และลองใช้ได้เลย ดูวิธีการเรียกใช้ Chrome ด้วย Flag

Firefox

นอกจากนี้ Firefox ยังใช้ Sanitizer API เป็นฟีเจอร์ทดลองอีกด้วย หากต้องการเปิดใช้ ให้ตั้งค่า Flag dom.security.sanitizer.enabled เป็น true ใน about:config

การตรวจหาองค์ประกอบ

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

ความคิดเห็น

หากคุณลองใช้ API นี้แล้วและมีข้อเสนอแนะ เรายินดีรับฟัง แชร์ความคิดเห็นเกี่ยวกับปัญหา GitHub ของ Sanitizer API และพูดคุยกับผู้เขียนข้อกำหนดและผู้ที่สนใจ API นี้

หากพบข้อบกพร่องหรือลักษณะการทำงานที่ไม่คาดคิดในการใช้งาน Chrome ให้รายงานข้อบกพร่อง เลือกคอมโพเนนต์ Blink>SecurityFeature>SanitizerAPI แล้วแชร์รายละเอียดเพื่อช่วยให้ผู้ติดตั้งใช้งานติดตามปัญหาได้

สาธิต

หากต้องการดูการทำงานของ Sanitizer API ที่ Sanitizer API Playground โดย Mike West

ข้อมูลอ้างอิง


รูปภาพโดย Towfiqu barbhuiya ใน Unsplash