כיצד לאפשר העלאת קבצי SVG דרך ספריית המדיה

כברירת מחדל, וורדפרס חוסמת העלאה של קבצי SVG לספריית המדיה (״אין לך הרשאות להעלות קבצים מהסוג הזה״, או בלעז ״Sorry, you are not allowed to upload this file type״). כדי לאפשר העלאת קבצי SVG, הוסיפו את סוג ה-MIME של SVG באמצעות הפילטר upload_mimes והגבילו אותו למשתמשים מהימנים.

ההגבלה הזו חשובה, כי קובץ SVG יכול להכיל JavaScript שירוץ על הדומיין שלכם.

להדבקת קוד SVG ישירות בתוכן הפוסט, תנו מבט בסניפט כיצד לאפשר Inline SVG בעורך התוכן של וורדפרס.

אפשור העלאת SVG בקובץ functions.php

הוסיפו את הקוד הבא לקובץ functions.php של תבנית הבת שלכם או לתוסף קטן מותאם אישית:

function cc_mime_types( $mimes, $user = null ) {
    $can_upload_svg = $user ? user_can( $user, 'unfiltered_html' ) : current_user_can( 'unfiltered_html' );

    if ( $can_upload_svg ) {
        $mimes['svg'] = 'image/svg+xml';
    }

    return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types', 10, 2 );

כיצד הקוד עובד

הפילטר upload_mimes מסנן את רשימת סיומות הקבצים וסוגי ה-MIME שוורדפרס מקבלת. השורה $mimes['svg'] = 'image/svg+xml'; מוסיפה את SVG לרשימה הזו.

בדיקת ההרשאות היא החלק שרוב הסניפטים משמיטים.

unfiltered_html היא ההרשאה לפרסם HTML ו-JavaScript גולמיים, וליבת וורדפרס משתמשת באותה בדיקה לפני שהיא מאפשרת העלאת קבצי .html ו-.js. באתר בודד, למנהלים ולעורכים יש אותה. ברשת אתרים (Multisite), רק למנהלי רשת (Super Admins).

משתמשים עם ההרשאה הזו כבר יכולים להוסיף סקריפטים לפוסטים, כך שהעלאת SVG לא נותנת להם שום דבר חדש. מחברים (Authors) עדיין לא יוכלו להעלות קבצי SVG.

אבטחת SVG: הגבלה או סניטציה

קובץ SVG יכול להכיל תגיות <script> ו-event handlers כמו onload.

סקריפטים לא רצים כשה-SVG מוצג בתגית <img> או כרקע ב-CSS. הם כן רצים כשמישהו פותח את כתובת הקובץ ישירות, וזה פותח פתח ל-XSS (Cross-Site Scripting) על הדומיין שלכם.

יש לכם שתי אפשרויות בטוחות:

• הגבלת ההעלאה למשתמשים מהימנים, כפי שעושה הסניפט שלמעלה.
• סניטציה של כל קובץ SVG בזמן ההעלאה, כך שסקריפטים ומאפיינים מסוכנים יוסרו. התוסף Safe SVG של 10up עושה זאת עם הספרייה svg-sanitizer, ומאפשר לבחור אילו תפקידים רשאים להעלות קבצי SVG.

אם תפקידים נמוכים יותר, לקוחות או טופס ב-front-end של האתר צריכים להעלות קבצי SVG, השתמשו בסניטציה. הוספת svg ל-upload_mimes עבור כל המשתמשים ללא סניטציה היא בדיוק התצורה שממנה כדאי להימנע.

עדיין מקבלים ״אין לך הרשאות להעלות קבצים מהסוג הזה״?

החל מוורדפרס 4.7.1, הסיומת לבדה לא מספיקה. כאשר הרחבת ה-fileinfo של PHP זמינה, וורדפרס קוראת גם את תוכן הקובץ, ועבור SVG היא מקבלת את הקובץ רק כש-fileinfo מזהה אותו כ-image/svg+xml.

רוב קבצי ה-SVG המיוצאים עוברים את הבדיקה.

ב-PHP 8.3 למשל, קבצים שמתחילים ב-<svg או ב-<?xml מזוהים כראוי, אבל קובץ שמתחיל בהערת HTML או בשורות ריקות מזוהה כ-text/plain ונדחה.

פתחו קובץ כזה בעורך טקסט והסירו את כל מה שמופיע לפני תגית הפתיחה.

בדקו גם שאתם מחוברים כמשתמש בתפקיד שיש לו unfiltered_html, ושתוסף אבטחה לא חוסם את סוג הקובץ. לשגיאות העלאה אחרות, תנו מבט בפוסט פתרון בעיות בהעלאת תמונות בוורדפרס.

וורדפרס לא יוצרת גדלי תמונה מוקטנים (thumbnails) עבור קבצי SVG ולא שומרת עבורם רוחב או גובה, לכן הגדירו את גודל התצוגה ב-CSS או בהגדרות הבלוק.

להוספת סוגי קבצים אחרים באותה דרך, תנו מבט בפוסט כיצד לאפשר העלאת סוגי קבצים נוספים בוורדפרס.

שאלות נפוצות

הנה כמה שאלות שעולות לא מעט לגבי העלאת קבצי SVG בוורדפרס: