API HTML-in-Canvas ของ Chrome ก่อให้เกิดความกังวลด้านความปลอดภัยและการติดตามข้อมูลในหมู่นักพัฒนา

API HTML-in-Canvas ในระยะทดลองของ Chrome ได้เข้าสู่การทดสอบของนักพัฒนาแล้ว โดยสัญญาว่าจะแก้ไขปัญหาที่มีมานานเกี่ยวกับการแสดงผลเลย์เอาต์ข้อความที่ซับซ้อนในองค์ประกอบ canvas อย่างไรก็ตาม ข้อเสนอนี้ได้จุดประกายการอภิปรายอย่างรุนแรงในชุมชนนักพัฒนาเกี่ยวกับความเสี่ยงด้านความปลอดภัย ผลกระทบต่อความเป็นส่วนตัว และทิศทางเชิงปรัชญาของการพัฒนาเว็บ

API ใหม่นี้แนะนำสี่เมธอดหลัก ได้แก่ แอตทริบิวต์ layoutsubtree, drawElement(), texElement2D() และ setHitTestRegions() เครื่องมือเหล่านี้ช่วยให้นักพัฒนาสามารถแสดงผลเนื้อหา HTML ลงในองค์ประกอบ canvas ได้โดยตรง โดยแก้ไขจุดเจ็บปวดในด้านการเข้าถึง การทำให้เป็นสากล และประสิทธิภาพที่ได้รบกวนแอปพลิเคชันที่ใช้ canvas มานานหลายปี

ภาพรวมของ API Methods

• แอตทริบิวต์ layoutsubtree: เปิดใช้งานการจัดวางสำหรับองค์ประกอบลูกของ canvas
• CanvasRenderingContext2D.drawElement(element, x, y, options): แสดงผลองค์ประกอบ HTML ลงใน canvas 2D
• WebGLRenderingContext.texElement2D(element): แสดงผลองค์ประกอบ HTML ลงใน WebGL texture
• CanvasRenderingContext2D.setHitTestRegions(): แมปพื้นที่ canvas กับองค์ประกอบ HTML สำหรับการทดสอบการคลิก

ความกลัวด้านความปลอดภัยและการติดตามข้อมูลครองการอภิปราย

ความกังวลที่เร่งด่วนที่สุดในหมู่นักพัฒนาเน้นไปที่ความเสี่ยงจากการติดตามข้อมูลและช่องโหว่ด้านความปลอดภัย สมาชิกชุมชนหลายคนได้ชี้ให้เห็นว่าเอกสารความปลอดภัยของข้อเสนอนี้ยังไม่สมบูรณ์ โดยมีส่วนต่างๆ ที่ถูกทำเครื่องหมายว่า TODO: Expand on fingerprinting risks สิ่งนี้ได้ทำให้เกิดสัญญาณเตือนเกี่ยวกับการเร่งฟีเจอร์นี้สู่ตลาดโดยไม่มีการป้องกันความเป็นส่วนตัวที่เพียงพอ

ความกังวลเรื่องการติดตามข้อมูลมีความรุนแรงเป็นพิเศษเพราะ API อาจเปิดเผยข้อมูลที่ละเอียดอ่อนเกี่ยวกับระบบของผู้ใช้ ฟอนต์ และความสามารถในการแสดงผล นักพัฒนาคนหนึ่งได้สังเกตว่าฟีเจอร์ที่คล้ายกันถูกจำกัดใน Firefox สำหรับส่วนขยายเท่านั้น เนื่องจากความเสี่ยงด้านความปลอดภัยเหล่านี้เอง รวมถึงความเป็นไปได้ในการแสดงผลเนื้อหาที่ละเอียดอ่อนเช่นข้อมูลบัญชีธนาคารจาก iframe

ข้อจำกัดปัจจุบัน

• Cross-origin iframes ไม่สามารถแสดงผลได้
• ยังไม่รองรับ SVG foreignObject
• ไม่รองรับ Offscreen canvas contexts
• ไม่รองรับ Detached canvases
• การควบคุมความเป็นส่วนตัวยังอยู่ระหว่างการพัฒนา
• พฤติกรรม Canvas tainting อาจมีการเปลี่ยนแปลง

การอภิปรายเรื่อง Recursive Hell

ส่วนสำคัญของการอภิปรายชุมชนมุ่งเน้นไปที่สิ่งที่นักพัฒนาบางคนเรียกว่าลักษณะ recursive ของข้อเสนอนี้ นักวิจารณ์โต้แย้งว่าการใส่ HTML ภายใน canvas ภายใน HTML สร้างความซับซ้อนที่ไม่จำเป็นและปัญหาเชิงปรัชญากับสถาปัตยกรรมเว็บ

