การโจมตี SVG Clickjacking สมัยใหม่ที่หลอกผู้ใช้และหลบเลี่ยงการแจ้งเตือน

 (lyra.horse)
2 คะแนน โดย GN⁺ 2025-12-07 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • เทคนิคการโจมตี clickjacking แบบใหม่ที่ใช้ SVG filter ถูกนำเสนอขึ้น โดยขยายการโจมตีแบบชักจูงให้คลิกแบบเดิมให้กลายเป็นการโจมตีเชิงโต้ตอบที่ซับซ้อนมากขึ้น
  • ได้ยืนยันแล้วว่า feColorMatrix , feDisplacementMap และ องค์ประกอบ filter ของ SVG อื่น ๆ สามารถทำงานบน cross-origin iframe ได้ ซึ่งเปิดโอกาสในการจัดการภาพและแยกข้อมูลได้
  • ด้วยการผสมผสานฟิลเตอร์ ทำให้สามารถ อ่านค่าพิกเซล, ดำเนินการตรรกะ, และควบคุม UI ตามเงื่อนไข ได้ จึงสามารถสร้างการโจมตี clickjacking หลายขั้นตอนหรือการชักชวนให้ป้อนข้อมูลได้
  • ในกรณีจริง การโจมตีช่องโหว่ Google Docs ได้รับความสำเร็จ ทำให้ผู้วิจัยได้รับรางวัลจาก Google VRP จำนวน $3133.70
  • เทคนิคนี้เผยให้เห็นพื้นที่โจมตีใหม่ในโมเดลความปลอดภัยของเบราว์เซอร์ และแสดงให้เห็นว่า การใช้ประโยชน์เชิงตรรกะจาก SVG filter สามารถก่อให้เกิดภัยคุกคามด้านความปลอดภัยได้

ภาพรวมของ SVG Clickjacking

  • clickjacking แบบเดิมเป็นโครงสร้างการโจมตีที่ซ้อน iframe เพื่อชักจูงให้ผู้ใช้คลิกสิ่งที่ไม่ตั้งใจ
  • SVG clickjacking แบบใหม่ใช้ SVG filter เพื่อให้เกิด การโต้ตอบที่ซับซ้อนและการรั่วไหลของข้อมูล ได้
  • ฟิลเตอร์อย่าง feColorMatrix และ feDisplacementMap สามารถนำไปใช้กับเอกสารข้ามต้นทาง (cross-origin) ทำให้สามารถจัดการเนื้อหาภายนอกได้ทางภาพได้

องค์ประกอบของ SVG Filter

  • องค์ประกอบฟิลเตอร์หลักประกอบด้วย <feImage> , <feFlood> , <feOffset> , <feDisplacementMap> , <feGaussianBlur> , <feTile> , <feMorphology> , <feBlend> , <feComposite> , <feColorMatrix> และอื่น ๆ
  • พวกมันรวมและปรับเปลี่ยนภาพอินพุตเพื่อสร้างภาพใหม่ และ สามารถเชื่อมต่อกันเป็นลูกโซ่ได้
  • การผสมผสานเหล่านี้ช่วยให้นักโจมตีสามารถออกแบบเอฟเฟกต์ภาพ การปิดบัง และการปรับแต่งสีได้อย่างอิสระ

ตัวอย่างการโจมตี

  • Captcha หลอก (fake captcha) : ใช้ feDisplacementMap เพื่อทำให้ข้อความเบี้ยวเบน และบังคับให้ผู้ใช้ป้อนรหัสสำคัญที่ผู้โจมตีต้องการ
  • การซ่อนข้อความสีเทา (grey text hiding) : ใช้ feComposite กับ feMorphology เพื่อลบข้อความแนะนำในช่องป้อนหรือข้อความแจ้งข้อผิดพลาด เพื่อชักชวนให้ผู้ใช้ใส่รหัสผ่านที่ผู้โจมตีกำหนด
  • การอ่านค่าพิกเซล (pixel reading) : ตรวจจับค่าสีของพิกเซลเฉพาะเพื่อควบคุมการทำงานของฟิลเตอร์ ช่วยสร้างการโจมตีเชิงไดนามิก เช่น การตรวจจับการคลิกปุ่ม, โฮเวอร์, และสถานะการป้อนข้อมูล

