ملفات تعريف الارتباط يحتفظ هذا الموقع بما يحتاجه للعمل فقط. لا توجد عليه اليوم أي أدوات تحليل أو إعلانات، ولا شيء هنا يتتبعك إلى مواقع أخرى. اقرأ سياسة الخصوصية

اختر ما تسمح به
+92 312 8299940عرض سعر مجاني
Blog

Content Security Policy: أضف CSP دون أن تكسر موقعك

شرح مبسّط لـ Content Security Policy: ابدأ بصرامة، واقرأ وحدة التحكم، واسمح فقط بما تستخدمه، واختبر أولًا بوضع Report-Only.

By the Denwix team 5 min read

ما هي Content Security Policy؟

سياسة Content Security Policy، أو CSP، هي ترويسة استجابة تحدد من أين يمكن للصفحة تحميل السكربتات والأنماط والخطوط والصور والإطارات. وكل ما ليس في القائمة يُحظر.

مهمتها الأساسية إيقاف هجمات cross-site scripting. فإذا نجح مهاجم في حقن سكربت في صفحتك، يرفض المتصفح تشغيله لأنه ليس في القائمة. لذلك تحوّل السياسة الجيدة كثيرًا من الثغرات الخطيرة إلى أخطاء غير مؤذية.

رسم: ابدأ بصرامة في Report-Only، ثم اقرأ وحدة التحكم، ثم اسمح بالمضيفين والبصمات التي تستخدمها فقط
ابنِ السياسة في ثلاث خطوات حتى لا يتعطل شيء.

الخطوة 1: ابدأ بصرامة

ابدأ بأكثر سياسة مفيدة صرامة. في ملف .htaccess على Apache أضف سطرًا يقول إن الملفات من موقعك فقط يمكن تحميلها:

Header always set Content-Security-Policy "default-src 'self'"

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

الخطوة 2: اقرأ وحدة التحكم

افتح أدوات المطوّر في المتصفح وانظر إلى وحدة التحكم. فكل ملف محظور يظهر هناك مع القاعدة التي حظرته. وفي العرض حظرت السياسة ورقة أنماط Google Fonts والسكربت المضمّن.

هذه القائمة هي قائمة مهامك. راجعها سطرًا بسطر واسأل في كل مرة: هل أحتاج هذا فعلًا؟ فإن لم تكن تحتاجه، فاحذفه من الصفحة بدل السماح به.

الخطوة 3: اسمح فقط بما تستخدمه

الآن أضف استثناءات دقيقة. ولـ Google Fonts اسمح بالأنماط من fonts.googleapis.com وبملفات الخطوط من fonts.gstatic.com:

Header always set Content-Security-Policy "default-src 'self'; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com"

السكربتات المضمنة: استخدم بصمة

للسكربت المضمّن الصغير أضف بصمته إلى script-src. فالبصمة تسمح بهذا السكربت بالضبط ولا شيء غيره. كما تطبع وحدة تحكم Chrome البصمة لك في رسالة الخطأ. انسخها إلى السياسة:

script-src 'self' 'sha256-AbC123...='
عرض: بعد السماح بمضيفي الخطوط وبصمة السكربت تعرض الصفحة الشريط والخط دون أخطاء
مع استثناءات دقيقة تعمل الصفحة وتبقى وحدة التحكم نظيفة.

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

اختبر أولًا بوضع Report-Only

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

Header always set Content-Security-Policy-Report-Only "default-src 'self'"

تصفّح كل نوع من الصفحات لعدة أيام: الرئيسية والمقالات والدفع والنماذج. وعندما تبقى وحدة التحكم نظيفة، غيّر اسم الترويسة إلى Content-Security-Policy الحقيقية.

أمثلة جاهزة

كل موقع مختلف، لذلك اعتبرها نقطة بداية. ثم افحصها بوحدة التحكم.

موقع ثابت بسيط

default-src 'self'; img-src 'self' data:; object-src 'none'; base-uri 'self'; frame-ancestors 'self'

موقع يستخدم Google Analytics

default-src 'self'; script-src 'self' https://www.googletagmanager.com; connect-src 'self' https://www.google-analytics.com; img-src 'self' https://www.google-analytics.com

توجيهات مفيدة في كل سياسة

يحظر object-src 'none' الإضافات القديمة، ويمنع base-uri 'self' رابط أساس مزيفًا، ويمنع frame-ancestors 'self' المواقع الأخرى من عرض صفحاتك في إطار. ونادرًا ما تعطّل شيئًا.

كيف تفحص سياستك

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

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

أخطاء شائعة

  • إضافة 'unsafe-inline' لإخفاء الأخطاء. فهي تسمح أيضًا بتشغيل السكربتات المحقونة، وهذا بالضبط ما يجب أن تمنعه السياسة.
  • استخدام رمز عام مثل https: في script-src، مما يسمح بالسكربتات من أي موقع.
  • تفعيل سياسة جديدة دون اختبارها أولًا في Report-Only.
  • إرسال سياستين مختلفتين من الخادم ومن إضافة؛ فالمتصفح يطبّق الاثنتين، لذلك تفوز القاعدة الأشد.
  • نسيان تحديث السياسة بعد إضافة خدمة جديدة.

