วิธีการใช้ภาพเวกเตอร์อย่างปลอดภัยกับ WordPress

มีไฟล์รูปภาพหลายประเภทที่คุณสามารถใช้กับสื่อของคุณได้ นอกกรอบ WordPress รองรับประเภทไฟล์รูปภาพยอดนิยมส่วนใหญ่ รวมถึง .jpeg , .png , .gif และอื่นๆ อย่างไรก็ตาม ไม่รองรับภาพเวกเตอร์

ในอดีต เราได้พูดคุยเกี่ยวกับวิธีสร้าง Scalable Vector Graphics (SVG) รวมถึงประโยชน์ที่ได้รับ สำหรับบทความนี้ เราจะพูดถึงแนวคิดของ SVG อีกครั้ง เหตุใดการใช้ในทางที่ผิดจึงไม่ปลอดภัย และวิธีใช้งานจริงโดยไม่กระทบต่อเว็บไซต์ของคุณ

ไปทำงานกันเถอะ!

สมัครสมาชิกช่อง Youtube ของเรา

บทนำสู่ SVG

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

<svg viewBox='0 0 105 93' xmlns='http://www.w3.org/2000/svg'></pre>
<path d='M66,0h39v93zM38,0h-38v93zM52,35l25,58h-16l-8-18h-18z' fill='#ED1C24'/>
</svg>

โดยสรุปแล้ว สิ่งเหล่านี้คือชุดของเวกเตอร์ที่ประกอบขึ้นเป็นโลโก้ Adobe โดยมีเส้นประของสีอยู่ใน:

SVG มีเอกลักษณ์เฉพาะตัวเนื่องจากรักษาคุณภาพในทุกขนาด (เช่น ปรับขนาดได้) และจะยังดูสมบูรณ์แบบไม่ว่าจะใช้ขนาดใดก็ตาม ทำให้เป็นไฟล์ที่เหมาะสำหรับกรณีการใช้งานเฉพาะบางกรณี:

• โลโก้ที่คุณมักจะต้องการใช้ซ้ำในแพลตฟอร์มต่างๆ
• ไอคอนที่คุณต้องการปรับขนาดตามบริบท
• รูปภาพที่คุณต้องการทำให้เคลื่อนไหวโดยใช้ Cascading Style Sheets (CSS)

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

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

เหตุใดการใช้ SVG จึงส่งผลต่อความปลอดภัยของเว็บไซต์ของคุณได้

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

ปัญหาอยู่ที่ความสามารถในการเพิ่ม JavaScript ควบคู่ไปกับข้อมูลเวกเตอร์ ในทางทฤษฎี นี่หมายความว่าการใช้การสนับสนุน SVG ในเว็บไซต์ของคุณอาจเปิดให้คุณโจมตีได้หากมีคนอัปโหลดไฟล์ที่มีโค้ดที่เป็นอันตราย

เป็นเรื่องที่น่ากังวลอย่างมากที่การสนับสนุน SVG สำหรับ WordPress อยู่ภายใต้การสนทนามานานกว่า หกปี :

แม้ว่าคุณจะไม่ต้องอ่านตั๋วทั้งหมด แต่ส่วนสำคัญก็คือจนกว่าจะมีวิธีที่จะตรวจสอบให้แน่ใจว่ารหัส SVG ที่คุณอัปโหลดไปยัง WordPress นั้นปลอดภัย การใช้คุณสมบัตินี้อาจทำให้เกิดปัญหามากกว่าผลประโยชน์

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

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

2 วิธีในการใช้ภาพเวกเตอร์อย่างปลอดภัยด้วย WordPress

สำหรับส่วนนี้ เราจะสำรวจทั้งวิธีการด้วยตนเองและแบบใช้ปลั๊กอินเพื่อการใช้งาน SVG อย่างปลอดภัยใน WordPress จากนั้นคุณจะสามารถเลือกตัวเลือกที่ดีที่สุดสำหรับความต้องการของคุณ ไปกันเถอะ!

1. เพิ่มการสนับสนุน SVG ด้วยตนเองและฆ่าเชื้อโค้ดของคุณ

คุณสามารถเพิ่มการรองรับ SVG ให้กับ WordPress ได้ในเวลาไม่กี่นาทีด้วยข้อมูลโค้ด อย่างไรก็ตาม การทำเช่นนี้จะทำให้คุณเปิดกว้างต่อปัญหาด้านความปลอดภัยที่เราได้พูดคุยกันก่อนหน้านี้ แนวทางที่ปลอดภัยยิ่งขึ้นในการปรับใช้ SVG นั้นเกี่ยวข้องกับขั้นตอนต่อไปนี้:

1. เปิดใช้งานการสนับสนุน SVG โดยแก้ไขไฟล์ functions.php ของคุณ
2. จำกัดบทบาทผู้ใช้ที่คุณต้องการไม่ให้สามารถอัปโหลดไฟล์ . svg ไปยัง WordPress
3. ฆ่าเชื้อไฟล์ SVG ทุกไฟล์ก่อนที่คุณจะอัปโหลด

