Vue Academy · درس

‏Content Security Policy (CSP) مع Vue

ترويسات CSP، والبرامج النصية المعتمدة على nonce، والسياسات المعتمدة على hash، وإعداد CSP في Vite

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

ما هي CSP

سياسة أمان المحتوى هي ترويسة استجابة HTTP تخبر المتصفح بالمصادر المسموح بها للنصوص البرمجية والأنماط والصور والاتصالات. وهي خط دفاع ثانٍ قوي ضد XSS، إذ تُحظر النصوص البرمجية المحقونة حتى لو لم يكن مصدرها مسموحًا به.

الترويسة

تُرسل CSP عبر ترويسة استجابة Content-Security-Policy. ويسرد كل توجيه المصادر المسموح بها لنوع معين من الموارد.

Content-Security-Policy: default-src 'self'; script-src 'self';

تقييد مصادر النصوص البرمجية

يتحكم التوجيه script-src في الأماكن التي يمكن تحميل النصوص البرمجية منها. ويؤدي تقييده إلى 'self' إلى حظر النصوص البرمجية المضمنة ونصوص الجهات الخارجية التي قد يحقنها المهاجم.

Content-Security-Policy: script-src 'self' https://cdn.trusted.com;

تجنب unsafe-inline

يسمح 'unsafe-inline' بالنصوص البرمجية المضمنة وسمات معالجات الأحداث، وهي بالضبط العناصر التي تستغلها هجمات XSS. لذلك تحذف السياسة القوية هذا الخيار حتى لا تُشغَّل الشفرة المضمنة المحقونة.

تجنب unsafe-eval

يسمح 'unsafe-eval' باستخدام eval ومنشئ Function. ولا يحتاج إصدار Vue 3 وقت التشغيل إليه، لأن القوالب تُترجم مسبقًا، لذا يمكنك وينبغي لك حذفه.

نصوص برمجية مضمنة معتمدة على nonce

عندما تحتاج فعلًا إلى نص برمجي مضمن، امنحه nonce عشوائيًا لكل استجابة، وأدرج قيمة nonce تلك في السياسة. ولن تُنفَّذ إلا النصوص البرمجية التي تحمل قيمة nonce المطابقة.

<!-- header includes: script-src 'nonce-abc123' -->
<script nonce="abc123">
  // allowed because nonce matches
</script>

لماذا تتفوق nonces على unsafe-inline

يصعب التنبؤ بقيمة nonce وتتغير مع كل استجابة، لذلك لا يستطيع المهاجم الذي يحقن نصًا برمجيًا تخمينها. وهكذا تظل النصوص البرمجية المضمنة تعمل من دون المخاطر الشاملة للخيار unsafe-inline.

CSP وأنماط Vue

تحقن Vue والعديد من مكتبات واجهة المستخدم الأنماط وقت التشغيل. إما أن تسمح بها عبر style-src باستخدام nonce أو تجزئة، وإما أن تستخرج CSS إلى ملفات بحيث يكفي style-src 'self'.

Content-Security-Policy: style-src 'self';

إضافة nonce لـ CSP في Vite للتطوير

يحقن خادم التطوير في Vite نصوصًا برمجية، وقد يتعارض ذلك مع CSP صارمة. تضيف إضافة nonce لـ CSP قيمة nonce المطابقة إلى الوسوم التي يحقنها Vite أثناء التطوير.

// vite.config.ts
import { defineConfig } from "vite";

export default defineConfig({
  html: {
    cspNonce: "DEV_NONCE"
  }
});

connect-src لواجهات API

قيّد الأماكن التي يمكن للتطبيق جلب البيانات منها باستخدام connect-src، حتى لا تتمكن الشفرة المحقونة من تهريب البيانات إلى نطاق يتحكم فيه المهاجم.

Content-Security-Policy: connect-src 'self' https://api.example.com;

وضع Report-Only

انشر CSP بأمان باستخدام Content-Security-Policy-Report-Only، الذي يبلّغ عن الانتهاكات من دون حظرها، مما يتيح لك ضبط السياسة قبل فرضها.

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report;

تحقق سريع

ما قيمة توجيه CSP التي ينبغي تجنبها للحفاظ على قوة الحماية من XSS؟

ملخص

تُعد CSP ترويسة HTTP تقيّد مصادر النصوص البرمجية والأنماط والاتصالات المسموح بها، فتحظر الشفرة المحقونة حتى إذا نجح هجوم XSS في التسلل. تجنب unsafe-inline وunsafe-eval، واستخدم nonces مخصصة لكل استجابة للنصوص البرمجية المضمنة المطلوبة، وإضافة nonce لـ CSP في Vite أثناء التطوير. ابدأ بوضع Report-Only قبل فرض السياسة.

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

هل درس «‏Content Security Policy (CSP) مع Vue» مجاني؟

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

ماذا ستتعلم في «‏Content Security Policy (CSP) مع Vue»؟

ترويسات CSP، والبرامج النصية المعتمدة على nonce، والسياسات المعتمدة على hash، وإعداد CSP في Vite تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «‏Content Security Policy (CSP) مع Vue»؟

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

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

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

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

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