شرح صفوف ومحتوى الفقرة
نظراً لأن ملفات SVG مبنية على لغة توصيف XML، فإن الملفات غير الموثوقة قد تخفي بداخلها أوامر برمجية تنفيذية ومشغلات أحداث تلقائية ضارة. يؤدي تضمين ملفات SVG المرفوعة من مستخدمين مجهولين مباشرة في شجرة المستند إلى ثغرات أمنية خطيرة من نوع البرمجة العابرة للمواقع (Cross-Site Scripting - XSS).
HTML
<!-- Safe external SVG rendered via inert <img> -->
<img src="/images/examples/shield-icon.svg"
alt="Sanitized security shield emblem"
width="96" height="96">
<!-- Inert img mode isolates untrusted SVG files -->يُوفر استدعاء ملفات SVG عبر وسم الصور القياسي
<img> حماية أمنية تلقائية؛ حيث يُعطل المتصفح تشغيل أي أكواد جافاسكريبت أو استدعاءات خارجية داخل بيئة الصورة تماماً. وفي حال كان التضمين المباشر Inline ضرورياً، يجب تعقيم كود SVG وتجريده من السكربتات الخبيثة عبر مكتبات موثوقة مثل DOMPurify.
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس دور عنصر picture في التوجيه الفني للصور المتجاوبة، والتبديل التلقائي لصيغ الصور الحديثة، وتضمين رسوميات SVG المتجهة وتنسيقها وإتاحتها وتعقيمها أمنياً. الخطوة التالية تنطلق بنا إلى الفصل السابع عشر لدراسة جداول HTML وهيكلة البيانات المنظمة.