มาถึงที่นี่ได้อย่างไร?

• หน้าแบบอินเทอร์แอ็กทีฟที่แสดงภาพแบบเรียลไทม์ของ เส้นทางที่แพ็กเก็ตของผู้ใช้เดินทางผ่านอินเทอร์เน็ตไปถึงเซิร์ฟเวอร์ของเว็บไซต์
• ใช้ โปรแกรม traceroute ที่พัฒนาขึ้นเองชื่อ ktr เพื่อเก็บข้อมูลของแต่ละ network hop โดยอาศัยค่า TTL ของแพ็กเก็ต ICMP
• เว็บไซต์ ทำงานได้โดยไม่ต้องใช้ JavaScript และเซิร์ฟเวอร์จะสะท้อนผลลัพธ์ traceroute ลงใน HTML ในรูปแบบสตรีม
• การวิเคราะห์เส้นทางใช้ ข้อมูล WHOIS และ PeeringDB เพื่อแสดง Autonomous System (AS) และข้อมูลบริษัทที่ IP แต่ละตัวสังกัด
• ผสาน traceroute เข้ากับ โครงสร้างอินเทอร์เน็ตที่อิง BGP เพื่อแสดงใหเห็นว่าอินเทอร์เน็ตคือ กลุ่มของเครือข่ายที่ประกอบขึ้นจากความสัมพันธ์แบบ peering ระหว่างบริษัทต่าง ๆ

---

การเดินทางที่แพ็กเก็ตของคุณผ่านมา

• traceroute ด้านบนของหน้าจอแสดง เส้นทางการเคลื่อนที่ของแพ็กเก็ต จากคอมพิวเตอร์ของผู้ใช้ไปยังเซิร์ฟเวอร์
  • ผ่านเครือข่ายของ router, ISP, Amazon, NTT Global IP Network, Hetzner ตามลำดับ
  • บางช่วงจะแสดงเป็น “(no response)” ซึ่งเกิดจากเซิร์ฟเวอร์ที่ไม่ตอบกลับ
• ภายในเครือข่ายของ Hetzner แพ็กเก็ตจะผ่าน router หลายตัวก่อนถึงเซิร์ฟเวอร์ปลายทาง
• IP address 213.239.252.10 แสดงเป็น core0.fra.hetzner.com ผ่าน reverse DNS lookup

Behind the Scenes

• เมื่อเว็บไซต์ได้รับคำขอจากผู้ใช้ จะ รัน traceroute บนเซิร์ฟเวอร์ แล้วส่งผลลัพธ์กลับแบบเรียลไทม์
• traceroute ใช้ โปรโตคอล ICMP โดยเพิ่มค่า TTL (Time To Live) ทีละ 1 และเก็บการตอบกลับของแต่ละ hop
• เมื่อ TTL กลายเป็น 0 router ที่เกี่ยวข้องจะส่งข้อความ error กลับมา ทำให้สามารถ ติดตามเส้นทางที่แพ็กเก็ตเดินทางผ่านได้
• ktr จะสตรีมผล traceroute พร้อมกับค้นหาข้อมูล IP, ASN และข้อมูลเครือข่ายเจ้าของ ของแต่ละ hop ไปพร้อมกัน

Frontend Fun

• ทำงานได้แม้ไม่มี JavaScript โดยเบราว์เซอร์จะมองว่าเป็นเพียง หน้าที่โหลดช้า
• เซิร์ฟเวอร์จะคงการเชื่อมต่อ HTTP ไว้ แล้วแทรกผลลัพธ์ traceroute ลงใน HTML ตามลำดับ
• ในแต่ละการอัปเดต จะ แทรก CSS block เพื่อซ่อนผลลัพธ์ก่อนหน้า ทำให้เกิดเอฟเฟกต์เหมือนอัปเดตแบบเรียลไทม์

Front to Back, Back to Front

