เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ · HTML บรรณาธิการ WYSIWYG
DOM อธิบายสำหรับบรรณาธิการ: เหตุใด HTML จึงเป็นแผนผัง ไม่ใช่ไฟล์ข้อความ
· พื้นหลัง
html โดม เป็นที่พอใจ
เปิดตัว Document Object Model สำหรับผู้ที่ไม่ใช่โปรแกรมเมอร์ ซึ่งครอบคลุมกฎการซ้อน องค์ประกอบพาเรนต์และลูก และวิธีที่เบราว์เซอร์ซ่อมแซมการซ้อนที่ไม่ถูกต้อง เพื่ออธิบายพฤติกรรมของตัวแก้ไขที่ดูเหมือนไม่เป็นไปตามอำเภอใจ
เหตุใด <p> ของคุณจึงปิดตัวเอง — เปิดขึ้นพร้อมกับมาร์กอัปที่เปลี่ยนแปลงหลังจากวาง
ย่อหน้าอาจดูเหมือนปิดหรือย้ายหลังจากส่วนย่อยผ่านโปรแกรมแก้ไข เนื่องจากแผนผังผลลัพธ์ซึ่งไม่ใช่ลำดับอักขระดั้งเดิมของผู้เขียนคือสิ่งสำคัญในท้ายที่สุด ToolAcre เพิ่มการแปลงอื่น: โทเค็นและเขียนซอร์สที่ได้รับมาจากเบราว์เซอร์ใหม่ภายใต้รายการที่อนุญาตของตัวเอง
เมื่อแหล่งที่มาเปลี่ยนแปลง ให้ถามว่าขั้นตอนใดเปลี่ยนแปลง เบราว์เซอร์อาจกลายพันธุ์ DOM ที่เป็นเนื้อหาที่แก้ไขได้ หรือตัวฆ่าเชื้ออาจแมปนามแฝง แกะโหนด หรือแท็กที่ยอมรับอย่างสมดุล การเรียกทุกความแตกต่างว่า “เบราว์เซอร์แก้ไขมัน” เป็นการซ่อนขอบเขตที่สำคัญนี้
กล่องภายในกล่อง — แนะนำแบบจำลองต้นไม้พร้อมตัวอย่างสั้นๆ
คิดว่าองค์ประกอบเป็นกล่องที่เชื่อมต่อกันด้วยความสัมพันธ์ระหว่างพ่อแม่และลูก ใน `<p>Read <strong>carefully</strong>.</p>` นั้น p คือพาเรนต์ของข้อความ แข็งแกร่งและเป็นข้อความที่มากกว่า strong เป็นผู้ปกครองของคำอย่างระมัดระวัง การเยื้องแหล่งที่มาสามารถแสดงแผนผังได้แต่ไม่ได้สร้างความสัมพันธ์
ตัวจัดรูปแบบที่สวยงามของ ToolAcre วางคอนเทนเนอร์แบบบล็อกไว้ในบรรทัดและเก็บองค์ประกอบแบบอินไลน์โดยมีข้อความล้อมรอบ รายการจะได้รับบรรทัด li เยื้อง รูปแบบนี้ใช้สำหรับการอ่านเอาต์พุตที่ผ่านการฆ่าเชื้อแล้ว โมเดลจริงยังคงเป็นองค์ประกอบที่ซ้อนกันและโหนดข้อความ ไม่ว่าแหล่งที่มาจะมีขนาดกะทัดรัดหรือกระจายข้ามบรรทัดก็ตาม
การซ้อนที่อนุญาตนั้นสมดุลโดยผู้เขียนใหม่ของ ToolAcre โมเดลเนื้อหาเบราว์เซอร์นั้นกว้างกว่า
HTML กำหนดโมเดลเนื้อหาที่กว้างกว่าและมีรายละเอียดมากกว่านโยบายของผู้แก้ไขนี้มาก ToolAcre อนุญาตชุดเฉพาะ แต่ไม่ตรวจสอบกฎการซ้อนความหมายทุกรายการ สแต็กช่วยให้มั่นใจได้ว่าการปิดที่มีรูปแบบที่ดีระหว่างแท็กที่อนุญาต นั่นไม่ใช่ข้อพิสูจน์ว่าทุกความสัมพันธ์ที่เกิดขึ้นนั้นเหมาะสม HTML สำหรับปลายทาง
ตัวอย่างเช่น รายการควรมีรายการที่เหมาะสม แต่สแต็กทั่วไปสามารถรักษาชุดค่าผสมที่อนุญาตที่ผิดปกติได้ เนื่องจากไม่ใช่เครื่องมือตรวจสอบสคีมา ผู้เขียนควรสร้างหัวเรื่อง ย่อหน้า และรายการที่สมเหตุสมผลผ่านแถบเครื่องมือหรือแหล่งข้อมูลที่ได้รับการตรวจสอบ จากนั้นตรวจสอบภายใต้ข้อกำหนดปลายทางเมื่อความถูกต้องเป็นผลสืบเนื่อง
ToolAcre ซ่อมแซมแท็กที่ยอมรับด้วยสแต็ก ไม่ใช่อัลกอริทึมการแยกวิเคราะห์ HTML ที่สมบูรณ์
เบราว์เซอร์ใช้อัลกอริธึมการแยกวิเคราะห์ HTML เต็มรูปแบบพร้อมการกู้คืนข้อผิดพลาด ToolAcre ไม่ได้นำไปใช้ใหม่ โทเค็นไนเซอร์จะจดจำโครงสร้างที่รายการที่อนุญาตต้องการ และผู้เขียนจะปิดองค์ประกอบภายในที่ยอมรับเมื่อแท็กปิดท้ายปรากฏขึ้น มันหยดการปิดที่หลงทางและปิดการเปิดที่เหลือในตอนท้าย
แหล่งที่มาระบุชื่อ parser differentials อย่างชัดเจนเป็นเหตุผลที่จะไม่ถือว่าโมดูลเป็นตัวกรอง XSS อินพุตที่ไม่เป็นมิตรทั่วไป เบราว์เซอร์สามารถตีความสตริงที่มีรูปแบบไม่ถูกต้องโดยเจตนาให้แตกต่างออกไป แซนด์บ็อกซ์แสดงตัวอย่างให้ขีดจำกัดอิสระในการดำเนินการภายใน ToolAcre ในขณะที่เซิร์ฟเวอร์ยังคงต้องการการสุขาภิบาลที่รับรู้ HTML5 ที่เหมาะสม
โหนดข้อความและช่องว่าง — ครอบคลุมสาเหตุที่ต้องมีช่องว่างและตัวแบ่งบรรทัดระหว่างแท็กที่มีอยู่ในแผนผัง
ข้อความระหว่างองค์ประกอบจะกลายเป็นโทเค็นข้อความ รวมถึงอักขระช่องว่าง ฟอร์แมตเตอร์ที่น่ารักจะยุบช่องว่างภายนอกส่วนพรี ในขณะที่เนื้อหาพรีจะถูกเก็บไว้อย่างแน่นอน การแปลงข้อความธรรมดาจะแทรกบรรทัดใหม่หลังสิ้นสุดบล็อกและสำหรับ br จากนั้นลดการเรียกใช้บรรทัดว่างที่มากเกินไป
ช่องว่างจึงมีส่วนร่วมที่แตกต่างกันในแต่ละขั้นตอน การเว้นวรรคภาพอาจมาจากข้อความ br ขอบเขตบล็อก หรือ CSS ตรวจสอบโหนดและอักขระแทนที่จะถือว่าทุกช่องว่างที่มองเห็นเป็นเพียงระยะขอบ สารฆ่าเชื้ออาจทำให้การจัดรูปแบบช่องว่างเป็นปกติโดยไม่ต้องเปลี่ยนคำที่ผู้อ่านเห็น
ตัวอย่างการทำงาน: ติดตามบันทึกสองย่อหน้าพร้อมรายการ - อ่านมาร์กอัปที่ผลิตเป็นต้นไม้ ระบุพ่อแม่และลูก
สร้าง `<h2>Checklist</h2><p>Read <strong>carefully</strong>.</p><ul><li>Source</li><li>Preview</li></ul>` แฟรกเมนต์มีลูกองค์ประกอบระดับรากสามรายการ ย่อหน้ามีข้อความและเข้มข้น รายการประกอบด้วยลูก li สองคน โดยแต่ละลูกมีข้อความ
สลับจากแหล่งที่มาเป็นภาพและย้อนกลับ ต้นไม้ที่ได้รับอนุญาตควรคงความสมดุลไว้ และโหมด Pretty จะวางส่วนหัวและย่อหน้าบนบรรทัดในขณะที่เยื้องรายการ แบบฝึกหัดนี้ได้รับการควบคุม มันไม่ได้แสดงให้เห็นทุกเส้นทางการซ่อมแซมเบราว์เซอร์หรืออินพุตที่มีรูปแบบไม่ถูกต้อง
สิ่งนี้ไม่ครอบคลุมถึง — JavaScript DOM การเขียนโปรแกรมหรือ CSS โมเดลกล่อง
บทความนี้ไม่ได้สอน JavaScript DOM การเขียนโปรแกรม ผู้สังเกตการณ์การกลายพันธุ์ API การเลือก หรือโมเดลกล่อง CSS แผนผังองค์ประกอบและแผนผังกล่องเค้าโครงมีความสัมพันธ์กันแต่ไม่เหมือนกัน นอกจากนี้ยังไม่ได้อ้างว่ารายการโทเค็นที่เขียนด้วยลายมือนั้นเป็นเบราว์เซอร์ DOM
ไม่มีข้อสรุปด้านความปลอดภัยโดยทั่วไปตามมาจากต้นไม้ที่เป็นระเบียบเรียบร้อย ผู้โจมตีสามารถกำหนดเป้าหมายการแยกวิเคราะห์ความแตกต่างและ URL ซึ่งเป็นสาเหตุที่การกรองเอาต์พุต การแสดงตัวอย่างแบบแซนด์บ็อกซ์ และการดูแลเซิร์ฟเวอร์ยังคงแตกต่างกัน ใช้แบบจำลองต้นไม้เพื่อให้เหตุผลเกี่ยวกับโครงสร้าง โดยไม่ละเว้นการตรวจสอบความปลอดภัยของระบบที่รับ
ประเด็นสำคัญ: คิดในต้นไม้ - สรุปแบบจำลองทางจิตและผลลัพธ์ของมาร์กอัป ToolAcreของ HTML WYSIWYG เครื่องมือแก้ไขจะแสดงต้นไม้ที่คุณกำลังสร้าง
ลองนึกถึงต้นไม้เมื่อพฤติกรรมการมองเห็นดูเหมือนไม่เป็นไปตามอำเภอใจ ระบุพาเรนต์ รายการย่อย และโหนดข้อความที่คุณต้องการ จากนั้นเปรียบเทียบกับแหล่งที่มาที่กรอง ToolAcre ทำให้การตรวจสอบนี้ใช้งานได้จริงโดยการจับคู่การร่างที่แก้ไขเนื้อหาได้กับส่วนที่เขียนใหม่ที่สามารถอ่านได้
โมเดลทางจิตที่แข็งแกร่งยังเผยให้เห็นขีดจำกัดอีกด้วย เช่น div ที่ยังไม่ได้ห่อจะสูญเสียพาเรนต์ สคริปต์ที่ตกหล่นจะสูญเสียแผนผังย่อย และ b จะแข็งแกร่งขึ้น เมื่อการเปลี่ยนแปลงเหล่านี้มีความชัดเจน การแก้ไขจะกลายเป็นการตัดสินใจเชิงโครงสร้าง แทนที่จะกระตุ้นด้วยภาพซ้ำๆ โดยที่ยังไม่ทราบมาร์กอัป