HTMX ไม่ค่อยเข้ากันได้ดีกับ CSP (Content Security Policy)

• HTMX เป็นเฟรมเวิร์ก JavaScript ที่ช่วยให้สามารถแทนที่องค์ประกอบ DOM ด้วยข้อมูลแบบไดนามิกผ่านคำขอ AJAX ได้
• เนื่องจาก HTMX เพิ่มพฤติกรรมแบบไดนามิกให้กับหน้าเว็บด้วยการใช้แท็ก HTML ปกติที่มีแอตทริบิวต์แบบกำหนดเอง จึงทำให้เพิ่มความปลอดภัยต่อการโจมตีแบบ Cross-Site Scripting (XSS) ได้ยาก
• โดยทั่วไปแล้ว สามารถใช้ Content Security Policy (CSP) เพื่อจำกัด JavaScript ที่จะถูกรันได้
• แต่การตั้งค่า CSP ให้ยังป้องกัน Cross-Site Scripting ได้ในขณะที่ HTMX ยังทำงานต่อไปนั้นทำได้ยาก

การโหลด Fragment อันตราย

• หนึ่งในวิธีการโจมตีผ่าน HTMX คือการส่งคำขอไปยังโฮสต์ที่เป็นอันตราย
• HTMX จะดึง HTML fragment ที่อาจมี JavaScript รวมอยู่ด้วย แล้วนำไปวางบนหน้าเว็บ
• สิ่งนี้สามารถถูกใช้เพื่อโหลดสคริปต์อันตรายได้ โดยกระตุ้นให้มีการส่งคำขอไปยังโดเมนที่ไม่ใช่โดเมนของเว็บแอปพลิเคชัน

eval ที่ไม่ปลอดภัย

• HTMX สร้างและรันโค้ดแบบไดนามิก
• ฟีเจอร์ของ HTMX ต่อไปนี้ทำสิ่งนี้: trigger filters, แอตทริบิวต์ hx-on, และ hx-vals หรือ hx-headers ที่มีคำนำหน้า js:/javascript:
• เพื่อให้ฟีเจอร์เหล่านี้ทำงานได้ แอปพลิเคชันต้องใช้ตัวเลือก CSP unsafe-eval เพื่ออนุญาตการประเมินโค้ดแบบไดนามิก
• แต่เมื่ออนุญาต unsafe-eval ก็สามารถใช้ฟีเจอร์ของ HTMX เพื่อฉีด JavaScript ได้ทันที

ปิดใช้งาน HTMX ด้วย hx-disable

• สามารถใช้แอตทริบิวต์ hx-disable เพื่อปิดการทำงานของฟีเจอร์ HTMX ในบางส่วนของหน้าเว็บได้
• เอกสารระบุว่าสิ่งนี้ช่วยเพิ่มความปลอดภัยเพิ่มเติมได้
• แต่สามารถหลบเลี่ยงได้ง่าย: ปิดแท็ก div ด้วย `

` แล้วแทรก payload ไว้นอกองค์ประกอบที่มีแอตทริบิวต์ hx-disable

nonce สำหรับ inline script

• การใช้ nonce ใน CSP เป็นวิธีที่ปลอดภัยที่สุดในการป้องกันการฉีดสคริปต์
• แอปพลิเคชันจะสร้าง nonce แบบสุ่มและเพิ่มลงในสคริปต์ทั้งหมดที่เป็นส่วนหนึ่งของแอปพลิเคชัน
• สคริปต์ที่ผู้โจมตีฉีดเข้ามาจะไม่มี nonce ที่ถูกต้อง จึงไม่ถูกรัน
• HTMX มีฟีเจอร์ที่เพิ่ม nonce ที่ถูกต้องให้กับ inline script ที่ดึงมาโดยอัตโนมัติ
• แม้จะสะดวก แต่สิ่งนี้ทำลายโมเดลความปลอดภัยของ CSP ที่ใช้ nonce อย่างสิ้นเชิง
• ด้วยการเพิ่ม nonce ที่ถูกต้องให้กับทุกสคริปต์ที่พบ HTMX จึงบ่อนทำลายความปลอดภัยที่ nonce มอบให้อย่างสมบูรณ์
• การเพิ่ม nonce อัตโนมัติทำผ่านพารามิเตอร์ htmx.config.inlineScriptNonce

เมตาแท็กสำหรับการตั้งค่า

• HTMX มีตัวเลือกการตั้งค่าหลายอย่างที่สามารถกำหนดได้ด้วยแท็ก ``
• ในการโจมตี XSS สามารถฉีดแท็ก `` ที่เหมาะสมเพื่อแก้ไขการตั้งค่าของ HTMX ได้
• ตัวอย่างเช่น ด้านบนได้กล่าวว่าแอตทริบิวต์ hx-disable ใช้ปิดการประมวลผลของ HTMX
• แต่สามารถเปลี่ยนชื่อแอตทริบิวต์นั้นได้ในค่าตั้งค่า
• หากเปลี่ยนจาก hx-disable เป็นอย่างอื่น ก็จะทำให้ฟังก์ชัน hx-disable ใช้งานไม่ได้

บทสรุป

• การใช้ HTMX บนเว็บไซต์จะเพิ่มพื้นที่การโจมตีจากการฉีด HTML อย่างมาก
• แม้จะสามารถใช้ Content Security Policy เพื่อลดความเสี่ยงของ XSS ได้ แต่ก็เป็นไปไม่ได้ที่จะใช้ฟีเจอร์ทั้งหมดของ HTMX พร้อมกับรักษาความปลอดภัยจากการฉีดไว้ได้

[galadbran]

ก็น่าจะมีทั้งข้อโต้แย้งต่อบทความนี้หรือไม่ก็การพูดถึงวิธีใช้งานอย่างปลอดภัยอยู่บ้างเหมือนกันนะ...

[xguru]

HTMX เข้ากันได้ไม่ดีกับ CSP (Content Security Policy)

รีลีส Htmx 2.0.0
htmx - high power tools for HTML