• ในความเป็นจริง ระบบ รัน traceroute จากเซิร์ฟเวอร์ไปยัง IP ของผู้ใช้ แล้ว แสดงผลในลำดับย้อนกลับ
• นี่คือ “reverse traceroute” ซึ่งแม้เส้นทางไปและกลับจะไม่เหมือนกันทั้งหมด แต่โดยทั่วไปจะ มีเส้นทางคล้ายกัน

เครือข่ายและ Autonomous System (AS)

• อินเทอร์เน็ตคือ โครงข่ายที่เชื่อมต่อกันของเครือข่ายระดับองค์กร ซึ่งเรียกว่า Autonomous System (AS)
• แต่ละ AS มี ASN (Autonomous System Number) ของตัวเอง และแลกเปลี่ยนทราฟฟิกกันผ่าน peering
• อินเทอร์เน็ตเป็นกลุ่มของ เครือข่ายที่บริษัทเป็นเจ้าของ ไม่ใช่ของบุคคล และการเชื่อมต่อถูกกำหนดโดย สัญญาทางการเงินและกระบวนการทางปกครอง
• สามารถยื่นขอ ASN ได้ผ่านหนึ่งใน 5 Regional Internet Registries (RIRs)

WHOIS และ PeeringDB

• ใช้ โปรโตคอล WHOIS และ ฐานข้อมูล PeeringDB เพื่อค้นหา AS ที่ IP แต่ละตัวใน traceroute สังกัดอยู่
• WHOIS มีโครงสร้างเรียบง่าย คือเปิดการเชื่อมต่อ TCP ส่งคำค้น แล้วเซิร์ฟเวอร์จะส่งข้อมูลกลับมา
• เนื่องจากแต่ละเซิร์ฟเวอร์มีชื่อฟิลด์และรูปแบบต่างกัน parser จึงถูกสร้างเป็น ตัวจำลองแบบง่ายที่ใกล้เคียงกับวิธีที่มนุษย์อ่านข้อมูล
• PeeringDB ให้ข้อมูลบริษัทของ AS ราว หนึ่งในสามของทั้งหมด

BGP (Border Gateway Protocol)

• BGP คือโปรโตคอลหลักที่กำหนดรูปร่างของอินเทอร์เน็ต โดยใช้แลกเปลี่ยนข้อมูลเส้นทางระหว่าง AS
• border router จะเก็บ ตาราง routing ของ BGP ไว้ และบันทึกรายการ ASN ของแต่ละเส้นทาง
• เมื่อ AS สองแห่งทำ peering กัน router ของทั้งสองฝั่งจะสร้าง BGP session และแลกเปลี่ยน route advertisement
• จากหลายเส้นทางที่มีอยู่ router จะเลือก เส้นทางที่สั้นที่สุดหรือมีค่าความพึงพอใจสูงกว่า เพื่อส่งต่อแพ็กเก็ต

ประวัติของ BGP

• การทดลองเครือข่ายที่เริ่มจาก ARPANET ในปี 1969 นำไปสู่ RFC 1105 ของ Cisco และ IBM ในปี 1989 ซึ่งเป็นจุดกำเนิดของ BGP v1
• หลังจากนั้นมีการประกาศ BGP v2 (1990) และ v4 (1994) โดย v4 ยังคงถูกใช้งานมาจนถึงปัจจุบัน
• BGP ได้กลายเป็นโปรโตคอลมาตรฐานสำหรับ กำหนดเส้นทางการเชื่อมต่อระหว่างทุกเครือข่ายบนอินเทอร์เน็ต

ความสัมพันธ์ระหว่าง Traceroute และ BGP

• ตัวอย่างเส้นทาง: AS16509 → AS2914 → AS24940
  • Amazon (AS16509) → NTT Global IP Network (AS2914) → Hetzner (AS24940) ตามลำดับ
• แม้อยู่ภายใน ASN เดียวกันก็ยังอาจมีหลาย hop ได้ ซึ่งจะถูกจัดการด้วยโปรโตคอล routing ภายในหรือเส้นทางแบบคงที่
• ความสัมพันธ์แบบ peering ระหว่าง AS เป็นตัวกำหนดความสามารถในการเข้าถึงจริงบนอินเทอร์เน็ต

สรุปย่อ

• เว็บไซต์รัน traceroute ไปยัง IP ของผู้ใช้ แล้วส่งผลลัพธ์ผ่าน HTTP stream
• traceroute ใช้ TTL ของแพ็กเก็ต ICMP เพื่อ แสดงภาพเส้นทางระหว่าง router
• แต่ละ router สังกัด Autonomous System (AS) และเชื่อมต่อกันผ่าน BGP
• ความสัมพันธ์แบบ peering เป็นตัวกำหนดการเข้าถึงและโครงสร้างของอินเทอร์เน็ต

บทส่งท้าย

• ผู้เขียนรู้สึกว่าตัวเองยังเข้าใจโครงสร้างอินเทอร์เน็ตไม่มากพอ จึงสร้าง บทความเชิงโต้ตอบเพื่อการเรียนรู้ที่มีโปรโตคอลเป็นศูนย์กลาง ขึ้นมา
• แทนที่จะรอโครงการใหญ่ที่สมบูรณ์แบบ ผู้เขียนเลือก เผยแพร่สิ่งเล็ก ๆ ที่เสร็จสมบูรณ์ก่อน
• งานนี้สำเร็จขึ้นได้ด้วยกำลังใจจากชุมชน Hack Club และการใช้ โปรแกรม traceroute แบบโอเพนซอร์ส
• พร้อมข้อความว่า “ของที่เล็กกว่าแต่เสร็จสมบูรณ์นั้นดีกว่า” และหวังให้มันคงอยู่ในฐานะ เนื้อหาเว็บที่ยั่งยืน

[GN⁺]

ความคิดเห็นบน Hacker News

• คิดว่าฟีเจอร์ reverse traceroute นี้ยังคงมีประโยชน์อยู่ แต่ในความเป็นจริง ต่อให้เส้นทาง AS เหมือนกัน จุด peering ก็มักจะแตกต่างกันแทบตลอด AS ส่วนใหญ่ใช้ hot-potato routing เพื่อส่งต่อแพ็กเก็ตไปยังจุด peering ที่ใกล้ต้นทางของทราฟฟิกที่สุด แม้จะใช้ cold-potato ก็ยังไม่สมมาตรอยู่ดี และเมื่อความยาว AS-path เท่ากัน ก็อาจเลือกเส้นทางอื่นเพราะนโยบาย hot-potato ได้เช่นกัน (แก้ไข: แก้ความสับสนระหว่าง hot/cold)

  • ผมลองรันทั้ง traceroute และ reverse traceroute หลายครั้งแล้ว ส่วนใหญ่ เส้นทาง AS ออกมาคล้ายกัน เพียงแต่ฝั่ง traceroute บางครั้งแสดงเส้นทางภายใน ISP มากกว่า โดยรวมแล้วสิ่งที่คุณพูดถูก และผมอยากอธิบายความต่างระหว่างการทำ routing แบบ hot-potato vs cold-potato ให้ละเอียดกว่านี้ในภายหลัง อย่างไรก็ตาม แค่ผล reverse traceroute นี้ก็คิดว่าเพียงพอแล้วสำหรับการอธิบายโครงสร้างของอินเทอร์เน็ต
  • ที่คุณพูดถึงนั่นแหละคือ hot-potato routing เป็นโครงสร้างที่แต่ละ AS ส่งต่อแพ็กเก็ตออกไปให้เร็วที่สุดเท่าที่ทำได้ มันอาจดูไม่ยุติธรรม แต่ก็เป็นทางเลือกที่สมเหตุสมผล เพราะเราไม่รู้เส้นทางรายละเอียดภายใน AS ปลายทาง ตัวอย่างเช่น ถ้ามีเครือข่ายในเบอร์ลินกับฮัมบวร์ก และอีกฝั่งก็มี peering ในสองเมืองนั้นเหมือนกัน การส่งต่อที่จุดที่ใกล้กว่าจะช่วยหลีกเลี่ยงการวิ่งอ้อมไปมาโดยไม่จำเป็น

