شرح صفوف ومحتوى الفقرة
انتبه جيداً إلى المنفذين الوحيدين اللذين قد يكسر بهما المبرمج درع الحماية التلقائي في React عن غير قصد:
- خاصية
dangerouslySetInnerHTML: سُميت بكلمة «خطير» عمداً لتنبيهك! فتمرير نصوص المستخدم إليها يحقن عناصر خاماً مباشرة في الصفحة، لذا يُحظر استخدامها مع أي محتوى غير موثوق دون تطهيره بمكتبة قوائم بيضاء صارمة مثلDOMPurify. - روابط
hrefغير المفحوصة: ترميز النصوص لا يمنع بروتوكولjavascript:إذا وُضع في سمة الرابط<a href={userUrl}>! تحقق دائماً من الروابط الخارجية عبرnew URL()ولا تسمح إلا بالبروتوكولات الآمنةhttps:أوhttp:أوmailto:.
راجع ملخص القواعد والأمان في الجدول التالي:
| النمط البرمجي في JSX | السلوك وقت التشغيل | الحكم الهندسي والأمني |
|---|---|---|
<p>{untrustedText}</p> | يحول المحارف إلى عقدة نصية آمنة غير تنفيذية | آمن تلقائياً ضد حقن وسوم XSS النصية |
<img src={imageUrl} /> | يمرر قيمة المتغير البرمجي مباشرة بدون تنصيص | آمن مع المسارات المحلية أو بروتوكول https: |
<a href={userSubmittedUrl}> | يربط بروتوكول الرابط مباشرة بعنصر الانتقال | يلزم فحص البروتوكول وحظر روابط javascript: |
dangerouslySetInnerHTML | يحقن شيفرة HTML خاماً دون أي ترميز تلقائي | خطر؛ لا يُستخدم إلا بعد تطهير صارم بـ DOMPurify |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلّمت في هذا الدرس تضمين تعابير JavaScript الديناميكية في النصوص والسمات بالأقواس المعقوفة، والتفريق بين التعابير والجمل التحكمية، وتنسيق القيم بدوال Intl النقية، وآلية الحماية التلقائية ضد XSS مع ضوابط تأمين الروابط وحقن HTML. الخطوة التالية: انتقل الآن إلى الدرس رقم 9 «تنسيق المكونات في React» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.