كيفية استخدام الصور المتجهة بأمان مع WordPress

نشرت: 2019-06-12

هناك العشرات من أنواع ملفات الصور التي يمكنك استخدامها لوسائطك. من خارج الصندوق ، يدعم WordPress غالبية أنواع ملفات الصور الأكثر شيوعًا ، بما في ذلك .jpeg و .png و .gif والمزيد. ومع ذلك ، لا يتضمن أي دعم للصور المتجهة.

في الماضي ، تحدثنا عن كيفية إنشاء Scalable Vector Graphics (SVGs) ، بالإضافة إلى فوائدها. في هذه المقالة ، سنتطرق إلى مفهوم SVGs مرة أخرى ، ولماذا قد يكون استخدامها بطريقة خاطئة غير آمن ، وكيفية تنفيذها فعليًا دون المساس بموقع الويب الخاص بك.

هيا بنا إلى العمل!

اشترك في قناتنا على اليوتيوب

مقدمة إلى SVGs

صور SVG هي صور لا تعتمد على البكسل ، ولكن على المتجهات ، كما قد تكون خمنت من الاسم. إذا حاولت فتح ملف صورة عادي باستخدام محرر نصوص ، فسترى هراء نسبي. ومع ذلك ، إذا حاولت فتح SVG بدلاً من ذلك ، فمن المحتمل أن ترى رمزًا مثل ما يلي (مأخوذ من أول قطعة لدينا في SVGs): 

<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 ، مع اندفاعة من اللون في:

شعار Adobe.

تعد SVGs فريدة لأنها تحتفظ بجودتها بأي حجم (أي قابلة للتطوير) ، وستظل تبدو مثالية بغض النظر عن الأبعاد المستخدمة. وهذا يجعله نوع ملف مثاليًا لعدد قليل من حالات الاستخدام المحددة:

  • الشعارات التي غالبًا ما تريد إعادة استخدامها عبر منصات مختلفة.
  • سترغب في تغيير حجم الرموز اعتمادًا على السياق.
  • الصور التي تريد تحريكها باستخدام أوراق الأنماط المتتالية (CSS).

من الناحية الفنية ، هناك ثلاث طرق لإنشاء SVGs. يمكنك كتابة الكود بنفسك ، وهو أمر غير عملي إلا إذا كنت آلة. تتمثل الطرق الأخرى في رسم SVG من البداية ، أو التقاط صورة موجودة واستخدام برنامج مثل Illustrator أو Sketch لتصديرها كـ SVG.

على الرغم من الإيجابيات ، هناك عيبان لاستخدام SVGs. أولاً ، إنها ليست عملية للرسومات المعقدة. على سبيل المثال ، قد تحتاج الصورة العادية إلى ملايين من المتجهات لتكوينها ، مما يؤدي إلى إنشاء ملف SVG ضخم. العيب الثاني لاستخدام SVGs مرتبط بالسلامة - وسنناقش هذا في القسم التالي.

لماذا يمكن أن يؤثر استخدام SVGs على أمان موقع الويب الخاص بك

على الرغم من أننا نشير عادةً إلى ملفات SVG كملفات صور ، إلا أنه سيكون أكثر دقة أن نسميها "مستندات". بعد كل شيء ، يمكنك بسهولة فتح ملف SVG وقراءته وتعديله باستخدام محرر نصوص مشابه للمستند العادي.

تكمن المشكلات في القدرة على إضافة JavaScript جنبًا إلى جنب مع معلومات المتجه. من الناحية النظرية ، يعني هذا أن تنفيذ دعم SVG على موقع الويب الخاص بك قد يفتح لك الهجمات إذا قام شخص ما بتحميل ملف يحتوي على تعليمات برمجية ضارة.

إنه مصدر قلق كبير أن دعم SVG لووردبريس كان قيد المناقشة لأكثر من ست سنوات :

تذكرة تراك منذ ست سنوات.

على الرغم من أنك لست مضطرًا إلى المرور عبر التذكرة بأكملها ، إلا أن الجوهر هو حتى تكون هناك طريقة للتأكد من أن رمز SVG الذي تقوم بتحميله إلى WordPress آمن ، وقد يتسبب تطبيق الميزة في حدوث مشكلات أكثر من الفوائد.

في الوقت الحالي ، هناك بالفعل العديد من الأدوات التي يمكنك استخدامها للتأكد من أن SVGs الخاصة بك آمنة ، تسمى "المطهرات". ومع ذلك ، لا توجد طرق جيدة على ما يبدو لتطبيق وظائفها في WordPress حاليًا.

بشكل عام ، تعد إضافة دعم SVG إلى WordPress أمرًا بسيطًا نسبيًا من الناحية العملية. تكمن الصعوبة الحقيقية في القيام بذلك بطريقة لا تجعل موقع الويب الخاص بك عرضة للهجمات المحتملة.

طريقتان لاستخدام الصور المتجهة بأمان مع WordPress

في هذا القسم ، سنستكشف كلاً من الأسلوب اليدوي والمكوّن الإضافي لاستخدام SVG الآمن في WordPress. ستتمكن بعد ذلك من اختيار الخيار الأفضل لاحتياجاتك. دعنا نذهب اليها!

1. أضف دعم SVG يدويًا وقم بتعقيم الكود الخاص بك

