เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ · HTML บรรณาธิการ WYSIWYG
จาก DOM ถึงมาร์กอัป: การทำให้อนุกรม HTML ภายในกำหนดรูปร่าง HTML อย่างไร
· มันทำงานอย่างไร
html html-เอนทิตี นักพัฒนาเวิร์กโฟลว์
อธิบายกฎที่เบราว์เซอร์ปฏิบัติตามเมื่อเปลี่ยนแผนผัง DOM กลับเป็นสตริง HTML ตั้งแต่การ Escape และเอนทิตีไปจนถึงองค์ประกอบโมฆะและการอ้างอิงแอตทริบิวต์ และเหตุใดเอาต์พุตของตัวแก้ไขจึงมีลักษณะเช่นนั้น
เหตุใด <br> จึงกลับมาเป็น <br /> ในน้ำยาฆ่าเชื้อนี้
ส่วนของแหล่งที่มาที่มี `<br>` ปล่อยให้สารฆ่าเชื้อนี้เป็น `<br />` ผลลัพธ์นั้นไม่ได้พิสูจน์ว่าทุกเบราว์เซอร์ทำให้ HTML เป็นอนุกรมด้วยเครื่องหมายทับ มันเป็นตัวเลือกโดยเจตนาในตัวเขียนสตริงของ ToolAcre ซึ่งมีสาขาองค์ประกอบ void ปล่อยช่องว่างและเครื่องหมายทับสำหรับองค์ประกอบ br และ hr ที่อนุญาต
ความแตกต่างช่วยป้องกันคำอธิบายที่เป็นเท็จโดยทั่วไป พื้นผิวที่มองเห็นจะถูกอ่านผ่าน innerHTML แต่แหล่งที่มาที่คัดลอกจะถูกโทเค็นและสร้างใหม่โดยใช้โค้ดของแอปพลิเคชัน สิ่งที่ผู้ใช้ได้รับจะสะท้อนถึงทั้งสตริง DOM ที่สร้างโดยเบราว์เซอร์ และรูปแบบเอาต์พุตที่แคบกว่าของ ToolAcre รวมถึงนามแฝง แอตทริบิวต์ที่กรอง และแท็กที่สมดุล
การเพิ่มโทเค็นและการเขียนรายการที่อนุญาตใหม่ - นี่ไม่ใช่การทำให้เป็นอนุกรม HTML ภายในของเบราว์เซอร์
tokenizer สแกนอักขระโดยไม่ต้องสร้างโหนด DOM หรือเรียก DOMParser โดยจดจำข้อความ ความคิดเห็น การประกาศ แท็กเริ่มต้น แท็กปิดท้าย และเนื้อหาขององค์ประกอบข้อความดิบ การฆ่าเชื้อจะวนซ้ำลำดับแบบเรียบนั้น โดยคงโครงสร้างที่ได้รับอนุญาต แกะกระดาษห่อธรรมดาที่ไม่รู้จัก และระงับภาชนะที่เป็นอันตรายที่มีเนื้อหาอยู่ในนั้น
ด้วยเหตุนี้ การสะกดคำดั้งเดิมจึงไม่คงอยู่ ชื่อแบบตัวพิมพ์ผสมจะกลายเป็นตัวพิมพ์เล็ก b กลายเป็นคนเข้มแข็ง ฉันกลายเป็น em, strike และ del กลายเป็น s และ ins กลายเป็นคุณ เอาต์พุตจะถูกสร้างขึ้นใหม่จากโทเค็นที่ยอมรับ แทนที่จะส่งคืนเป็นสตริงย่อยดั้งเดิม ดังนั้นการจัดรูปแบบต้นฉบับและรายละเอียดที่ไม่รองรับจึงหายไปตามการออกแบบ
การหลีกเลี่ยงข้อความและคุณลักษณะในขณะที่ทำให้เอนทิตีที่รู้จักเป็นมาตรฐาน
ข้อความจะถูกถอดรหัสเอนทิตีก่อนแล้วจึงหลบหนีอีกครั้ง เครื่องหมายแอมเปอร์แซนด์กลายเป็น `&` เครื่องหมายน้อยกว่าและมากกว่าจะกลายเป็น `<` และ `>` และอักขระควบคุมที่ต้องห้ามหายไป คำสั่งซื้อนี้จะทำให้ `&` ที่มีอยู่มีความเสถียรในการส่งซ้ำหลายครั้ง แทนที่จะเปลี่ยนเป็น `&amp;`
ค่าแอตทริบิวต์เป็นไปตามเส้นทางหลีกที่เข้มงวดยิ่งขึ้น ซึ่งยังใส่เครื่องหมายคำพูดคู่ เครื่องหมายคำพูดเดี่ยว วงเล็บเหลี่ยม และเครื่องหมายแอมเปอร์แซนด์ด้วย เอนทิตีที่รู้จักจะถูกถอดรหัสก่อนที่จะส่งแอตทริบิวต์ที่ยอมรับ การทดสอบพิน idempotence สำหรับการสืบค้นข้อความและลิงก์ แต่โค้ดไม่ได้รับประกันว่าจะรักษาการสะกดเอนทิตีที่เชื่อถือได้แต่ละรายการ เช่น การอ้างอิงที่มีชื่อและตัวเลข
องค์ประกอบที่เป็นโมฆะและแท็กปิดที่สมดุลในการเขียนซ้ำแบบกำหนดเอง
อนุญาตเฉพาะ br และ hr เท่านั้นและจัดประเภทเป็นโมฆะในชุดเอาต์พุต พวกเขาไม่เคยได้รับแท็กปิด สำหรับองค์ประกอบที่ได้รับอนุญาตที่ไม่ถือเป็นโมฆะ การบันทึกสแต็กแบบเปิดจะซ้อนกัน การปิดแบบกากบาท เช่น การเน้นรอบๆ em จะทำให้องค์ประกอบภายในปิดก่อน ทำให้เกิดมาร์กอัปที่สมดุล แทนที่จะรักษาลำดับที่มีรูปแบบไม่ถูกต้อง
องค์ประกอบที่ไม่ปิดจะถูกปิดในตอนท้าย ในขณะที่แท็กปิดที่หลงทางจะถูกละเว้น นี่เป็นนโยบายการปรับสมดุลของผู้เขียนใหม่ ไม่ใช่การดำเนินการกู้คืนข้อผิดพลาดของเบราว์เซอร์ HTML5 โดยสมบูรณ์ แหล่งที่มาเองก็เตือนเกี่ยวกับส่วนต่างของพาร์เซอร์ ซึ่งเป็นเหตุผลว่าทำไมจึงต้องไม่วางตลาดเอาต์พุตเป็นเครื่องฆ่าเชื้ออินพุตที่ไม่เป็นมิตรสากล
แอตทริบิวต์อยู่ในรายการที่อนุญาตและยกมา การสั่งซื้อแหล่งที่มาเพียงอย่างเดียวไม่ใช่สัญญา
ไม่มีถุงแอตทริบิวต์ทั่วไปที่ยังมีชีวิตอยู่ ย่อหน้าและหัวข้อไม่อนุญาตให้มี; ลิงก์อนุญาต href และชื่อ; คำย่อช่วยให้ชื่อเรื่อง; ใบเสนอราคาอนุญาตให้อ้างอิง; รายการสั่งซื้ออนุญาตให้เริ่มและพิมพ์ ทุกค่าที่ปล่อยออกมาจะมีเครื่องหมายคำพูดคู่ และลิงก์ที่ยอมรับจะได้รับ `rel="noopener noreferrer nofollow"` เช่นกัน
ลำดับแอตทริบิวต์เป็นไปตามโทเค็นที่ยอมรับและฟิลด์ rel ที่เพิ่มเข้ามา แต่การอาศัยลำดับจะเปราะบาง ความหมายอยู่ในชื่อและค่าที่อนุญาต การเริ่มต้นจำนวนเต็มที่มีรูปแบบไม่ถูกต้องจะถูกละทิ้ง, href หรือรูปแบบการอ้างอิงที่ไม่ปลอดภัยถูกปฏิเสธ และแอตทริบิวต์ที่ไม่รู้จักทำให้เกิดเหตุผลในการลบ แทนที่จะกลายเป็นส่วนหนึ่งของมาร์กอัปที่เผยแพร่อย่างเงียบๆ
ตัวอย่างการทำงาน: การสะดุดตัวอย่างข้อมูลไปกลับโดยใช้น้ำยาฆ่าเชื้อของ ToolAcre
ลอง `<B class="loud">A & B<br></B><a href="javascript:alert(1)">open</a>` คลาสจะถูกลบออก, แมป B ไปที่ Strong, เครื่องหมายแอมเปอร์แซนด์ที่มีอยู่ยังคงเป็นเครื่องหมายแอมเปอร์แซนด์ที่ใช้ Escape หนึ่งตัว, br จะถูกปิดเอง และลิงก์ที่ไม่ปลอดภัยจะสูญเสีย href ในขณะที่ยังคงรักษาข้อความลิงก์ที่มองเห็นได้
โหมดแหล่งพริตตี้จะวางองค์ประกอบบล็อกที่รองรับบนบรรทัดและเยื้องรายการลูก โดยจะรวมเนื้อหาแบบอินไลน์ไว้ด้วยกันและรักษาข้อความไว้ในส่วนก่อน การจัดรูปแบบคือการส่งผ่านไปยังเอาต์พุตที่เขียนใหม่แล้วที่สามารถอ่านได้ ไม่ใช่ตัวแยกวิเคราะห์ความปลอดภัยตัวที่สองและไม่ได้คืนค่าช่องว่างที่การปรับมาตรฐานก่อนหน้านี้ถูกลบออก
สิ่งนี้ไม่ครอบคลุมถึง - เบราว์เซอร์, XML หรือ XHTML การทำให้เป็นอนุกรม
บทความนี้ไม่ได้อธิบายการรับประกันการทำให้เป็นอนุกรมของเบราว์เซอร์ดั้งเดิม, XMLSerializer, ไวยากรณ์ XHTML หรือกฎแท็กปิดเสริม HTML โดยทั่วไป โดยจะบันทึกแบบแผนที่สามารถสังเกตได้ในพื้นที่เก็บข้อมูลนี้ การอ้างสิทธิ์เกี่ยวกับ ` ` ถูกละเว้นโดยเฉพาะ เนื่องจากตารางเอนทิตีในเครื่อง ไม่ใช่ตัวสร้างซีเรียลไลเซอร์ของเบราว์เซอร์ทั่วไป กำหนดการอ้างอิงที่มีชื่อที่เป็นที่รู้จัก
เครื่องมือสร้างตัวอย่างจะทำความสะอาดอีกครั้งและรวมส่วนต่างๆ ไว้ในเอกสารธีมสว่างที่สมบูรณ์ คัดลอก HTML ส่งคืนส่วน ดาวน์โหลด HTML ส่งคืนเอกสารนั้น สิ่งเหล่านี้เป็นสิ่งประดิษฐ์ที่แตกต่างกันโดยเจตนา อ่านป้ายกำกับการดำเนินการก่อนที่จะสมมติว่าไฟล์ที่ดาวน์โหลดมีไบต์เหมือนกันกับแหล่งที่มาที่คัดลอก
ประเด็นสำคัญ: ตัวซีเรียลไลเซอร์สอดคล้องกัน ข้อมูลที่คุณป้อนไม่สอดคล้องกัน — สรุปวิธีการทำนายเอาต์พุตของตัวแก้ไข และวิธีที่ตัวแก้ไข ToolAcre ของ HTML WYSIWYG แสดงสิ่งที่เบราว์เซอร์ผลิตจริง ๆ
ทำนาย ToolAcre โดยทำตามขั้นตอน: โทเค็นสตริง ถอดรหัสเอนทิตีที่รองรับ ใช้นามแฝงขององค์ประกอบและรายการที่อนุญาต ตรวจสอบ URL ปรับสมดุลแท็กที่ยอมรับ เอาต์พุต Escape และเลือกพิมพ์แบบสวย ๆ ลำดับดังกล่าวจะอธิบายผลลัพธ์ที่แท้จริงได้แม่นยำกว่าการบอกว่า InnerHTML จะเก็บรักษาหรือทำให้แหล่งที่มาของผู้เขียนเป็นอนุกรม
ใช้โหมดซอร์สเพื่อสังเกตการเขียนซ้ำด้วยฟิกซ์เจอร์ขนาดเล็กก่อนประมวลผลแบบร่างขนาดยาว เครื่องฆ่าเชื้อปฏิเสธเอกสารที่มีความยาวเกิน 500,000 อักขระ ดังนั้นการป้อนข้อมูลขนาดใหญ่จึงล้มเหลวแทนที่จะค้างแท็บ แยกนโยบาย HTML ของปลายทางออกจากชุดย่อยที่กระชับโดยเจตนาของตัวแก้ไขนี้