باختصار: ابدأ بصرامة، واقرأ وحدة التحكم، واسمح بمضيفين وبصمات دقيقة، واختبر في Report-Only. ولشرح كل توجيه بالتفصيل راجع دليل MDN عن CSP.

أسئلة وأجوبة

ما هي Content Security Policy؟

ترويسة استجابة تخبر المتصفح من أي مصادر يمكن للصفحة تحميل السكربتات والأنماط والخطوط والملفات الأخرى. وكل ما عدا ذلك يُحظر.

لماذا يتعطل موقعي بعد إضافة CSP؟

لأن السياسة تحظر الملفات غير الموجودة في قائمتها. لذلك افتح وحدة التحكم، واقرأ كل عنصر محظور، واسمح فقط بما تحتاجه فعلًا.

ما Content-Security-Policy-Report-Only؟

نسخة اختبار من الترويسة. فيبلّغ المتصفح عن كل مشكلة دون أن يحظر شيئًا، وبذلك تضبط السياسة بأمان.

هل أستخدم unsafe-inline؟

لا، لأنه يسمح بكل السكربتات المضمنة، حتى المحقونة. بدلًا منه استخدم بصمة أو nonce للسكربتات القليلة التي تحتاجها.

كيف أسمح بسكربت مضمّن؟

أضف بصمته sha256 إلى script-src. كما أن وحدة تحكم Chrome تطبع البصمة في الخطأ، لذلك يمكنك نسخها.

ما الفرق بين البصمة والـ nonce؟

البصمة تطابق سكربتًا واحدًا بالضبط. أما الـ nonce فقيمة عشوائية تتغير مع كل طلب وتوضع في السياسة ووسم السكربت.

كيف أسمح بـ Google Fonts في CSP؟

اسمح بـ fonts.googleapis.com في style-src وبـ fonts.gstatic.com في font-src.

هل تساعد CSP في السيو؟

ليس بشكل مباشر. لكنها تحمي الزوار والموقع، وهذا يُبقي صفحاتك آمنة وموثوقة.

هل يمكنني إضافة CSP في وسم meta؟

نعم، بوسم meta http-equiv، لكن بعض التوجيهات مثل frame-ancestors لا تعمل إلا في الترويسة الحقيقية.

كيف أضيف CSP على Nginx؟

استخدم add_header Content-Security-Policy "..." always; في كتلة server، ثم أعد تحميل Nginx.

هل يعمل ووردبريس مع CSP صارمة؟

غالبًا نعم في الواجهة العامة، لكن كثيرًا من الإضافات تضيف سكربتات مضمنة. لذلك اختبر في Report-Only وأضف بصمات أو nonce عند الحاجة.

ماذا يفعل default-src؟

هو القاعدة الاحتياطية لكل نوع ملف ليس له توجيه خاص، مثل script-src أو img-src.

ما frame-ancestors؟

توجيه يحدد المواقع التي يمكنها عرض صفحتك في إطار. ومع 'self' تمنع المواقع الأخرى من تأطيرها، وبذلك تحظر clickjacking.

هل يمكن أن يكون لدي ترويستا CSP؟

يطبّق المتصفح الاثنتين، ويجب أن يمر الملف بهما معًا. لذلك تصبح الصفحة غالبًا أشد مما خططت، فأبقِ واحدة.

لماذا تظهر أخطاء CSP من الإضافات؟

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

كيف أسمح بالصور من نطاق آخر؟

أضف ذلك النطاق إلى img-src، مثل img-src 'self' https://images.example.com.

ماذا يفعل object-src 'none'؟

يحظر محتوى الإضافات القديمة مثل Flash. والمواقع الحديثة لا تحتاجه أبدًا، لذلك حظره آمن.

هل تكفي CSP لمنع XSS؟

هي طبقة إضافية قوية، لكن ما زال عليك تهريب المخرجات والتحقق من المدخلات على الخادم.

كيف أفحص CSP الخاصة بي؟

أولًا استخدم فاحص ترويسات HTTP المجاني لرؤية الترويسة المنشورة، ثم تصفّح صفحاتك الرئيسية ووحدة التحكم مفتوحة.

هل يفحص مدقق السيو CSP؟

نعم. يعرض مدقق السيو لدينا إن كانت الترويسة تُرسل، ويقودك إلى هذا الدليل عندما تكون مفقودة.

دليل بالفيديو

كيف تضيف Content Security Policy

في هذا الفيديو القصير تمرّ الأداة أمامك من أول خطوة إلى آخرها. اختر لغتك من القائمة بالأسفل، وفعّل الترجمة النصية إذا كانت تساعدك.

افحص ترويسات الأمان الآن

أدخل رابطك في فاحص ترويسات HTTP لترى Content-Security-Policy وكل ترويسات الأمان الأخرى.