Vue Academy · درس

الوقاية من XSS في Vue

الهروب التلقائي في Vue، ومخاطر v-html، واستخدام DOMPurify للتنقية، وTrusted Types

الوقاية من XSS في Vue درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

ما هو XSS

البرمجة النصية عبر المواقع (XSS) هي هجوم يُحقن فيه نص برمجي ضار داخل صفحة ويُشغَّل في متصفح مستخدم آخر. ويمكنه سرقة ملفات تعريف الارتباط والرموز والبيانات. تحميك Vue افتراضيًا، لكن بعض الأنماط قد تفتح هذا الباب من جديد.

تُجري Vue ترميزًا تلقائيًا للاستيفاء

يُجرى ترميز HTML تلقائيًا للنص الموجود داخل استيفاء الأقواس المزدوجة {{ }}. لذلك تُعرض سلسلة مستخدم تحتوي على وسوم كنص غير ضار، ولا تُنفَّذ.

<!-- userInput = "<script>alert(1)</script>" -->
<p>{{ userInput }}</p>
<!-- renders the literal text, no script runs -->

ربط السمات آمن أيضًا

يُجري الربط باستخدام v-bind / :attr ترميزًا للقيم أيضًا، لذا لا يمكن لعلامات الاقتباس المحقونة أن تخرج من السمة وتحقن معالجات.

<div :title="userInput">Hover me</div>

خطورة v-html

يعيّن v-html الخاصية innerHTML مباشرةً. وهو لا يجري ترميزًا، لذلك تُعرض أي علامات ترميز، بما فيها النصوص البرمجية ومعالجات الأحداث، بصفتها HTML فعليًا.

<!-- DANGEROUS with untrusted input -->
<div v-html="userInput"></div>

كيفية استغلال v-html

حتى من دون وسم نص برمجي، يمكن لشفرة HTML التي يحقنها المهاجم تشغيل التعليمات البرمجية من خلال سمات معالجات الأحداث أو حمولات img onerror.

// attacker-supplied value
const userInput = "<img src=x onerror=stealCookies()>";

قاعدة: لا تستخدم v-html مع إدخال المستخدم

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

متى يجب عرض HTML

قد تحتاج أحيانًا إلى HTML منسق فعلًا، مثل محتوى نظام إدارة المحتوى أو ناتج Markdown. في هذه الحالة، يجب تنقية HTML قبل ربطه.

التنقية باستخدام DOMPurify

تزيل DOMPurify الوسوم والسمات الخطرة مع الحفاظ على التنسيق الآمن. ثبّتها ونقِّ المحتوى قبل استخدام v-html.

npm install dompurify

نقِّ المحتوى ثم اربطه

مرّر القيمة عبر DOMPurify.sanitize داخل قيمة محسوبة، ثم اربط النتيجة المنقاة.

import DOMPurify from "dompurify";
import { computed } from "vue";

const safeHtml = computed(() =>
  DOMPurify.sanitize(props.rawHtml)
);
// template: <div v-html="safeHtml"></div>

ضبط الوسوم المسموح بها

يمكنك تقييد قائمة السماح بحيث لا تبقى بعد التنقية إلا الوسوم التي تتوقعها.

DOMPurify.sanitize(html, {
  ALLOWED_TAGS: ["b", "i", "em", "strong", "a", "p"],
  ALLOWED_ATTR: ["href"]
});

مصادر أخرى يجب عدم الوثوق بها

لا تثق بعناوين URL أيضًا: إذ يمكن لسمة javascript: في رابط مربوط أن تنفّذ تعليمات برمجية. تحقّق من سمات href أو نقِّها، ولا تُنشئ مصادر <script> ديناميكية من بيانات المستخدم مطلقًا.

// reject dangerous protocols
const safe = /^https?:/.test(url) ? url : "#";

تحقق سريع

يجب أن تعرض HTML أرسله المستخدم. ما النهج الآمن؟

ملخص

تجري Vue ترميزًا تلقائيًا لاستيفاء {{ }} ولربط السمات، مما يحيد معظم هجمات XSS. والاستثناء الخطر هو v-html، الذي يعرض HTML خامًا. لا تمرر إدخال المستخدم إليه مباشرةً مطلقًا؛ وعندما تكون هناك حاجة إلى HTML منسق، نقِّه أولًا باستخدام DOMPurify، ولا تثق أيضًا بعناوين URL التي يزوّدك بها المستخدم.

الأسئلة الشائعة

هل درس «الوقاية من XSS في Vue» مجاني؟

نعم — نص درس «الوقاية من XSS في Vue» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «الوقاية من XSS في Vue»؟

الهروب التلقائي في Vue، ومخاطر v-html، واستخدام DOMPurify للتنقية، وTrusted Types تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «الوقاية من XSS في Vue»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy