บั๊กหัวข้อ H1 คู่บน 500 หน้าเว็บ: เมื่อโค้ดแยกส่วนถูกต้องแต่รวมกันแล้วพัง

การเติบโตอย่างก้าวกระโดดของบล็อกแห่งหนึ่งจาก 84 โพสต์ สู่ 1,360 โพสต์ภายในวันเดียว นำมาซึ่งการค้นพบข้อผิดพลาดทางเทคนิคที่คาดไม่ถึง หลังจากผู้พัฒนาตัดสินใจเปิดหน้าเว็บจริงขึ้นมาอ่านแทนที่จะดูแค่ซอร์สโค้ด และพบว่ามีแท็ก <h1> ปรากฏอยู่ถึงสองตัวบนหน้าเว็บกว่า 500 หน้า โดยที่ทั้งสองส่วนของโค้ดนั้นมีความถูกต้องในตัวเอง แต่เมื่อนำมารวมกันกลับสร้างโครงสร้างที่ผิดเพี้ยนโดยที่ไม่มีระบบทดสอบใดมองเห็น

สาเหตุเกิดขึ้นจากเทมเพลตโพสต์ที่ดึงชื่อเรื่องมาจากส่วน frontmatter ของไฟล์ เช่น หัวข้อระดับหนึ่งในมาร์กดาวน์ จากนั้นโปรแกรมประมวลผลมาร์กดาวน์ได้แปลงหัวข้อนั้นให้กลายเป็นแท็ก <h1> อีกตัวหนึ่ง ส่งผลให้ไฟล์ทั้งสองฝั่งไม่มีความผิดพลาดในแง่ไวยากรณ์ เอกสารมาร์กดาวน์ที่เริ่มต้นด้วยหัวข้อระดับหนึ่งคือมาร์กดาวน์ที่ถูกต้อง และเทมเพลตที่พิมพ์ชื่อหน้าเป็นหัวข้อของหน้าก็คือเทมเพลตที่ถูกต้องเช่นกัน ข้อบกพร่องจึงดำรงอยู่เฉพาะในส่วนของผลลัพธ์ (output) ซึ่งเป็นสิ่งประดิษฐ์ชิ้นเดียวที่ไม่มีใครทำการทดสอบ

ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง

ระบบตรวจสอบที่มีอยู่มีตัวป้องกันสำหรับคลังข้อมูลและตัวเรนเดอร์ ซึ่งทั้งหมดต่างรายงานว่าผ่านการทดสอบมาโดยตลอด ในขณะที่หน้าเว็บนับพันกำลังเผยแพร่ลำดับชั้นหัวข้อที่พังทลาย การแก้ไขไฟล์มาร์กดาวน์จึงไม่ใช่ทางออกที่ถูกต้องเพราะตัวมาร์กดาวน์เองไม่ได้ผิดพลาด ทางแก้ที่แท้จริงคือการสร้างระบบตรวจสอบที่ทำงานบนหน้าเว็บที่เสร็จสมบูรณ์แล้ว ไม่ใช่ตรวจเฉพาะที่ตัวอินพุต

การนับสิ่งที่จะต้องมีเอกลักษณ์เฉพาะตัวนั้นมีต้นทุนต่ำและใช้งานได้ดีกับองค์ประกอบอื่นๆ เช่น canonical, title และ og:url ซึ่งล้วนมีคุณสมบัติที่ต้องมีอย่างละหนึ่งเสมอ และความซ้ำซ้อนจะยังคงมองไม่เห็นจนกว่าจะมีใครสักคนมาตรวจสอบผลลัพธ์ เมื่อทั้งสองด้านของรอยต่อดูถูกต้องแต่ผลลัพธ์กลับผิดพลาด สิ่งที่ควรทำคือการตรวจสอบที่เอาต์พุตไม่ใช่ที่อินพุต ผู้เขียนยังพบปัญหาลักษณะเดียวกันนี้อีกสองครั้งในสัปดาห์เดียวกัน ได้แก่ ตัวตรวจสอบที่อ่านซอร์สแล้วผ่านในขณะที่ HTML ที่สร้างขึ้นพังทลาย และระบบป้องกันที่ทำงานกับข้อความที่ถูกต้องเนื่องจากมันตรงกับ substring แทนที่จะเป็นโครงสร้าง

ที่มา: Dev.to