محتويات الدورة

React / الأداء والحدود الموثوقة / الدرس 17

الأمن وحدود الثقة

استخدم عرض النص بأمان مع ضبط التفويض والعناوين وHTML الخام وثقة الاعتماديات.

وقت القراءة التقريبي: 3 دقيقةتاريخ مراجعة المحتوى
في هذه الصفحة

أهداف الدرس

  • البدء بما يتحكم به المدخل
  • التحقق من بقاء السلسلة نصا
  • حماية العملية والاعتماديات

البدء بما يتحكم به المدخل

اسرد النص والمسار والرد والمحتوى والاعتماد ثم تتبعها للنص والعنوان وHTML والتخزين والخادم. يمنع العرض العادي تفسير السلسلة ترميزا ولا يتحقق من كل سياق. يحتاج URL سياسة والفعل الخادمي تحققا وتفويضا. تجنب تعقيما عاما مبهمًا؛ لكل حد عقده.

المحتوى المنسق بنيوي حيث يمكن

فضل مكونات للتنسيق المعروف. تتجاوز dangerouslySetInnerHTML عرض النص وتحتاج سياسة وتعقيما موثوقا؛ ليس التعبير المنتظم معقما عاما. تدعم CSP ولا تستبدل المعالجة. لا تثق بالمحتوى الخام لأنه من خادمك فقد يحمل نص مستخدم. اجعل المصدر والتحويل والمسموح وصيانة المعقم قابلة للمراجعة.

التحقق من بقاء السلسلة نصا

يعرض المثال سلسلة بشكل ترميز غير مؤذ فتظهر الأقواس ولا تنشأ strong. يثبت النص لا أمانا شاملا. تساعد البنية الإتاحة باختيار العناوين والتسميات بدل الترميز العشوائي. لا تخف أخطاء مفيدة أو تسجل سجلات حساسة؛ قدم تصحيحا دون كشف رموز واستعلامات وداخليات بلا حاجة.

jsx وحدة مكون — تتطلب مضيف React الموضح بالمقرر
const text = "<strong>draft</strong>";
export default function App() { return <main><h1>Text boundary</h1><p>{text}</p></main>; }
الناتج المتوقع
Visible paragraph: <strong>draft</strong>. No strong element is created from the string.

السلسلة ابن نصي وتظهر أقواسها دون عنصر strong.

ضبط الوجهات عن قصد

يقبل المثال HTTPS على أصل مصطنع واحد بمحلل URL لا بادئة مضللة. تناسب السياسة العينة وتحتاج التطبيقات تحديد النسبي والخارجي والتحويل والتنزيل. لا تعني سلامة رابط منع SSRF بخادم يجلب عناوين ويواجه DNS والداخلي والتحويل والقدرات. لا تفترض أن JSX تتحقق من ذلك.

jsx وحدة مكون — تتطلب مضيف React الموضح بالمقرر
export function approvedHref(value) { try { const url = new URL(value); return url.protocol === "https:" && url.origin === "https://docs.example.test" ? url.href : null; } catch { return null; } }
export default function App() { const href = approvedHref("https://docs.example.test/guide"); return <main><h1>Approved destination</h1>{href ? <a href={href}>Read guide</a> : <p>Destination unavailable</p>}</main>; }
الناتج المتوقع
Read guide links to https://docs.example.test/guide.

يحسب المثال رابطا ويعرضه دون طلب ويشترط الأصل والبروتوكول المحددين.

حماية العملية والاعتماديات

صلاحيات الواجهة توجيه لا فرض؛ تحقق وفوض بالخادم وصمم الجلسة وCSRF وفق التكامل. أبعد الأسرار عن الحزم والبيانات. راجع هوية الحزمة والقفل والإصدار والتنبيهات؛ قد ينفذ التثبيت كودا ولا يثبت التدقيق الأمان. اختبر السالب بمعزل مأذون واجعل الخيارات الخطرة صريحة لا خصائص عرض عادية.

الأخطاء الشائعة وإصلاحها

يصبح الخام ترميزا تنفيذيا

لماذا يحدث؟
دخل غير الموثوق منفذ HTML.
كيف تصلحه؟
استخدم النص أو حدا مراجعا.
كيف تتجنب تكراره؟
حدد القدرة وحدها.

يعد إخفاء زر الإدارة حماية

لماذا يحدث؟
لا يوجد إلا فحص العرض.
كيف تصلحه؟
فوض العملية بالخادم.
كيف تتجنب تكراره؟
اختبر المورد بأدوار معزولة.

تقبل البادئة مضيفا خاطئا

لماذا يحدث؟
اختلط النص بهوية الأصل.
كيف تصلحه؟
حلل URL وافرض السياسة.
كيف تتجنب تكراره؟
اختبر المضيف والبروتوكول.

اختبر فهمك

1. هل يثبت عرض النص بأمان سلامة فعل خادم يستقبله؟

اعرض الحل المشروح

لا؛ يعالج العرض سياق الترميز، ويجب على الخادم التحقق والمصادقة والتفويض وضبط قدراته. لا ينتقل ضمان حد لآخر تلقائيا.

2. لماذا تتجنب خاصية html غير مقيدة في بطاقة عامة؟

اعرض الحل المشروح

تنشر منفذ تجاوز بين مستدعين وتخفي عقد الثقة. فضل الأبناء البنيويين واعزل الغني المبرر بواجهة واضحة وسياسة تعقيم مفروضة.

أهم ما تعلمته

  • يفيد النص الافتراضي ضمن سياقه.
  • فوض عند الخادم الحقيقي.
  • وضح قدرات الخام والعناوين.

المراجع الرسمية