سياسة أمان المحتوى لتطبيقات React

سياسة أمان المحتوى (CSP) هي ترويسة HTTP تُخبر المتصفح بمصادر المحتوى الموثوقة. ومن خلال التصريح بدقة عن البرامج النصية والأنماط والصور والخطوط المسموح بتحميلها، تمنع CSP تنفيذ المحتوى الضار المحقون، حتى إذا أتاحت ثغرة XSS للمهاجم حقن HTML في الصفحة.

تحدد default-src 'self' خط الأساس: لا يجوز تحميل جميع أنواع الموارد (البرامج النصية والأنماط والصور والخطوط والإطارات) إلا من الأصل نفسه. وتقيّد script-src 'self' تحميل البرامج النصية بالأصل نفسه، فتحظر البرامج النصية الواردة من شبكات CDN الخارجية ما لم تُدرج صراحةً. وتشكل هاتان التوجيهتان معًا أساس CSP المقيّدة.

تحوّل eval() سلسلة نصية إلى تعليمات برمجية قابلة للتنفيذ أثناء التشغيل، وهذا هو تحديدًا ما تحتاج إليه حمولات XSS. وتحظر CSP التي تستخدم script-src 'self' (من دون 'unsafe-eval') الدالة eval() والدوال المرتبطة بها مثل new Function() وsetTimeout(string). ويؤدي ذلك إلى إزالة فئة رئيسية من تنفيذ حمولات XSS.

يمنح 'strict-dynamic' ضمن script-src الثقة للبرامج النصية التي تحمّلها برامج نصية موثوقة مسبقًا. ويتيح ذلك أنماط التحميل الديناميكي للبرامج النصية التي تستخدمها أدوات التجميع، من دون الحاجة إلى السماح بكل عنوان URL لشبكات CDN. ويمكن لبرنامج نصي موثوق تحميل برامج نصية إضافية، فتنتقل إليها الثقة.

إذا كان تطبيقك يحتاج إلى برنامج نصي مضمن محدد (مثل مقطع تهيئة التحليلات)، يمكنك حساب تجزئته SHA-256 وإضافة 'sha256-base64hash' إلى script-src. لن يُسمح بالتنفيذ المضمن إلا للبرامج النصية المطابقة لتلك التجزئة بالضبط. وستختلف تجزئة أي برنامج نصي يحقنه مهاجم، لذلك سيُحظر.

إن nonce قيمة عشوائية مشفّرة يُنشئها الخادم لكل طلب. ويضيف الخادم nonce إلى كل من وسم البرنامج النصي (<script nonce="abc123">) وترويسة CSP (script-src 'nonce-abc123'). ولا تُنفّذ إلا البرامج النصية التي تحمل nonce الصحيح. ولا يستطيع المهاجمون توقّع nonce، لذا لا يمكن للبرامج النصية المحقونة استخدامه.

تدعم CSP إعداد تقارير الانتهاكات عبر report-uri /csp-violation-endpoint أو التوجيه الأحدث report-to. عندما يحظر المتصفح موردًا بسبب CSP، فإنه يرسل تقريرًا بصيغة JSON إلى نقطة النهاية. تساعد مراقبة هذه التقارير على تحديد مشكلات التهيئة المشروعة ومحاولات الهجوم النشطة.

في Next.js، أضف ترويسات CSP في الوسيط: أنشئ middleware.ts، وأنشئ nonce، واضبط ترويسة Content-Security-Policy، ومرّر nonce إلى الصفحة عبر ترويسة استجابة. يقرأ تخطيط الصفحة nonce من الترويسة ويطبّقه على جميع البرامج النصية المضمنة ووسوم الأنماط.

يُعد Content-Security-Policy-Report-Only وضع الاختبار: لا يفرض المتصفح أي حظر، لكنه يرسل تقارير انتهاك لكل ما كان سيُحظر. انشر التطبيق أولًا في وضع Report-Only، وأصلح جميع الانتهاكات، ثم انتقل إلى ترويسة Content-Security-Policy التي تفرض السياسة لتجنب تعطيل التطبيق.

عندما تحظر CSP موردًا، تعرض وحدة تحكم Chrome DevTools رسالة خطأ حمراء تحدد عنوان URL المحظور والتوجيه المنتهك. وتُعد هذه الرسائل بالغة القيمة أثناء التطوير والاختبار. يجب معالجة كل انتهاك إما بإصلاح السياسة، أو نقل المورد إلى مصدر مسموح به، أو استخدام nonce أو تجزئة.

إعداد CSP عملي لتطبيق React أحادي الصفحة: default-src 'self'; script-src 'self' 'strict-dynamic' 'nonce-NONCE'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https://api.yourdomain.com; frame-ancestors 'none'. كما يمنع frame-ancestors 'none' هجمات النقر الخادع، وذلك بحظر تضمين تطبيقك في إطارات iframe.

ما الذي يمنعه script-src 'self' في سياسة أمان المحتوى؟

CSP هي ترويسة HTTP تصرّح بمصادر المحتوى الموثوقة. تحظر default-src 'self' وscript-src 'self' البرامج النصية الخارجية وeval. ويمكن السماح بالبرامج النصية المضمنة باستخدام التجزئات أو nonce. ويدعم 'strict-dynamic' تحميل البرامج النصية ديناميكيًا. استخدم Content-Security-Policy-Report-Only للاختبار قبل فرض السياسة. يطبّق Next.js CSP عبر الوسيط. وتعرض وحدة تحكم DevTools الانتهاكات في الوقت الفعلي.