โครงสร้างข้อมูลในชีวิตจริงทุกอย่างที่ฉันพบเจอมีลักษณะเหมือนต้นไม้ มันจะง่ายที่สุดหากแค่ขอให้เบราว์เซอร์แสดงผลส่วนของ HTML ลงบน canvas หรือลงบนบิตแมปที่มองไม่เห็น เหมือนที่คุณสามารถทำได้กับ UI toolkit อื่นๆ ส่วนใหญ่

อย่างไรก็ตาม ผู้สนับสนุนโต้แย้งว่าการ recursion นี้มีอยู่แล้วในเทคโนโลยีเว็บ โดยชี้ไปที่ตัวอย่างเช่น HTML ใน SVG ใน HTML และโต้แย้งว่าฟีเจอร์นี้ตอบสนองความต้องการที่แท้จริงของนักพัฒนาสำหรับเลย์เอาต์ที่ซับซ้อนภายในแอปพลิเคชัน canvas

การเข้าถึง: คำสัญญาเทียบกับความเป็นจริง

แม้ว่าข้อเสนอจะอ้างว่าจะปรับปรุงการเข้าถึงโดยอนุญาตให้เนื้อหา canvas ตรงกับองค์ประกอบ DOM สำรอง นักพัฒนาหลายคนยังคงมีความสงสัย ความกังวลคือแอปพลิเคชันที่ใช้ canvas เป็นหลักโดยธรรมชาติไม่สามารถเข้าถึงบริการระดับระบบเช่นตัวตรวจการสะกดคำ พจนานุกรม หรือฟีเจอร์การเข้าถึงดั้งเดิม ทำให้นักพัฒนาต้องสร้างการใช้งานแบบกำหนดเองที่แตกต่างกันไปในแต่ละแอปพลิเคชัน

นักพัฒนาบางคนกังวลว่าสิ่งนี้อาจนำไปสู่การกลับไปสู่ปัญหายุค Flash ที่แต่ละแอปพลิเคชันที่ใช้ canvas จะมีอินเทอร์เฟซผู้ใช้และการใช้งานการเข้าถึงที่แตกต่างกันโดยสิ้นเชิง ทำให้เว็บมีความสอดคล้องน้อยลงและใช้งานยากขึ้นสำหรับคนพิการ

ข้อมูลการทดลองสำหรับนักพัฒนา

• เวอร์ชัน Chrome: Canary 138.0.7175.0 หรือใหม่กว่า
• เปิดใช้งาน Flag: --enable-blink-features=CanvasDrawElement
• สถานะ: อยู่ระหว่างการพัฒนาอย่างต่อเนื่องและ API อาจมีการเปลี่ยนแปลง
• หมายเหตุด้านความเป็นส่วนตัว: Canvas ไม่ถูกทำให้เสียหายไม่ว่าจะมีเนื้อหาใดก็ตาม (พฤติกรรมชั่วคราว)

ข้อจำกัดปัจจุบันและความคิดเห็นของนักพัฒนา

API ปัจจุบันมีข้อจำกัดที่ทราบแล้วหลายประการที่ได้กำหนดรูปแบบการอภิปรายของชุมชน iframe ข้ามต้นทางจะไม่แสดงผล ไม่มีการสนับสนุน SVG foreignObject และฟีเจอร์นี้ไม่ทำงานกับ canvas นอกหน้าจอหรือแยกออกมา ข้อจำกัดเหล่านี้ทำให้นักพัฒนาบางคนตั้งคำถามว่าการใช้งานปัจจุบันมีความพร้อมเพียงพอสำหรับการนำไปใช้อย่างแพร่หลายหรือไม่

นักพัฒนา Chrome กำลังแสวงหาความคิดเห็นเกี่ยวกับความเข้ากันได้ของเนื้อหา การสนับสนุนบริบทการแสดงผล และการปรับปรุงการเข้าถึงอย่างแข็งขัน ฟีเจอร์นี้สามารถทดสอบได้ใน Chrome Canary เวอร์ชันหลังจาก 138.0.7175.0 โดยใช้แฟล็ก --enable-blink-features=CanvasDrawElement แม้ว่านักพัฒนาจะได้รับการเตือนว่า API อาจเปลี่ยนแปลงอย่างมีนัยสำคัญระหว่างการพัฒนา

การอภิปรายสะท้อนความตึงเครียดที่กว้างขึ้นในการพัฒนาเว็บระหว่างความปรารถนาสำหรับความสามารถกราฟิกที่ทรงพลังและความจำเป็นในการรักษาความปลอดภัย การเข้าถึง และความเป็นส่วนตัวของผู้ใช้ ขณะที่ข้อเสนอดำเนินต่อไปผ่านกระบวนการพัฒนา การสร้างสมดุลระหว่างความกังวลที่แข่งขันกันเหล่านี้น่าจะเป็นตัวกำหนดความสำเร็จหรือความล้มเหลวในท้ายที่สุด

อ้างอิง: HTML-in-Canvas