การดำเนินการตรรกะและการโจมตีแบบผสม

  • การใช้ร่วมกันของ feBlend และ feComposite ทำให้สามารถ สร้าง logic gate อย่างเช่น AND, OR, XOR, NOT ได้
  • ด้วยวิธีนี้ จึงสามารถสร้าง วงจรตรรกะแบบครบวงจรใน SVG filter และทำให้สถานการณ์ clickjacking หลายขั้นเป็นระบบอัตโนมัติได้
  • ตัวอย่างเช่น การโจมตีแอป ‘Securify’ แสดงโครงสร้างหลอกผู้ใช้ด้วยการควบคุมเชิงตรรกะหลายขั้น ตั้งแต่การเปิดกล่องโต้ตอบ การคลิกเช็กบ็อกซ์ จนถึงการคลิกปุ่ม

กรณีจริง: ช่องโหว่ Google Docs

  • ใน Google Docs หลังจากคลิกปุ่ม “Generate Document” ป๊อปอัปและช่องป้อนที่ปรากฏถูก ตรวจจับและจัดการด้วยตรรกะของ SVG filter
  • ระบบตรวจจับสถานะโฟกัสของช่องป้อน ข้อความสีเทา และหน้าจอโหลดแบบเรียลไทม์เพื่อควบคุมลำดับการโจมตี
  • การโจมตีนี้ถูกรายงานให้ Google และได้รับการจ่าย bug bounty เป็นเงิน $3133.70

การประยุกต์ใช้ QR Code

  • สามารถนำตรรกะการสร้าง QR code มาใช้ภายใน SVG filter เพื่อเข้ารหัสข้อมูลพิกเซลเป็น URL แล้วแสดงในรูปแบบ QR ได้
  • เมื่อผู้ใช้สแกน QR ข้อมูลจะถูกส่งไปยังเซิร์ฟเวอร์ที่ผู้โจมตีควบคุม
  • ใช้ feDisplacementMap ร่วมกับ การแก้ข้อผิดพลาด Reed–Solomon เพื่อสร้าง QR ที่สแกนได้จริง

ความเป็นไปได้ที่ขยายผลได้

  • การอ่านข้อความ การรั่วไหลข้อมูลผ่านการคลิก, และการแทรกเคอร์เซอร์เมาส์ปลอม ฯลฯ เป็นการประยุกต์ที่หลากหลาย
  • ความสามารถในการทำการโจมตีด้วยเพียง CSS/SVG โดยไม่มี JavaScript ทำให้เกิดความเป็นไปได้ในการหลบเลี่ยง CSP

ความสำคัญเชิงงานวิจัย

  • การโจมตี clickjacking เชิงตรรกะโดยอาศัย SVG filter เป็นแนวทางใหม่ที่งานวิจัยก่อนหน้าไม่ค่อยกล่าวถึง
  • งานวิจัยก่อนหน้าเคยพูดถึง SVG ในฐานะแผ่นหน้ากากเชิงสายตาเท่านั้น ในขณะที่งานวิจัยนี้พิสูจน์การ ประมวลผลตรรกะและการควบคุมโต้ตอบ ได้จริง
  • ผู้วิจัยระบุว่าควรพิจารณาเป็น คลาสช่องโหว่ใหม่ และเน้นความจำเป็นในการทบทวนโครงสร้างความปลอดภัยของเบราว์เซอร์

