Công cụ dành cho nhà phát triển · HTML WYSIWYG trình chỉnh sửa
Từ DOM đến đánh dấu: Cách tuần tự hóa bên trongHTML định hình HTML mà bạn nhận được
· Cách thức hoạt động
html html-entities developer-workflow
Giải thích các quy tắc mà trình duyệt tuân theo khi chuyển cây DOM thành chuỗi HTML, từ thoát và thực thể đến làm trống các phần tử và trích dẫn thuộc tính cũng như lý do đầu ra của trình soạn thảo trông như vậy.
Tại sao <br> lại xuất hiện dưới dạng <br /> trong chất khử trùng này
Một đoạn nguồn chứa `<br>` để lại chất khử trùng này dưới dạng `<br />`. Kết quả đó không phải là bằng chứng cho thấy mọi trình duyệt đều tuần tự hóa HTML bằng dấu gạch chéo. Đó là sự lựa chọn có chủ ý trong trình ghi lại chuỗi của ToolAcre, có nhánh phần tử void phát ra dấu cách và dấu gạch chéo đối với các phần tử br và hr được phép.
Sự khác biệt ngăn chặn một lời giải thích sai lầm phổ biến. Bề mặt trực quan được đọc qua InternalHTML, nhưng nguồn được sao chép sau đó được mã hóa và xây dựng lại bằng mã ứng dụng. Những gì người dùng nhận được phản ánh cả chuỗi DOM do trình duyệt tạo và các quy ước đầu ra hẹp hơn của ToolAcre, bao gồm bí danh, thuộc tính được lọc và thẻ cân bằng.
Đăng nhập mã thông báo, viết lại danh sách cho phép — đây không phải là tuần tự hóa HTML bên trong trình duyệt
Trình mã thông báo quét các ký tự mà không cần xây dựng nút DOM hoặc gọi DOMParser. Nó nhận dạng văn bản, nhận xét, khai báo, thẻ bắt đầu, thẻ kết thúc và nội dung phần tử văn bản thô. Quá trình khử trùng lặp lại trình tự phẳng đó, giữ các cấu trúc được phép, mở các lớp bọc thông thường không xác định và ngăn chặn các thùng chứa nguy hiểm chứa nội dung của chúng.
Do đó, chính tả gốc không được giữ nguyên. Tên hỗn hợp trở thành chữ thường; b trở nên mạnh mẽ, i trở thành em, tấn công và del trở thành s, và ins trở thành u. Đầu ra được tạo lại từ các mã thông báo được chấp nhận thay vì được trả về dưới dạng chuỗi con ban đầu, do đó, định dạng nguồn và các chi tiết không được hỗ trợ sẽ biến mất theo thiết kế.
Thoát văn bản và thuộc tính trong khi chuẩn hóa các thực thể đã biết
Văn bản được giải mã thực thể trước tiên và thoát lại. Ký hiệu trở thành `&`, dấu nhỏ hơn và lớn hơn trở thành `<` và `>`, đồng thời các ký tự điều khiển bị cấm sẽ biến mất. Đơn đặt hàng này giữ cho `&` hiện có ổn định qua các lần chuyển lặp lại thay vì biến nó thành `&amp;`.
Các giá trị thuộc tính tuân theo một đường dẫn thoát chặt chẽ hơn cũng có dấu ngoặc kép, dấu ngoặc đơn, dấu ngoặc nhọn và ký hiệu. Các thực thể đã biết được giải mã trước khi các thuộc tính được chấp nhận được phát ra. Các thử nghiệm ghim tính bình thường cho các truy vấn văn bản và liên kết, nhưng mã không hứa hẹn giữ nguyên từng cách viết thực thể có thẩm quyền, chẳng hạn như tham chiếu được đặt tên so với tham chiếu số.
Các phần tử trống và thẻ đóng cân bằng trong trình ghi lại tùy chỉnh
Chỉ br và hr đều được phép và được phân loại là void trong tập đầu ra. Họ không bao giờ nhận được thẻ đóng. Đối với các phần tử được phép không trống, ngăn xếp mở sẽ ghi lồng nhau. Một dấu đóng chéo chẳng hạn như mạnh xung quanh em khiến các phần tử bên trong đóng trước, tạo ra đánh dấu cân bằng thay vì giữ nguyên thứ tự không đúng định dạng.
Các phần tử không được tiết lộ sẽ được đóng ở cuối, trong khi các thẻ đóng bị lạc sẽ bị bỏ qua. Đây là chính sách cân bằng của người ghi lại, không phải là triển khai hoàn chỉnh việc khôi phục lỗi trình duyệt HTML5. Bản thân nguồn cảnh báo về sự khác biệt của trình phân tích cú pháp, đó là lý do tại sao đầu ra không được tiếp thị dưới dạng chất khử trùng đầu vào thù địch phổ biến.
Các thuộc tính được đưa vào danh sách cho phép và được trích dẫn; chỉ đặt hàng nguồn không phải là hợp đồng
Không có túi thuộc tính chung nào tồn tại. Đoạn văn và tiêu đề không được phép; liên kết cho phép href và tiêu đề; chữ viết tắt cho phép tiêu đề; trích dẫn cho phép trích dẫn; danh sách có thứ tự cho phép bắt đầu và gõ. Mọi giá trị được phát ra đều được trích dẫn kép và các liên kết được chấp nhận cũng nhận được `rel="noopener noreferrer nofollow"`.
Thứ tự thuộc tính tuân theo các mã thông báo được chấp nhận và trường rel được thêm vào, nhưng việc dựa vào thứ tự sẽ rất mong manh. Ý nghĩa nằm trong tên và giá trị được phép. Bắt đầu bằng số nguyên không đúng định dạng sẽ bị loại bỏ, lược đồ href hoặc trích dẫn không an toàn bị từ chối và các thuộc tính không xác định tạo ra lý do xóa thay vì âm thầm trở thành một phần của đánh dấu được xuất bản.
Ví dụ đã hoạt động: duyệt một đoạn mã thông qua chất khử trùng của ToolAcre
Hãy thử `<B class="loud">A & B<br></B><a href="javascript:alert(1)">open</a>`. Lớp này bị xóa, B ánh xạ thành mạnh, ký hiệu hiện tại vẫn là một ký hiệu thoát, br trở nên tự đóng và liên kết không an toàn mất href trong khi vẫn giữ lại văn bản liên kết hiển thị.
Chế độ nguồn đẹp sau đó đặt các phần tử khối được hỗ trợ trên các dòng và thụt lề danh sách các phần tử con. Nó để lại nội dung nội tuyến với nhau và giữ nguyên văn bản bên trong pre. Định dạng là khả năng đọc được trên đầu ra đã được viết lại; nó không phải là trình phân tích cú pháp bảo mật thứ hai và không khôi phục khoảng trắng mà quá trình chuẩn hóa trước đó đã xóa.
Điều này không bao gồm những gì — trình duyệt, XML hoặc XHTML tuần tự hóa
Bài viết này không mô tả các đảm bảo về tuần tự hóa trình duyệt gốc, XMLSerializer, cú pháp XHTML hoặc các quy tắc thẻ đóng HTML tùy chọn nói chung. Nó ghi lại các quy ước có thể quan sát được trong kho lưu trữ này. Các xác nhận quyền sở hữu về ` ` cụ thể bị bỏ qua vì bảng thực thể cục bộ, không phải trình tuần tự hóa chung của trình duyệt, xác định các tham chiếu được đặt tên được công nhận.
Trình tạo bản xem trước sẽ dọn dẹp một lần nữa và gói đoạn này vào một tài liệu có chủ đề ánh sáng hoàn chỉnh. Sao chép HTML trả về đoạn; Tải xuống HTML sẽ trả về tài liệu đó. Đó là những tạo tác khác nhau có chủ ý. Đọc nhãn hành động trước khi cho rằng tệp đã tải xuống giống hệt byte với nguồn được sao chép.
Bài học rút ra: trình tuần tự hóa nhất quán, đầu vào của bạn không nhất quán - tóm tắt cách dự đoán đầu ra của trình soạn thảo và cách trình soạn thảo HTML WYSIWYG của ToolAcre hiển thị những gì trình duyệt thực sự tạo ra
Dự đoán ToolAcre bằng cách làm theo các giai đoạn của nó: mã hóa chuỗi, giải mã các thực thể được hỗ trợ, áp dụng bí danh phần tử và danh sách cho phép, kiểm tra URL, cân bằng các thẻ được chấp nhận, thoát đầu ra và in đẹp tùy ý. Trình tự đó giải thích kết quả thực tế chính xác hơn việc nói InnerHTML chỉ bảo tồn hoặc tuần tự hóa nguồn của tác giả.
Sử dụng chế độ nguồn để quan sát việc viết lại bằng một thiết bị cố định nhỏ trước khi xử lý một bản nháp dài. Trình khử trùng từ chối các tài liệu trên 500,000 ký tự, do đó dữ liệu nhập quá lớn sẽ không thành công thay vì đóng băng tab. Giữ chính sách HTML của đích đến tách biệt với tập hợp con nhỏ gọn có chủ ý của trình chỉnh sửa này.