لماذا تعتبر صور SVG خطيرة للاستخدام ؟؟

اليوم سنشرح أحد أنواع الصور المستخدمة في الويب الحديث . و نرى لماذا يعد استخدامها غير آمن لموقعك أو تطبيقك . سوف نقوم بشرح مبادئ SVG أولاً .

أولاً : مقدمة الى صور SVG

SVG هي اختصار ل Scalable Vector Graphics . فائدة SVG هي رسم متجهات الرسوم عن طريق XML .

يمكن ان نرسم صورة لشعار التوازن باستخدام XML :

http://isecur1ty-vulnerable-lab.com/blog/examples/svg/good.svg

يمكنك عمل عرض للكود المصدري لترى ان النقاط تم تحديدها بXML

لو أردت رسم دائرة يمكنك استعمال الكود الآتي في HTML

<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

</body>
</html>

تبدأ صور svg بوسم <svg> و هناك عدة أسباب لاستخدامها:

متعدد الاستعمالات .
سهولة الحصول على القوالب .
مضغوط .
قابلة للاستعمال مع CSS .
مفتوحة للجميع .
جيدة جدا للاستخدام في الهواتف للاشكال والصور .
سهلة التحليل و عملية .

ثانياً : تاريخ SVG

أول مرة تم اقتراحها من قبل بعض اعضاء W3C في عام 1998 . تم اشتقاقها من ادوبي Postscript و VML .

تم نطويرها والعمل عليها في 1999 .

SVG 1.0 انطلقت في 4 سبتمبر 2001

SVG 1.1 انطلقت في 15 يناير 2003

SVG 1.1 الاصدار الثاني انطلق في 16 اغسطس 2011

الإصدار 1.2 لا يزال كمسودة تحت التطوير .

أنواع المتصفحات التي تدعم SVG

Gecko
Webkit
Presto
Trident

ثالثا: مميزات صور SVG

الأشكال الهندسية : الدوائر ، المربعات الخطوط و غيرها .
خطوط SVG .
الروابط .
الانميشن و التحولات الشكلية .
البيانات المتعددة او الMeta-data
تنفيذ السكربتات والاحداث(الهجوم هنا)
عالية الدقة .
يمكن تحريرها من أي محرر نصوص .

الآن لنأتي للجانب المهم في SVG للمختبرين الآمنين

رابعاً : SVG تحت الهجوم !

الجزء الأهم في ملفات SVG أنها تعتبر حلقة وصل بين الصور و بين صفحات HTML المعلمة بXML .

أولا يجب أن نعرف ما هو MIME type ؟

MIME type : و يسمى media type و عادة بـ content type في حال إرسال الملفات عبر الفورم و رفعها يتم تعريف الملف المرفوع بنوع الملف و لكل ملف MIME خاص به

مثلاً :

application/json لملفات json
text/html لصفحات HTML
image/png لصور png

في حالة SVG يكون الMIME هو image/svg+xml هذا النوع مفيد جداً لأنه سيفيدك في تخطي حماية رفع الملفات في أكثر الأحيان

المطور لا يكتب كل الMIME TYPE المسموح فهو يسمح لأي “صورة” أن ترفع لذلك يقوم بعمل الفتلر بالشكل image/~x و هذا يعني انه أي ملف نوع الMIME الخاص به يبدأ بـ image مسموح رفعه . و بسبب جهل أكثر المطورين فإن صور SVG قد تحتوي على كود js فهم يسمحون بها مثال على ذلك أحد أشهر المطورين في الاسكربت حيث قمت بإبلاغه حول هذه المشكلة وةكان متعجبا من أن هذا الأمر مسموح تنفيذ أكواد js في ملف صورة .

يمكنك الاطلاع على التقرير من هنا .

حتى إن منصة hackerone كتبوا مقالا حول التقرير الخاص بي و ناقشوا من خلاله العديد من الأمور حول فكرة صور SVG .

يمكنك الدخول عليها من هنا

https://hackerone.com/blog/Hacktivity-Highlights:-XSS-via-SVG

الآن لنأخذ مثال على صورة SVG تنفذ كود JS على شكل رسالة

يمكنك تجربتها من الرابط التالي

http://isecur1ty-vulnerable-lab.com/blog/examples/svg/bad.svg

الصورة تحتوي على الكود التالي

لاحظ أن الكود يحتوي على سكربت و صيغة الصورة svg والـ MIME هو image/svg+xml هذا يجعل هذا الهجوم مناسبا لعمل stored XSS ، يمكن وضع أكواد js في svg عن طريق أحداث js او href الخاصة بوسم a أو عدة طرق أخرى في xml.

كيف يتم تشغيل svg ؟

الدخول المباشر إلى ملف svg عن طريق المتصفح .
وسم svg في html .
استدعاء الصورة عن طريق وسم img (يجب ألا يشغل js ).
يمكن أيضا استدعاء الصورة عن طريق object .

svg مع XSS :

svg المستخدمة في وسم صورة لا تشغل js نفس الحال في خطوط svg و استعمال svg عن طريق CSS .
svg المستخدم في وسم iframe أو embed أو object يمرر js و يتم تنفيذه .

كل متصفح له خصائصه التي تختلف بعرض SVG و هناك أمر مهم أن ملفات SVG يمكن أن تعمل محلياً لذلك في حالة تنزليها و عرضها محليا أيضاً من الممكن أن تسبب خطرا على المستخدمين .

كلمة أخيرة

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