โดยรวมแล้ว ขั้นตอนที่หนึ่งและสองนั้นทำได้ไม่ยาก งานแรกคือการเข้าถึงเว็บไซต์ของคุณผ่าน File Transfer Protocol (FTP) และไปที่โฟลเดอร์รากของ WordPress ข้างใน ค้นหาไฟล์ functions.php ของคุณ เปิดและเพิ่มโค้ดต่อไปนี้ (ได้รับความอนุเคราะห์จาก Chris Coyier จาก CodePen และ CSS Tricks):

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {

  global $wp_version;
  if ( $wp_version !== '4.7.1' ) {
     return $data;
  }

  $filetype = wp_check_filetype( $filename, $mimes );

  return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
  ];

}, 10, 4 );

function cc_mime_types( $mimes ){
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );

function fix_svg() {
  echo '<style type="text/css">
        .attachment-266x266, .thumbnail img {
             width: 100% !important;
             height: auto !important;
        }
        </style>';
}
add_action( 'admin_head', 'fix_svg' );

ซึ่งตอบสนองสองฟังก์ชัน – ช่วยให้คุณสามารถอัปโหลดไฟล์ SVG ไปยัง WordPress และแสดงภาพภายในไลบรารีสื่อของคุณ เมื่อคุณเพิ่มโค้ดแล้ว ให้บันทึกการเปลี่ยนแปลงในไฟล์ functions.php ของคุณและปิด

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

1. สร้างบทบาทผู้ใช้ที่กำหนดเองด้วยการเข้าถึงไลบรารีสื่อแบบจำกัดหรือไม่มีเลย
2. ใช้ปลั๊กอิน เช่น การจำกัดการอัปโหลด WP เพื่อจำกัดประเภทของไฟล์ที่แต่ละบทบาทของผู้ใช้สามารถอัปโหลดได้

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

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

2. ใช้ปลั๊กอิน SVG ที่ปลอดภัย

ด้วยวิธีการข้างต้น เราต้องการแสดงให้คุณเห็นว่าการติดตั้ง SVG ที่ปลอดภัยมีความซับซ้อนเพียงใด เพื่อให้คุณสามารถชื่นชมการทำงานของปลั๊กอิน Safe SVG ได้อย่างถูกต้อง

โดยสรุป ปลั๊กอินนี้จะดูแลปัญหาทั้งหมดที่เราระบุไว้ก่อนหน้านี้ รวมถึง:

• ช่วยให้คุณสามารถอัปโหลด SVG ได้ตั้งแต่แรก
• ตรวจสอบให้แน่ใจว่าคุณสามารถดู SVG ของคุณได้ภายในไลบรารีสื่อ
• ฆ่าเชื้อโค้ดของ SVG ทั้งหมดที่คุณอัปโหลดเพื่อป้องกันปัญหาด้านความปลอดภัย

นี่เป็นปลั๊กอินประเภท Plug-and-Play ที่ค่อนข้างตรงไปตรงมา และเป็นแนวทางที่ตรงไปตรงมาที่สุดในการใช้งาน SVG อย่างปลอดภัยใน WordPress หากคุณต้องการใช้ SVG เราขอแนะนำให้คุณลองใช้ดู

วิธีทำให้ SVG เคลื่อนไหวโดยใช้ CSS และปลั๊กอิน

หากคุณประสบปัญหาทั้งหมด (ขึ้นอยู่กับ } วิธีที่คุณใช้) ในการใช้งาน SVG ใน WordPress คุณอาจต้องการได้รับประโยชน์สูงสุดจากเงินที่จ่ายไป นี่หมายถึงการใช้ CSS เพื่อทำให้ SVG ของคุณเคลื่อนไหวหากสถานการณ์เรียกร้อง มีสองวิธีที่คุณสามารถดำเนินการตามขั้นตอนที่เราได้กล่าวถึงไปแล้วในอดีต:

1. ทำให้ SVG เคลื่อนไหวด้วยตนเองด้วย CSS เช่นเดียวกับที่คุณทำกับองค์ประกอบอื่นๆ
2. ใช้เครื่องมือ เช่น SVGator เพื่อช่วยคุณสร้างและทำให้ SVG เคลื่อนไหว

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

บทสรุป

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

อย่างไรก็ตาม หากคุณกำลังวางแผนที่จะเพิ่มการสนับสนุน SVG ให้กับ WordPress คุณต้องแน่ใจว่าคุณใช้แนวทางที่ช่วยให้ไซต์ของคุณปลอดภัย มีสองวิธีที่จะแนะนำ:

1. เพิ่มการสนับสนุน SVG ด้วยตนเองและฆ่าเชื้อโค้ดของคุณ
2. ใช้ปลั๊กอิน Safe SVG

คุณมีคำถามเกี่ยวกับวิธีใช้ SVG อย่างปลอดภัยใน WordPress หรือไม่? พูดคุยเกี่ยวกับพวกเขาในส่วนความคิดเห็นด้านล่าง!

ภาพขนาดย่อของบทความ: microtic / shutterstock.com