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

Vue / المتقدم: المعمارية والاستيعاب ودليل الإنتاج / الدرس 15

الأمان وحدود البيانات غير الموثوقة

احفظ حدود النص والرابط والهوية وثقة الخادم وأبعد الأسرار المميزة عن العميل.

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

أهداف الدرس

  • ميّز عرض النص الآمن من HTML أو قالب موثوق.
  • تحقق من سياق الرابط والتفويض بالطبقة الصحيحة.

لا تحول غير الموثوق لقالب Vue

يهرب الاستيفاء النص للعرض، أما القالب فبنية تطبيق تنفيذية. لا تترجم نص المستخدم قالباً أو تربط HTML غير موثوق كمصدر. يدخل v-html HTML بقصد ويحتاج سياسة وتنقية مصانة عند الغنى. تختلف النصوص والروابط والتنقية والتفويض، وتحمي الافتراضات عند حفظ حدودها. للمكوّن الخارجي ومعالج المحتوى ثقة وتحديث مستقلان.

استخدم النص العادي للمحتوى العادي

يعرض المكوّن الرسالة باستيفاء دون HTML، وهو الافتراض الصحيح للعنوان والنص. لا يقرر حق الحساب؛ يحدث التفويض والتقليل قبل وصول الخاص للعميل. لا يحمي إخفاء ما وصل للمتصفح سريته. لا تجمع الرسالة بالسجل والخطأ بلا حاجة. المثال بلا حمولة ضارة أو طلب حي.

vue حد عرض نص عادي
<script setup>
const props = defineProps({ message: { type: String, required: true } })
</script>

<template>
  <p>{{ props.message }}</p>
</template>

تعرض Notes & references كنص وفق الهروب. لا يدخل المكوّن HTML غنياً أو يفوض أو يحفظ، ولم ينفذ العرض في متصفح.

طبق سياسة رابط قبل ربط التنقل

لا يجعل هروب السمة كل بروتوكول أو وجهة مقبولاً. حدد البروتوكول والأصل والمسار ومعلومات المستخدم وفق الميزة ويفضل قبل العميل. تسمح الدالة بأصل HTTPS اصطناعي وترفض الاعتماد المضمن وتطبع النسبي بلا اتصال. هي سياسة ضيقة لا منقٍّ كامل أو تفويض خادم. يبقى إنفاذ الوجهة ضرورياً ولو بدا الرابط مشروعاً.

javascript مثال كامل محلي لقائمة روابط مسموحة
function allowedNoteUrl(value) {
  if (typeof value !== "string") return null
  try {
    const base = new URL("https://notes.example.invalid/")
    const url = new URL(value, base)
    if (url.origin !== base.origin || url.protocol !== "https:" || url.username || url.password) return null
    return url.href
  } catch {
    return null
  }
}
if (allowedNoteUrl("/read/n1") !== "https://notes.example.invalid/read/n1") {
  throw new Error("URL_NORMALIZATION_MISMATCH")
}
if (allowedNoteUrl("https://other.example.invalid/read") !== null) {
  throw new Error("URL_ORIGIN_POLICY_MISMATCH")
}

يعمل بـ Node ومحلل URL ونطاقات .invalid المحجوزة دون DNS أو طلب. يفحص مساراً مقبولاً وأصلاً مرفوضاً لا كل رابط أو سياسة.

أبقِ الثقة المميزة خارج العميل

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

تحقق من الحد الفعلي وحدّث الاعتماد

راجع الخام ومستهلك الرابط والاعتماد والتفويض وتسلسل الحالة. اختبر السماح والرفض مفوضاً مع الشرعي كي لا يكون الدفاع تعطيل الميزة. راجع تحديث الأمان والتنبيه للنسخة ولا تثبت الوحدة غياب كل ضعف. استخدم مُسلسلاً مدعوماً في SSR لا تركيب نص خام. توضح الدورة تحليلاً محلياً سليماً بلا فحص أو استغلال أو اعتماد أو تغيير خدمة.

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

يترجم محتوى المستخدم قالباً

لماذا يحدث؟
رُقيت البيانات لبنية تنفيذية.
كيف تصلحه؟
اعرض النص أو حد محتوى غني مراجعاً.
كيف تتجنب تكراره؟
أبقِ مصدر القالب موثوقاً.

يشير رابط مهرب لوجهة غير معتمدة

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

يكشف متغير البناء سراً مميزاً

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

اختبر فهمك

1. هل يمنع v-if كشف سجل خاص بعد إرساله للمتصفح؟

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

لا؛ وصلت البيانات. يفوض الخادم ما يعيده ويقلله. الرؤية خيار واجهة لا بديل حد السرية.

2. يقبل المساعد الأصل الصحيح. هل يفوض السجل؟

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

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

أهم ما تعلمته

  • للنص وHTML والقالب والرابط والإذن حدود منفصلة.
  • لا يحفظ العميل سر الخادم المميز.
  • استخدم الواجهات الآمنة المصانة وتحقق من نطاقها.

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