يمكنك إضافة دعم SVG إلى WordPress في غضون دقائق باستخدام مقتطف من التعليمات البرمجية. ومع ذلك ، فإن هذا سيجعلك منفتحًا على مشكلات السلامة المحتملة التي ناقشناها من قبل. يتضمن النهج الأكثر أمانًا لتطبيق SVG الخطوات التالية:

  1. قم بتمكين دعم SVG عن طريق تعديل ملف function.php الخاص بك.
  2. قم بتقييد أدوار المستخدم التي تريدها من القدرة على تحميل ملفات .svg إلى WordPress.
  3. عقم كل ملف SVG قبل تحميله.

بشكل عام ، ليس من الصعب إنجاز الخطوتين الأولى والثانية. المهمة الأولى هي الوصول إلى موقع الويب الخاص بك عبر بروتوكول نقل الملفات (FTP) والانتقال إلى مجلد جذر WordPress الخاص بك. في الداخل، للبحث عن ملف functions.php الخاص بك، فتحه، وإضافة التعليمة البرمجية التالية (مجاملة من كريس Coyier من CodePen والخدع CSS): 

// 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 Upload Restriction ، لتحديد أنواع الملفات التي يمكن لكل دور مستخدم تحميلها.

كلا النهجين لا يكون عيوبها، التي تعد واحدة من الأسباب تنفيذ SVG اليدوي يمكن الحصول صعبة. ومع ذلك ، بمجرد أن تستقر على طريقة للتأكد من عدم تمكن أي شخص من تحميل SVG ضار ، فإنك تحتاج أيضًا إلى التأكد من عدم قيامك بذلك عن طريق الخطأ أيضًا.

من الناحية المثالية ، ستقوم بتشغيل كل SVG تقوم بتحميله على موقع الويب الخاص بك من خلال أداة التعقيم قبل القيام بذلك. سيأخذ هذا الملف الخاص بك ، وتأكد من أنه لا يحتوي على أي شيء غير مرغوب فيه ، وإزالته إذا كان يتضمن ذلك. في النهاية ، يترك لك هذا ملف SVG نظيفًا يمكنك أخيرًا تحميله إلى WordPress.

2. استخدم البرنامج المساعد الآمن SVG

من خلال النهج أعلاه ، أردنا أن نوضح لك مدى تعقيد تنفيذ SVG الآمن. هذا حتى تتمكن من تقدير ما يفعله المكون الإضافي Safe SVG بشكل صحيح.

البرنامج المساعد الآمن SVG.

باختصار ، يعتني هذا المكون الإضافي بجميع المشكلات التي ذكرناها من قبل ، بما في ذلك:

  • تمكينك من تحميل SVGs في المقام الأول.
  • تأكد من أنه يمكنك رؤية SVGs الخاصة بك داخل مكتبة الوسائط.
  • تعقيم رمز كل SVG تقوم بتحميله لمنع حدوث مشكلات أمنية.

يعد هذا إلى حد كبير نوعًا من المكونات الإضافية للتوصيل والتشغيل وهو بالتأكيد الطريقة الأكثر مباشرة لتطبيق SVG الآمن في WordPress. إذا كنت عازمًا على استخدام SVGs ، فننصحك بتجربتها.

كيفية تحريك SVGs باستخدام CSS والمكونات الإضافية

إذا واجهت كل المشاكل (اعتمادًا على} الطريقة التي تستخدمها) في تنفيذ SVGs في WordPress ، فربما ترغب في الحصول على أكبر فائدة مقابل أموالك. هذا يعني استخدام CSS لتحريك SVGs إذا كان الموقف يستدعي ذلك. هناك طريقتان يمكنك اتباعهما في هذه العملية ، وقد غطيناها في الماضي:

  1. قم بتحريك SVGs يدويًا باستخدام CSS كما تفعل مع أي عنصر آخر.
  2. استخدم أدوات مثل SVGator لمساعدتك في إنشاء وتحريك صور SVG.

إذا كنت ترغب في القليل من التجريب ، فبعض الرسوم المتحركة هنا وهناك يمكن أن تزيد من تجربة المستخدم لموقعك. والأهم من ذلك ، أن استخدام SVGs و CSS لتحقيق ذلك أفضل بكثير من القول بإضافة مقاطع فيديو أو صور GIF ، خاصة للأجهزة المحمولة.

استنتاج

تعد SVGs خيارًا رائعًا للعديد من المواقف. لإعطاء مثال ، فهي الخيار الأمثل لشعارات مواقع الويب نظرًا لقدرتها على التوسع. بشكل عام ، يمكن أن يساعدك استخدام SVGs في تصميم موقع ويب أكثر استجابة ، وهو أمر جيد دائمًا فيما يتعلق بمستخدميك.

ومع ذلك ، إذا كنت تخطط لإضافة دعم SVG إلى WordPress ، فأنت بحاجة إلى التأكد من استخدام أسلوب يحافظ على أمان موقعك. هناك طريقتان للتوصية:

  1. أضف دعم SVG يدويًا وقم بتعقيم التعليمات البرمجية الخاصة بك.
  2. استخدم البرنامج المساعد الآمن SVG.

هل لديك أي أسئلة حول كيفية استخدام SVGs بأمان في WordPress؟ دعنا نتحدث عنها في قسم التعليقات أدناه!

الصورة المصغرة للمادة: microtic / shutterstock.com