• ช่วงที่อธิบายว่าทำไม traceroute ถึงถูกโหลดทีละบรรทัดจากล่างขึ้นบนก็น่าสนใจมาก ไอเดียที่ใช้ แทรก CSS block เป็นระยะ เพื่อซ่อนสถานะก่อนหน้าโดยไม่ใช้ JavaScript นี่ทั้งแฮ็กดีและสร้างสรรค์มาก

  • ถึงจะไม่ใช้ JavaScript ก็สามารถทำ HTML streaming แบบลำดับไม่เรียงได้ด้วย Declarative Shadow DOM มีตัวอย่างและคำอธิบายสรุปไว้ดีในบล็อกโพสต์นี้

• ประโยค “This is not my beautiful website.” ดูมีลูกเล่นดี

  • การโต้กลับว่า “This is not my beautiful home-page.” ก็มีชั้นเชิงเหมือนกัน

• ถ้ายังไม่เคยลอง

  tracepath -m60 bad.horse
  

  แล้วก็

  openssl s_client -connect signed.bad.horse:443 -servername signed.bad.horse
  

  แนะนำให้ลองรันดู

  • เท่มาก! เหมือนเป็น geeky โอมัจ ถึง Dr. Horrible ผลลัพธ์ของ tracepath จะเริ่มจาก “bad.horse” แล้วต่อด้วย “he.rides.across.the.nation” อะไรทำนองนั้น สนุกมากจริง ๆ
  • ยังมีอันนี้ด้วย

    ssh funky.nondeterministic.computer
    

  • แล้วก็

    ssh watch.ascii.theater
    

    ก็น่าลองเหมือนกัน

• มีคนบอกว่าโปรเจกต์นี้กลับขึ้นไปบน หน้าแรกของ Hacker News อีกครั้ง จนเซิร์ฟเวอร์หน่วงไปชั่วคราว Lexi แจ้งไว้ว่าให้ “กลับมาตรวจดูใหม่พรุ่งนี้”

  • ตอนนี้ดีขึ้นหน่อยแล้ว เขาเพิ่ม concurrency เข้าไปอีกเล็กน้อย และบทเรียนที่ได้คือครั้งหน้าจะใช้ Tokio

• เห็นชื่อเรื่องแล้วนึกว่าจะมีเพลงของ Talking Heads โผล่มา

  • เนื้อเพลง “letting the days go by” ลอยเข้ามาในหัวโดยอัตโนมัติ
  • ถ้าดู HTML อาจมีอะไรซ่อนอยู่ก็ได้ :)

• ลิงก์ “Once in a Lifetime” เหมือนฝังอยู่ในสมองเลย แค่เห็นชื่อก็ได้ยิน ไลน์เบส นั้นเล่นขึ้นมาเองอัตโนมัติ

  • ผมเองก็รู้สึกเหมือนโดน วิกฤตเชิงอัตถิภาวนิยม เล่นงานทันทีเหมือนกัน

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

  • เรียกได้ว่าเจอ เส้นทางที่คนไม่ค่อยเลือกเดิน (route less travelled) เข้าให้แล้ว

• บางครั้งข้อมูลด้านบนตรง “You are here” แสดงแบบนี้

  Host               ASN   Network         Region
  123-456-789-101.static.kc.net.uk AS19905 UltraDDoS Protect    Global
  

  แต่บางครั้งก็แสดงเป็น

  Host               ASN   Network         Region
  123-456-789-101.static.kc.net.uk AS12390 Kingston Communications Europe
  

  สลับกันไปมาแบบนี้ ทั้งที่เป็น IP เดียวกัน เลยสงสัยว่าทำไม ASN ถึงเปลี่ยนแบบ 50:50 ได้ ดูเหมือนสุ่มสลับเลย

• ตอนแรกหน้าดังกล่าว ทำงานได้ดีโดยไม่ใช้ JavaScript แต่ภายหลัง HTML ที่ถูกแทนที่กลับถูก encode เป็นข้อความ

  
   #strYQt8 { display: none; }
  
  

  เลยพังออกมาแบบนี้ ผมส่ง PR แก้ไว้ที่ GitHub แล้ว