Content Security Policy وmeta http-equiv
تعيين Content Security Policy عبر meta http-equiv
Content Security Policy وmeta http-equiv درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.
ما هو CSP؟
سياسة أمان المحتوى هي سياسة يفرضها المتصفح لتقييد الموارد التي يمكن للصفحة تحميلها وتنفيذها. وهي أقوى وسيلة دفاع ضد البرمجة النصية عبر المواقع (XSS): فحتى إذا حقن مهاجم علامة <script>، يرفض المتصفح تشغيلها ما لم تسمح السياسة بذلك.
طريقتان للتسليم
يمكن إرسال CSP كرأس استجابة HTTP (Content-Security-Policy: ...) أو كعلامة وصفية في HTML: <meta http-equiv="Content-Security-Policy" content="...">. يُفضَّل الرأس، بينما تكون العلامة الوصفية مفيدة عندما لا يمكنك التحكم في الخادم.
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self' https://cdn.example.com">التوجيهات الشائعة
يُستخدم default-src كخيار احتياطي لأنواع الموارد غير المحددة. ويقيّد كل من script-src وstyle-src وimg-src وconnect-src (XHR/fetch) وfont-src وframe-src نوعه من الموارد. أدرج أصولًا محددة في قائمة السماح أو استخدم 'self' للسماح بالأصل نفسه فقط.
الكلمة المفتاحية self
تشير 'self' (بين علامتي اقتباس) إلى أصل الصفحة نفسها. ويعني script-src 'self' "تشغيل النصوص البرمجية المستضافة على الأصل نفسه للصفحة فقط". وهذا هو الأساس لمعظم السياسات؛ أضف شبكات CDN خارجية محددة عند الحاجة.
حظر النصوص البرمجية المضمّنة
تحظر CSP افتراضيًا جميع علامات <script> المضمّنة وسمات معالجات الأحداث (onclick). وهذه أقوى حماية من XSS: إذ لا يمكن لعلامة <script> محقونة أن تعمل لأنها مضمّنة. انقل جميع النصوص البرمجية إلى ملفات خارجية يُشار إليها باستخدام src.
Nonces والتجزئات
بالنسبة إلى النصوص البرمجية المضمّنة الضرورية، استخدم nonce: ينشئ الخادم رمزًا عشوائيًا لكل طلب، ويعيّنه في CSP بصيغة script-src 'nonce-RANDOM'، ويضيف nonce="RANDOM" إلى علامات <script> المشروعة. وتفتقر النصوص البرمجية المحقونة إلى nonce، لذلك تُحظر.
<meta http-equiv="Content-Security-Policy"
content="script-src 'nonce-abc123'">
<script nonce="abc123">// allowed</script>
<script>// blocked — no nonce</script>unsafe-inline وunsafe-eval
يعيد 'unsafe-inline' السماح بالنصوص البرمجية والأنماط المضمّنة. ويعيد 'unsafe-eval' السماح بـ eval() وnew Function(). يضعف كلاهما CSP بشدة — فاستخدمهما كحل أخير فقط أثناء عملية ترحيل، مع التخطيط لإزالتهما.
قيود العلامة الوصفية
لا يمكن لـ CSP التي تُسلَّم عبر علامة وصفية استخدام التوجيه report-uri (أو ميزات الإبلاغ الأخرى). كما يبدأ تأثيرها في وقت لاحق من الرأس — فأي شيء يسبق العلامة الوصفية يكون غير محمي. الرؤوس أفضل بشكل قاطع؛ استخدم العلامة الوصفية كخيار احتياطي فقط.
وضع الإبلاغ فقط
اختبر سياسة جديدة من دون تعطيل الموقع باستخدام: Content-Security-Policy-Report-Only: .... يُبلغ المتصفح عن الانتهاكات من دون حظرها، حتى تتمكن من تحسين السياسة إلى أن تسمح بجميع الموارد المشروعة قبل تفعيل الإنفاذ.
المشكلات الشائعة
يؤدي نسيان style-src 'unsafe-inline' إلى حظر الأنماط المضمّنة (التي تُنتجها أطر العمل غالبًا). ويؤدي نسيان connect-src إلى حظر AJAX المتجه إلى واجهات API. اختبر السياسة دائمًا أولًا في وضع الإبلاغ فقط، وراجع وحدة التحكم بحثًا عن الموارد المحظورة.
استراتيجية CSP الحديثة
تجمع CSP الصارمة بين script-src 'nonce-RANDOM' 'strict-dynamic' للنصوص البرمجية، وقائمة سماح محكمة لكل شيء آخر. يتيح 'strict-dynamic' للنصوص البرمجية التي تحتوي على nonce تحميل نصوص برمجية إضافية من دون إدراج كل نص على حدة — وهذا أسهل بكثير في الصيانة من قوائم السماح لكل أصل.
اختبار المعرفة
كيف تدافع CSP ضد هجمات XSS حتى عندما ينجح مهاجم في حقن علامة script؟
الملخص
CSP هي سياسة يفرضها المتصفح لتقييد النصوص البرمجية والأنماط والصور والموارد الأخرى التي يمكن تحميلها. سلّمها عبر رأس الاستجابة (وهو الخيار المفضّل) أو عبر علامة وصفية. استخدم nonces للنصوص البرمجية المضمّنة الضرورية، وتجنب unsafe-inline وunsafe-eval، واختبر أولًا في وضع الإبلاغ فقط. تُعد CSP الصارمة مع 'nonce-X' و'strict-dynamic' الأساس الحديث.
الأسئلة الشائعة
هل درس «Content Security Policy وmeta http-equiv» مجاني؟
نعم — نص درس «Content Security Policy وmeta http-equiv» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.
ماذا ستتعلم في «Content Security Policy وmeta http-equiv»؟
تعيين Content Security Policy عبر meta http-equiv تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟
لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «Content Security Policy وmeta http-equiv»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟
نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- Content Security Policy وmeta http-equiv
- XSS عبر innerHTML وكيفية منعه
- وضع الحماية لإطارات iframe وسياسة الأذونات
- HTTPS وسلامة الموارد الفرعية