Công cụ dành cho nhà phát triển · HTML WYSIWYG trình chỉnh sửa
DOM Giải thích cho người chỉnh sửa: Tại sao HTML là một cái cây chứ không phải một tệp văn bản
· Lý lịch
html nhà thờ contenteditable
Giới thiệu Mô hình đối tượng tài liệu dành cho những người không phải là lập trình viên, bao gồm các quy tắc lồng nhau, phần tử cha và con cũng như cách trình duyệt sửa lỗi lồng không hợp lệ, để giải thích hành vi của người soạn thảo có vẻ tùy tiện.
Tại sao <p> của bạn lại tự đóng — mở bằng đánh dấu đã thay đổi sau khi dán
Một đoạn văn có thể dường như đóng lại hoặc di chuyển sau khi một đoạn đi qua trình soạn thảo vì cây kết quả—chứ không phải chuỗi ký tự gốc của tác giả—là điều cuối cùng quan trọng. ToolAcre thêm một chuyển đổi khác: nó mã hóa và ghi lại nguồn có nguồn gốc từ trình duyệt theo danh sách cho phép của chính nó.
Khi nguồn thay đổi, hãy hỏi giai đoạn nào đã thay đổi nó. Trình duyệt có thể đã thay đổi DOM có thể chỉnh sửa nội dung hoặc trình khử trùng có thể đã ánh xạ bí danh, hủy gói nút hoặc cân bằng các thẻ được chấp nhận. Gọi mọi khác biệt là “trình duyệt đã sửa nó” ẩn chứa ranh giới quan trọng này.
Hộp bên trong hộp - giới thiệu mô hình cây với một ví dụ ngắn
Hãy coi các phần tử như những chiếc hộp được kết nối bởi mối quan hệ cha-con. Trong `<p>Read <strong>carefully</strong>.</p>`, p là cha mẹ của văn bản, mạnh mẽ và nhiều văn bản hơn; mạnh mẽ là cha mẹ của từ một cách cẩn thận. Thụt lề nguồn có thể minh họa cây nhưng không tạo ra mối quan hệ.
Trình định dạng đẹp mắt của ToolAcre đặt các vùng chứa khối trên các dòng và giữ các phần tử cùng dòng với văn bản xung quanh. Danh sách nhận dòng li thụt vào. Định dạng này dùng để đọc kết quả đã được lọc sạch. Mô hình thực tế vẫn giữ nguyên các phần tử và nút văn bản lồng nhau, bất kể nguồn có nhỏ gọn hay dàn trải trên các dòng hay không.
Việc lồng ghép được phép được cân bằng bởi trình ghi lại của ToolAcre; mô hình nội dung trình duyệt rộng hơn
HTML xác định các mô hình nội dung rộng hơn và chi tiết hơn nhiều so với chính sách của người chỉnh sửa này. ToolAcre cho phép một tập hợp cụ thể nhưng không xác thực mọi quy tắc lồng ghép ngữ nghĩa. Ngăn xếp của nó đảm bảo việc đóng đúng định dạng giữa các thẻ được phép; đó không phải là bằng chứng cho thấy mọi mối quan hệ có được đều lý tưởng HTML cho một điểm đến.
Ví dụ: một danh sách phải chứa các mục danh sách thích hợp, tuy nhiên ngăn xếp chung có thể duy trì các kết hợp được phép bất thường vì nó không phải là trình xác thực lược đồ. Tác giả nên xây dựng các tiêu đề, đoạn văn và danh sách hợp lý thông qua thanh công cụ hoặc nguồn được xem xét, sau đó xác thực theo yêu cầu đích khi tính chính xác là cần thiết.
ToolAcre sửa chữa các thẻ được chấp nhận bằng một ngăn xếp chứ không phải thuật toán phân tích cú pháp HTML hoàn chỉnh
Các trình duyệt áp dụng thuật toán phân tích cú pháp HTML đầy đủ kèm theo khả năng khôi phục lỗi. ToolAcre không triển khai lại nó. Trình mã thông báo của nó nhận ra các cấu trúc cần thiết cho danh sách cho phép và trình soạn thảo của nó sẽ đóng các phần tử bên trong được chấp nhận khi thẻ kết thúc chéo xuất hiện. Nó thả các lần đóng đi lạc và đóng các lần mở còn lại ở cuối.
Nguồn nêu tên rõ ràng các khác biệt của trình phân tích cú pháp là lý do không coi mô-đun là bộ lọc XSS đầu vào thù địch chung. Trình duyệt có thể diễn giải các chuỗi có định dạng sai cố ý một cách khác nhau. Hộp cát xem trước cung cấp giới hạn thực thi độc lập bên trong ToolAcre, trong khi máy chủ vẫn cần vệ sinh nhận biết HTML5 thích hợp.
Nút văn bản và khoảng trắng - giải thích lý do tồn tại khoảng trắng và ngắt dòng giữa các thẻ trong cây
Văn bản giữa các phần tử trở thành mã thông báo văn bản, bao gồm các ký tự khoảng trắng. Trình định dạng đẹp thu gọn khoảng trắng thông thường bên ngoài pre, trong khi nội dung pre được giữ lại chính xác. Chuyển đổi văn bản thuần túy chèn dòng mới sau khi kết thúc khối và đối với br, sau đó giảm số dòng trống quá mức.
Do đó, khoảng trắng tham gia khác nhau ở mỗi giai đoạn. Khoảng cách trực quan có thể đến từ văn bản, br, ranh giới khối hoặc CSS. Kiểm tra các nút và ký tự thay vì coi mọi khoảng trống có thể nhìn thấy được là lề. Trình khử trùng có thể bình thường hóa khoảng trắng định dạng mà không thay đổi các từ mà người đọc nhìn thấy.
Ví dụ hoạt động: theo dõi ghi chú gồm hai đoạn bằng một danh sách - đọc phần đánh dấu được tạo dưới dạng cây, xác định cha mẹ và con cái
Xây dựng `<h2>Checklist</h2><p>Read <strong>carefully</strong>.</p><ul><li>Source</li><li>Preview</li></ul>`. Đoạn này có ba phần tử con cấp gốc. Đoạn văn chứa văn bản và mạnh mẽ; danh sách chứa hai con li, mỗi con có văn bản.
Chuyển từ nguồn sang hình ảnh và ngược lại. Cây được phép phải giữ cân bằng và chế độ đẹp sẽ đặt tiêu đề và đoạn văn trên các dòng trong khi thụt lề các mục trong danh sách. Bài tập này được kiểm soát; nó không hiển thị mọi đường dẫn sửa chữa trình duyệt hoặc đầu vào không đúng định dạng.
Điều này không bao gồm những gì — lập trình JavaScript DOM hoặc mô hình hộp CSS
Bài viết này không dạy JavaScript DOM lập trình, trình quan sát đột biến, API lựa chọn hoặc mô hình hộp CSS. Cây phần tử và cây hộp bố cục có liên quan nhưng không giống nhau. Nó cũng không khẳng định danh sách mã thông báo viết tay là trình duyệt DOM.
Không có kết luận bảo mật tổng quát nào được rút ra từ một cái cây gọn gàng. Kẻ tấn công có thể nhắm mục tiêu các khác biệt về phân tích cú pháp và URL, đó là lý do tại sao việc lọc đầu ra, xem trước hộp cát và vệ sinh máy chủ vẫn khác biệt. Sử dụng mô hình cây để suy luận về cấu trúc chứ không phải từ bỏ việc xem xét bảo mật của hệ thống nhận.
Bài học rút ra: suy nghĩ theo cây — tóm tắt mô hình tinh thần và cách kết quả đánh dấu của trình soạn thảo HTML WYSIWYG của ToolAcre hiển thị cây bạn đang xây dựng
Hãy suy nghĩ về cây cối khi hành vi thị giác có vẻ tùy tiện. Xác định nút cha, nút con và nút văn bản mà bạn dự định, sau đó so sánh chúng với nguồn đã lọc. ToolAcre làm cho việc kiểm tra này trở nên thiết thực bằng cách ghép nối bản nháp có thể chỉnh sửa được với một đoạn viết lại có thể đọc được.
Một mô hình tinh thần mạnh mẽ cũng bộc lộ những giới hạn: div không được bao bọc sẽ mất cha mẹ, tập lệnh bị loại bỏ sẽ mất cây con và b trở nên mạnh mẽ. Khi những chuyển đổi đó trở nên rõ ràng, các sửa đổi sẽ trở thành quyết định mang tính cấu trúc thay vì các cú huých trực quan lặp đi lặp lại mà vẫn chưa xác định được dấu hiệu.