Angular / المتقدم / الدرس 16
الأمان وحدود الثقة
استخدم حماية Angular بحسب السياق واحفظ فحص البيانات والصلاحيات والأسرار عند حدودها الفعلية.
في هذه الصفحة
أهداف الدرس
- تمييز استيفاء النص وربط HTML والوصول المباشر.
- تجنب تجاوز الحماية كإصلاح عرض عادي.
- إظهار إذن الخادم والناتج العام المنتقى.
لا توثّق حماية الإطار هوية المستخدم
يحمي Angular سياقات عرض معينة ولا يمنح الإذن بمجرد الترجمة. ليست الحراس والأزرار المخفية والمدخلات والواجهات فحص خادم. افحص الخارج وفوّض الخادم وأعد المسموح فقط. ينتقي النموذج بيانات اصطناعية ولا يوثق هوية أو ينقل. حدّد دخول القيم وتفسيرها وسلطة القرار؛ ولا يجري المقرر مسحًا أو طلبًا حقيقيًا أو تغيير نظام.
لا يحذف النوع الضيق الحقول الخاصة
يبقي إسناد كائن أغنى لواجهة عنوان حقوله الفعلية. ينشئ النموذج عنوانًا فقط ويسلسله ليوضح تقليل البيانات محليًا، ويقرر الخادم إذن تلقيه. لا يخفي العميل سرًا نزل لذاكرته. لا تضمّن اعتمادًا خاصًا في بيئة المتصفح أو الحزمة؛ فلا يصبح الثابت سرًا بمجرد اسمه.
export {};
type StoredCourse = { title: string; internalToken: string };
function publicCourse(course: StoredCourse): { title: string } { return { title: course.title }; }
const stored: StoredCourse = { title: "Forms", internalToken: "synthetic" };
console.log(JSON.stringify(publicCourse(stored)));
{"title":"Forms"}
يتسلسل title فقط ببيانات اصطناعية دون إثبات هوية أو إذن أو تنظيف متصفح.
إبقاء غير الموثوق بيانات لا قوالب مولدة
يعامل الاستيفاء القيمة كنص لا وسوم تنفيذ. لربط HTML والعنوان سياقات وتنظيف موثق مختلف، وتحتاج موارد URL وDOM المباشر عناية فلا تعمم حماية. يعرض المقطع وصفًا نصيًا ولو شابه الوسوم ولا يتجاوز الثقة أو يترجم نص مستخدم قالبًا. تغير واجهات التجاوز قرار الثقة وليست علاج شكل غير مريح؛ راجع المصدر وسياق تفسيره.
<article>
<h2>{{ course().title }}</h2>
<p>{{ description() }}</p>
</article>
إذا شابه الوصف الوسوم يعرضه الاستيفاء نصًا لا HTML مقصودة، ويحتاج فحص DOM مضيفًا فعليًا.
تطبيق الضبط عند طبقة تفسير القيمة
تضيف CSP وTrusted Types حماية بإعداد يوافق البناء والمضيف ولا تستبدلان الربط الصحيح أو فحص الخادم. لا يصير string HTML أو SQL أو تحويلًا معتمدًا تلقائيًا. تظل الهوية والكوكيز وCSRF وإذن API عقودًا للبيئة. احجب الرموز والأجسام الحساسة وقدم رسالة آمنة دون مسارات وإعداد. اختبر الرفض والمشوه منفصلين بدل العنصر المخفي.
فحص التفسير الفعلي ومسارات الرفض
افحص نصًا وناتجًا ورفضًا ببيانات اصطناعية وبيئة مصرح بها. لا يصدق انتقاء الكائن تنظيف المتصفح أو الإذن، ولا يصدق المحلل ترويسات CSP. راجع التحديث والدعم الرسمي ولا تجعل النسخة التعليمية صالحة للأبد. لا تخف الفشل أو تتجاوز الثقة لإرضاء عرض. سمِّ الضبط والإدخال والبيئة والحد ليعرف المراجع المثبت وما يحتاج مراجعة.
الأخطاء الشائعة وإصلاحها
معاملة زر مخفي كإذن.
- لماذا يحدث؟
- خُلط العرض بعملية خادم محمية.
- كيف تصلحه؟
- افرض الإذن عند API.
- كيف تتجنب تكراره؟
- اختبر الرفض المباشر منفصلًا عن الظهور.
إضافة تجاوز تنظيف لإصلاح عرض نص.
- لماذا يحدث؟
- حلت راحة العرض محل قرار ثقة مراجع.
- كيف تصلحه؟
- استخدم الربط الصحيح وراجع المحتوى الغني.
- كيف تتجنب تكراره؟
- أبقِ الخارج بيانات لا قوالب مولدة.
تحوي حزمة المتصفح اعتمادًا خاصًا.
- لماذا يحدث؟
- اعتُبر إعداد البناء مخزن أسرار.
- كيف تصلحه؟
- احفظ السر بالخادم واعرض العام المسموح.
- كيف تتجنب تكراره؟
- راجع النواتج وحقول السجل.
اختبر فهمك
1. استبدل الانتقاء بإعادة stored بنوع عنوان فقط. ماذا يكشف JSON ولماذا؟
اعرض الحل المشروح
يبقى internalToken ويتسلسل مع العنوان لأن محو النوع لا يحذف الخصائص. احفظ البناء الصريح وافحص المفاتيح. وتحقق من إذن تلقي العام منفصلًا؛ فالانتقاء لا يفوض.
2. يجب دعم نص غني محدود. لماذا لا يكفي تجاوز ثقة HTML كمتطلب أو اختبار؟
اعرض الحل المشروح
عرّف التنسيق والثقة والتنظيف والسياق والروابط والتحديث ثم استخدم تنفيذًا معتمدًا واختبر الممنوع والمشوه. يغير التجاوز ثقة Angular ولا يثبت السلامة أو سياسة التطبيق.
أهم ما تعلمته
- استخدم الربط السياقي دون تجاوز عابر.
- لا تفوض الأنواع والحراس والواجهة المخفية المستخدم.
- افحص الناتج وحدود الخادم.