วิธีเพิ่มรูปภาพ SVG ใน WordPress อย่างปลอดภัย

วิธีเพิ่มรูปภาพ .svg ใน WordPress อย่างปลอดภัย

Written by

torr

in

ผู้เข้าชม 11 uip

ความเป็นมา SVG

รูปภาพ SVG (Scalable Vector Graphics) ถูกพัฒนาขึ้นโดย W3C ในช่วงปลายทศวรรษ 1990 และประกาศเป็นมาตรฐาน (W3C Recommendation) ในปี 2001

SVG เป็นฟอร์แมตภาพแบบเวกเตอร์ ที่เขียนด้วย XML ทำให้ขยาย/ย่อโดยไม่สูญเสียความคมชัดและง่ายต่อการควบคุมด้วย CSS/JavaScript

หลังจากนั้น SVG ก็กลายเป็นมาตรฐานสำคัญบนเว็บ ใช้ทำ icon, Interactive graphics และ Animation ที่รองรับโดยเบราว์เซอร์สมัยใหม่

WordPress รองรับไฟล์ SVG ไหม?

โดยค่าเริ่มต้น WordPress ไม่รองรับการอัปโหลดไฟล์ SVG โดยตรง เหตุผลด้านความปลอดภัย เพราะ SVG เป็นไฟล์ XML ที่เราหรือใครก็ได้ สามารถฝังโค้ด เช่น JavaScript, event handlers, external references หรือ XML entities ที่นำไปสู่ความเสี่ยงถูกโจมตีอย่าง XSS/Code Injection ได้

เพิ่มรูปภาพ .svg ใน WordPress อย่างปลอดภัย
เทคนิคเพิ่มรูปภาพ .svg ใน WordPress อย่างปลอดภัย

วิธีใช้งาน .SVG อย่างปลอดภัย

หลักการง่ายมากครับ เราต้องมีระบบการบริหารจัดการตรวจสอบคุณภาพ code ของ file .svg ทุกครั้ง เรียกกันว่าการ sanitize หรือทำความสะอาดไฟล์

ถ้าเรา sanitize ไฟล์ .svg ได้อย่างมีประสิทธิภาพ จนไม่มีสิ่งแปลกปลอมแทรกเข้ามาใน code ของรูป .svg ก็ถือว่าเป็นการใช้งาน .svg อย่างปลอดภัย

แต่ถ้าเราไม่ได้ทำการ sanitize แนะนำว่าไม่ควรเอา SVG มาใช้งานเพราะมีความเสี่ยงได้

ถ้ารู้หลักการเรื่องความปลอดภัยและวิธี sanitize แล้วอยากใช้หรือจำเป็นต้องใช้จริงๆ มาดูวิธีใช้งาน .svg ใน WordPress อย่างปลอดภัยกันครับ

วิธีการทำให้ WordPress รองรับ SVG

เราสามารถเปิดใช้งานการรองรับ SVG ใน WordPress ได้ โดยมี 2 วิธีหลัก คือ

  1. ใช้ปลั๊กอิน (Plugins):
    • เป็นวิธีที่ง่าย และแนะนำที่สุด สำหรับผู้ใช้ทั่วไป แต่ต้องเลือก plugin ที่มีความน่าเชื่อถือ
    • ปลั๊กอินยอดนิยม เช่น Safe SVG หรือ SVG Support จะช่วยอนุญาตให้อัปโหลดไฟล์ SVG ได้อย่างปลอดภัย โดยทั้ง 2 plugins ที่ยกตัวอย่างมากจะมี function การ “ทำความสะอาด” (sanitizing) โค้ด SVG เพื่อลบโค้ดอันตรายออกก่อนที่จะบันทึกไฟล์
  2. เพิ่มโค้ดลงในไฟล์ functions.php:
    • วิธีนี้สำหรับผู้ที่มีความรู้ด้านโค้ดและมีความเสี่ยงสูงกว่า
    • จะต้องเพิ่มโค้ดเพื่ออนุญาตให้ยอมรับ mime type ของ SVG ในส่วนหลังบ้านของ WordPress แต่วิธีนี้ยังไม่มีการทำความสะอาดโค้ด (unsanitized) จึงอาจมีความเสี่ยงหากคุณไม่แน่ใจในแหล่งที่มาของไฟล์ SVG นั้นๆ เราต้องสร้าง function สำหรับ sanitize ขึ้นมาใช้เองด้วย ซึ่งยุ่งยากไปอีกขั้นกับ filter

สรุป

  • WordPress ไม่ให้ใช้ SVG โดยดีฟอลต์เพราะ ความปลอดภัย
  • ถ้าจะเปิดใช้ SVG ต้อง sanitize ไฟล์, จำกัดผู้ที่อัปโหลด, และ/หรือใช้ปลั๊กอินเชื่อถือได้ที่อัปเดตอย่างสม่ำเสมอ