API HTML-in-Canvas thử nghiệm của Chrome đã bước vào giai đoạn thử nghiệm dành cho lập trình viên, hứa hẹn giải quyết các vấn đề tồn tại lâu nay với việc render các bố cục văn bản phức tạp trong các phần tử canvas. Tuy nhiên, đề xuất này đã châm ngòi cho những cuộc thảo luận sôi nổi trong cộng đồng lập trình viên về rủi ro bảo mật, tác động đến quyền riêng tư và hướng phát triển triết lý của web development.
API mới giới thiệu bốn phương thức chính: thuộc tính layoutsubtree, drawElement(), texElement2D(), và setHitTestRegions(). Những công cụ này cho phép lập trình viên render nội dung HTML trực tiếp vào các phần tử canvas, giải quyết những điểm yếu trong khả năng tiếp cận, quốc tế hóa và hiệu suất đã gây khó khăn cho các ứng dụng dựa trên canvas trong nhiều năm qua.
Tổng quan về các Phương thức API
- Thuộc tính
layoutsubtree: Kích hoạt layout cho các phần tử con của canvas CanvasRenderingContext2D.drawElement(element, x, y, options): Render phần tử HTML vào canvas 2DWebGLRenderingContext.texElement2D(element): Render phần tử HTML vào texture WebGLCanvasRenderingContext2D.setHitTestRegions(): Ánh xạ các vùng canvas tới các phần tử HTML để thực hiện hit testing
Lo ngại về bảo mật và fingerprinting chiếm ưu thế trong thảo luận
Mối quan tâm cấp bách nhất trong cộng đồng lập trình viên tập trung vào rủi ro fingerprinting và các lỗ hổng bảo mật. Nhiều thành viên cộng đồng đã chỉ ra rằng tài liệu bảo mật của đề xuất vẫn chưa hoàn thiện, với các phần được đánh dấu là TODO: Expand on fingerprinting risks. Điều này đã làm dấy lên cảnh báo về việc đẩy nhanh tính năng ra thị trường mà không có các biện pháp bảo vệ quyền riêng tư đầy đủ.
Mối quan tâm về fingerprinting đặc biệt nghiêm trọng vì API có thể tiềm ẩn việc tiết lộ thông tin nhạy cảm về hệ thống, font chữ và khả năng render của người dùng. Một lập trình viên đã lưu ý rằng các tính năng tương tự đã bị hạn chế trong Firefox chỉ dành cho extension do chính những rủi ro bảo mật này, bao gồm khả năng render nội dung nhạy cảm như thông tin tài khoản ngân hàng từ iframe.
Hạn chế hiện tại
- Các iframe cross-origin không được hiển thị
- Hỗ trợ SVG foreignObject chưa hoạt động
- Không hỗ trợ các ngữ cảnh canvas ngoài màn hình
- Không hỗ trợ các canvas bị tách rời
- Các điều khiển bảo mật vẫn đang trong quá trình phát triển
- Hành vi làm nhiễu canvas có thể thay đổi
Cuộc tranh luận về Recursive Hell
Một phần đáng kể trong thảo luận cộng đồng đã tập trung vào cái mà một số lập trình viên gọi là tính chất đệ quy của đề xuất. Những người chỉ trích cho rằng việc đặt HTML bên trong canvas bên trong HTML tạo ra sự phức tạp không cần thiết và các vấn đề triết lý với kiến trúc web.
Mọi cấu trúc dữ liệu thực tế mà tôi gặp phải đều có dạng cây. Sẽ dễ dàng nhất nếu chỉ yêu cầu trình duyệt render một đoạn HTML lên canvas, hoặc lên một bitmap vô hình nào đó, giống như bạn có thể làm với hầu hết các bộ công cụ UI khác.
Tuy nhiên, những người ủng hộ phản bác rằng sự đệ quy này đã tồn tại trong các công nghệ web, chỉ ra các ví dụ như HTML trong SVG trong HTML, và lập luận rằng tính năng này giải quyết nhu cầu thực sự của lập trình viên đối với các bố cục phức tạp trong các ứng dụng canvas.
Khả năng tiếp cận: Lời hứa so với thực tế
Trong khi đề xuất tuyên bố cải thiện khả năng tiếp cận bằng cách cho phép nội dung canvas khớp với các phần tử DOM dự phòng, nhiều lập trình viên vẫn hoài nghi. Mối quan tâm là các ứng dụng ưu tiên canvas về bản chất không thể truy cập các dịch vụ cấp hệ thống như trình kiểm tra chính tả, từ điển hoặc các tính năng tiếp cận gốc, buộc lập trình viên phải tạo ra các triển khai tùy chỉnh khác nhau giữa các ứng dụng.
Một số lập trình viên lo ngại điều này có thể dẫn đến việc quay trở lại các vấn đề thời kỳ Flash, khi mỗi ứng dụng dựa trên canvas sẽ có giao diện người dùng và triển khai khả năng tiếp cận hoàn toàn khác nhau, khiến web kém nhất quán hơn và khó sử dụng hơn đối với người khuyết tật.
Thông tin Thử nghiệm Dành cho Nhà phát triển
- Phiên bản Chrome: Canary 138.0.7175.0 hoặc mới hơn
- Kích hoạt Flag:
--enable-blink-features=CanvasDrawElement - Trạng thái: Đang trong quá trình phát triển tích cực với khả năng thay đổi API
- Lưu ý về Quyền riêng tư: Canvas không bị nhiễm bẩn bất kể nội dung (hành vi tạm thời)
Hạn chế hiện tại và phản hồi từ lập trình viên
API hiện tại có một số hạn chế đã biết đã định hình các cuộc thảo luận cộng đồng. Các iframe cross-origin sẽ không render, thiếu hỗ trợ SVG foreignObject, và tính năng không hoạt động với canvas offscreen hoặc detached. Những hạn chế này đã khiến một số lập trình viên đặt câu hỏi liệu triển khai hiện tại có đủ trưởng thành để áp dụng rộng rãi hay không.
Các lập trình viên Chrome đang tích cực tìm kiếm phản hồi về khả năng tương thích nội dung, hỗ trợ ngữ cảnh render và cải thiện khả năng tiếp cận. Tính năng có thể được thử nghiệm trong các phiên bản Chrome Canary muộn hơn 138.0.7175.0 bằng cách sử dụng cờ --enable-blink-features=CanvasDrawElement, mặc dù lập trình viên được cảnh báo rằng API có thể thay đổi đáng kể trong quá trình phát triển.
Cuộc tranh luận phản ánh những căng thẳng rộng lớn hơn trong phát triển web giữa mong muốn có khả năng đồ họa mạnh mẽ và nhu cầu duy trì bảo mật, khả năng tiếp cận và quyền riêng tư của người dùng. Khi đề xuất tiếp tục qua quá trình phát triển, việc cân bằng những mối quan tâm cạnh tranh này có thể sẽ quyết định thành công hoặc thất bại cuối cùng của nó.
Tham khảo: HTML-in-Canvas