เจาะเบื้องหลังการแปลงทวีตเป็น PDF: อุปสรรค CORS และปัญหายูนิโค้ด
นักพัฒนาแชร์ประสบการณ์การสร้างเครื่องมือแปลงโพสต์ X หรือ Twitter ให้เป็นไฟล์ PDF พร้อมแก้ปัญหาจุกจิกทั้งเรื่อง CORS โทเค็น และฟอนต์ภาษา

ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- การดึงข้อมูลทวีตผ่านเบราว์เซอร์ตรงๆ ทำไม่ได้เนื่องจากติดนโยบาย CORS
- ต้องใช้เซิร์ฟเวอร์เป็นตัวกลางในการดึงข้อมูลโดยอาศัยโทเค็นที่คำนวณจากไอดีทวีต
- แก้ปัญหาฟอนต์ภาษาอื่นและอีโมจิใน PDF ด้วยการเรนเดอร์ผ่านแคนวาสของเบราว์เซอร์
- ยอดการมีส่วนร่วมจะแสดงเฉพาะไลก์และรีพลายตามข้อมูลจริงจากเอนด์พอยต์
การสร้างเครื่องมือชิ้นหนึ่งเพื่อแปลงลิงก์โพสต์จากแพลตฟอร์ม X หรือ Twitter ให้กลายเป็นไฟล์ PDF ที่สะอาดตา ครบถ้วนทั้งข้อความ ชื่อผู้เขียน และรูปภาพ โดยไม่ต้องใช้วิธีจับภาพหน้าจอหลายภาพมาต่อกัน ดูเหมือนจะเป็นโปรเจกต์ที่ใช้เวลาทำเพียงแค่บ่ายเดียว ทว่าในความเป็นจริงกลับเต็มไปด้วยอุปสรรคทางเทคนิคที่ท้าทายความสามารถไม่น้อย
ความพยายามแรกสุดคือการดึงข้อมูลทวีตผ่านเอนด์พอยต์ syndication ซึ่งวิดเจ็ตฝังตัวของ X ใช้เอง ทว่ากลับติดปัญหาหัวข้อ Access-Control-Allow-Origin ที่อนุญาตเฉพาะโดเมนของ X เท่านั้น ทำให้เบราว์เซอร์บล็อกการเรียกใช้งานผ่าน CORS ทันที ส่วนเอนด์พอยต์บทสนทนารุ่นเก่าก็ส่งค่าว่างกลับมา ขณะที่ API ทางการก็ต้องใช้คีย์แบบมีค่าใช้จ่าย
ทางออกที่ใช้งานได้จริงจึงต้องพึ่งพาเซิร์ฟเวอร์ เนื่องจากกฎ CORS มีผลเฉพาะกับเบราว์เซอร์เท่านั้น ฝั่งเซิร์ฟเวอร์จึงทำหน้าที่รับคำขอจากเบราว์เซอร์แล้วส่งต่อไปยัง X โดยใช้สแตก WordPress และสร้าง REST เอนด์พอยต์ขนาดเล็กขึ้นมาจัดการ
นโยบาย Cross-Origin Resource Sharing หรือ CORS เป็นกลไกความปลอดภัยบนเว็บเบราว์เซอร์ที่สำคัญมากในการป้องกันไม่ให้เว็บไซต์หนึ่งแอบดึงข้อมูลจากอีกเว็บไซต์โดยไม่ได้รับอนุญาต การที่นักพัฒนาต้องดึงผ่านเซิร์ฟเวอร์จึงเป็นทางออกคลาสสิกที่เรียกว่า Backend Proxy เพื่อหลีกเลี่ยงข้อจำกัดนี้
เอนด์พอยต์ดังกล่าวจำเป็นต้องมีพารามิเตอร์เคียวรีโทเค็น ซึ่งไม่ใช่คีย์ API แต่เป็นค่าที่ประมวลผลมาจากไอดีทวีต โดยใช้สูตรคำนวณที่ถอดแบบมาจากโค้ดฝังตัวของ X เอง ซึ่งช่วยให้ระบบสามารถดึงข้อมูลเนื้อหาออกมาได้สำเร็จ

ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
อุปสรรคชิ้นใหญ่ต่อมาคือการจัดการกับรูปภาพและฟอนต์ โดยการแก้ปัญหาภาพข้ามโดเมนที่ดีที่สุดคือให้เซิร์ฟเวอร์ดึงไบต์ของรูปภาพแล้วแปลงเป็นดาต้า URL แบบ base64 เพื่อตัดปัญหา CORS ให้หมดไป
ในส่วนของการสร้างไฟล์ PDF ด้วยไลบรารี jsPDF นั้นพบปัญหาหนักกับตัวอักษรนอกเหนือจากกลุ่มภาษาละติน-1 เช่น ภาษาฮินดี ภาษาอาหรับ ตัวอักษร CJK หรืออีโมจิ ซึ่งจะแสดงผลเป็นกล่องสี่เหลี่ยมหรือตัวอักษรที่พังทลาย วิธีแก้ที่ได้ผลจริงคือการใช้แคนวาสของเบราว์เซอร์ในการเรนเดอร์ข้อความที่มีระบบฟอนต์รองรับทุกภาษาอยู่แล้ว ก่อนจะแปลงเป็นภาพความละเอียดสูงแปะลงใน PDF
สำหรับข้อมูลสถิติการมีส่วนร่วม เอนด์พอยต์สาธารณะจะส่งค่าไลก์และจำนวนบทสนทนากลับมา แต่ไม่มีข้อมูลรีโพสต์หรือยอดการมองเห็น ทางผู้พัฒนาจึงเลือกแสดงเฉพาะเมตริกที่มีอยู่จริงเพื่อความโปร่งใส แทนที่จะแสดงตัวเลขปลอมหรือขีดว่าง
ที่มา: Dev.to
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น