บทสรุป

  • งานศึกษานี้ถูกประเมินว่าเป็นกรณีแรกของการโจมตีด้านความปลอดภัยที่ใช้ SVG filter เหมือนเป็นภาษาการเขียนโปรแกรม
  • ผู้เขียนเตรียมเสนอผลการศึกษานี้ในการประชุม 39c3 ตอนปลายปี 2025 และ Disobey 2026
  • โพสต์นี้ถูกเขียนด้วย HTML/CSS/SVG เพียงอย่างเดียวขนาด 42kB โดยไม่มีรูปภาพหรือ JavaScript สะท้อนถึงความคิดสร้างสรรค์ของงานวิจัยด้านความปลอดภัยเชิงทดลอง

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2025-12-07
ความเห็นบน Hacker News

  • ถ้านักพัฒนาตั้งค่า X-Frame-Options header ให้ถูกต้อง ปัญหานี้ก็จะแก้ได้
    แต่ในความเป็นจริงคงลงเอยด้วยการไล่แก้ปัญหาความปลอดภัยไปพร้อมกับลบสเปก SVG ออกจากเบราว์เซอร์ไปครึ่งหนึ่งมากกว่า

    • ไม่ได้แก้ได้หมดเสียทีเดียว บางแอปพลิเคชัน (เช่น Google Docs) จำเป็นต้องใช้การทำ framing
      และการโจมตีแบบนี้ก็เกิดขึ้นได้ในเว็บที่ทำ HTML injection ได้แม้จะไม่ใช่ frame ก็ตาม
    • ใน SVG มี กับระเบิดด้านความปลอดภัย เยอะเกินไป โดยเฉพาะเมื่อเป็น SVG ที่ผู้ใช้ส่งเข้ามาและเชื่อถือไม่ได้ ทางที่ง่ายที่สุดคือปิดมันไปเลย

  • ฉันปิด SVG อยู่แล้วด้วยเหตุผลด้านความปลอดภัย
    แต่ช่วงนี้เริ่มรู้สึกว่าอาจต้อง ปิด CSS ด้วย เหมือนกัน
    อยากให้ CSS ยังคงเป็นแค่เครื่องมือสำหรับตกแต่งข้อความ แต่ตอนนี้มันกลายเป็นเหมือนภาษาโปรแกรมไปแล้ว เลยถูกพวกแฮกเกอร์หรือผู้ลงโฆษณาเอาไปใช้ในทางที่ผิดได้ง่าย

    • เห็นด้วยกับประโยคที่ว่า “น่าจะปล่อยให้ CSS เรียบง่ายไว้” แต่จริง ๆ แล้วการโจมตีแบบนี้ ทำได้ง่ายกว่ามากในช่วงปลายยุค 2000
      ตอนนี้แทบจะเป็นไปไม่ได้แล้ว
    • ฉันคิดว่าแทนที่จะทำให้เบราว์เซอร์พังเพื่อแลกกับความปลอดภัยที่เข้มขึ้น เอาข้อมูลสำคัญออกไปไว้นอกเบราว์เซอร์น่าจะดีกว่า
    • แก่นของปัญหาไม่ใช่ CSS แต่คือ iFrame ต่างหาก มันเป็นต้นตอของช่องโหว่ความปลอดภัยมาตั้งแต่ยุคแรกของเบราว์เซอร์
    • นอกจากเดโมนี้แล้วก็สงสัยว่ามีเหตุผลด้านความปลอดภัยอื่นอีกไหม เพราะบนแพลตฟอร์มส่วนใหญ่การโจมตีนี้ใช้ไม่ได้
    • นั่นเป็นการตอบสนองเกินเหตุ โอกาสที่จะโดนการโจมตีแบบนี้มีต่ำมาก และมันก็ทะลุ sandbox หรือ session cookie ไม่ได้ด้วย

  • ตอนดู “ตัวอย่างที่ตรวจจับว่าพิกเซลเป็นสีดำล้วนหรือไม่เพื่อเปิดหรือปิดฟิลเตอร์” ฉันงงไปหมดเลย
    ไม่เข้าใจว่าทำไม HTML/CSS ถึงซับซ้อนขนาดนี้
    มี <checkbox> กับ <label> ที่ซ่อนไว้ พอกดแล้ว checkbox ก็ toggle และ CSS ก็เปลี่ยนสไตล์ตามสถานะได้โดยไม่ต้องใช้อย่างอื่น
    ตัว SVG เองไม่ได้วาดอะไรจริง ๆ เลย แค่ประกาศฟิลเตอร์ไว้เท่านั้น
    โครงสร้างที่ใช้ <feTile> ตั้งสองตัวเพื่อแยกพื้นที่ tile กับพื้นที่ output ก็ดูประหลาดเหมือนกัน
    แล้ว element อย่าง <fake-frame> หรือ <art-frame> นี่มันคืออะไรกัน?

    • ฉันว่ารูปแบบนี้ เท่มากเลยนะ สามารถสร้างคอนเทนต์แบบ interactive ได้โดยไม่ต้องใช้ JavaScript
      การคลิก <label> แล้วทำให้ checkbox toggle เป็นพฤติกรรมพื้นฐานของ HTML อยู่แล้ว
      มันใช้ selector :has() ของ CSS เพื่อตรวจจับสถานะ
      <feTile> เป็น filter element เดี่ยว ใช้สำหรับ tile หรือ crop ภาพอินพุต
      <fake-frame> กับ <art-frame> เป็น custom element ที่นิยามขึ้นเอง
      ฉันเขียนเรื่องนี้ไว้ในบล็อกโพสต์แล้ว
    • จริง ๆ แล้วความสามารถส่วนใหญ่พวกนี้ไม่ได้ “ทันสมัย” อะไรนัก แต่เป็น สิ่งที่มีมาตั้งแต่ยุค 90
      การคลิก <label> แล้วโฟกัสย้ายไปยัง element ที่เกี่ยวข้องเป็นธรรมเนียมที่สืบทอดมาจากเดสก์ท็อป UI
      การเปลี่ยนสไตล์ตามสถานะของ checkbox ก็มีมาตั้งแต่สมัย Firefox 1 แล้ว
      การ embed SVG filter ลงใน HTML โดยตรงก็เป็นความสามารถเก่าแก่เช่นกัน
      พูดอีกอย่างคือ นี่ไม่ใช่ปัญหาของ HTML ใหม่ แต่เป็น การผสมกันของฟีเจอร์เก่า ๆ

  • เดโมนี้ทำให้นึกถึงการแฮ็ก Flash Player สมัยก่อน
    คล้ายกับวิธีที่หลอกให้ผู้ใช้ยอมอนุญาต system storage
    กราฟิกแบบเวกเตอร์นี่เหมือนเป็นสิ่งที่ควบคุมตัวเองไม่ได้จริง ๆ

  • SVG adder เหมือนงานศิลปะเลย เจ๋งมาก

    • เป็นเดโมที่ทรงพลังมาก วันนี้เพิ่งได้เรียนรู้ว่าเพื่อให้ Turing-complete ได้นั้น แค่ functional completeness อย่างเดียวไม่พอ แต่ต้องมี storage และการเข้าถึงแบบสุ่ม ด้วย
      ฉันอ้างอิงจากโพสต์บน Stack Overflow

  • บน Chrome Android ของฉัน (จริง ๆ คือเบราว์เซอร์ Kiwi) หน้าจอดูเพี้ยนหรือแสดงผลแปลก ๆ อาจเป็นเพราะ dark mode
    อยากรู้ว่าคนอื่นเป็นเหมือนกันไหม

    • บน Firefox ต้องปิด Dark Reader ก่อน ตัวอย่างถึงจะแสดงได้ถูกต้อง
    • ตัวอย่างเกี่ยวกับ QR จะพังเมื่อ อัตราการซูมไม่ใช่ 100%

  • บทความนี้ทำให้นึกถึงเดโมการคำนวณด้วย CSSที่เคยดูมาก่อน

  • งานนี้น่าประทับใจมาก ยังไม่รู้ว่าควรแก้อย่างไร แต่ จำเป็นต้องแก้ในเร็ว ๆ นี้

  • เป็นโพสต์ที่เจ๋งมาก อ่านเพลินตั้งแต่ต้นจนจบ