Content Security Policy: nonce وhash
اكتب CSP صارمة باستخدام nonces للبرامج النصية المضمّنة، وhashes للمقاطع المعروفة، وreport-uri لمراقبة الانتهاكات في بيئة الإنتاج
Content Security Policy: nonce وhash درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
مراجعة CSP
إن CSP هي ترويسة HTTP تحدد قائمة بالمصادر التي يُسمح للمتصفح بتحميلها، مثل البرامج النصية والأنماط والصور والخطوط والإطارات والاتصالات. وهي توفر حماية متعددة الطبقات؛ فحتى إذا تجاوز XSS عوامل التصفية، غالبًا ما تمنع CSP تشغيل payload.
بنية ترويسة CSP
تسرد كل توجيهة المصادر المسموح بها. وتعني 'self' المصدر نفسه. كما يمكن السماح بعناوين URL محددة.
Content-Security-Policy:
default-src 'self';
script-src 'self' https://cdn.example.com;
style-src 'self' 'unsafe-inline';
img-src 'self' data: https:;
connect-src 'self' https://api.example.com;
font-src 'self' https://fonts.gstatic.com;
frame-ancestors 'none';
base-uri 'self';التوجيهات الشائعة
default-src: مصدر احتياطي لكل شيء. script-src: JavaScript. style-src: CSS. img-src: الصور. connect-src: fetch وXHR وWebSocket. font-src: الخطوط. frame-ancestors: الجهات التي يمكنها تضمينك داخل iframe (للحماية من clickjacking).
'unsafe-inline' — الثغرة الشائعة
تضيف مواقع كثيرة 'unsafe-inline' للسماح بوسوم <script> المضمّنة وسمات onclick. وهذا يهدم الغرض الأساسي من CSP، إذ يمكن تشغيل payloads الخاصة بـ XSS مضمّنة. استبدل ذلك باستخدام nonces أو hashes.
Nonces — قائمة سماح لمرة واحدة
أنشئ nonce عشوائيًا لكل طلب. وأضف nonce إلى البرامج النصية المضمّنة الشرعية. ولن يسمح المتصفح إلا بالبرامج النصية التي تتطابق nonces الخاصة بها.
// Server (Express middleware):
import crypto from 'crypto';
app.use((req, res, next) => {
res.locals.nonce = crypto.randomBytes(16).toString('base64');
res.setHeader('Content-Security-Policy',
`script-src 'nonce-${res.locals.nonce}' 'strict-dynamic'`
);
next();
});
// Template:
<script nonce="<%= nonce %>">window.config = {...};</script>'strict-dynamic'
اجمع nonce مع 'strict-dynamic'؛ إذ يمكن للبرامج النصية الموثوقة، أي التي تحمل nonce، تحميل برامج نصية إضافية. وبذلك تنتفي الحاجة إلى إدراج عنوان URL لكل مصدر من مصادر البرامج النصية. وهذه هي أفضل ممارسة حالية لـ CSP.
Hashes — قائمة سماح ثابتة
بالنسبة إلى البرامج النصية المضمّنة المعروفة والثابتة، مثل مقطع bootstrap الذي ينشئه الإصدار دائمًا بالطريقة نفسها، احسب قيمة SHA-256 الخاصة به وأضفها كمصدر hash. ولا تكون هناك حاجة إلى nonce لكل طلب.
// Hash of: console.log('hi');
Content-Security-Policy: script-src 'sha256-XwCNuB+/RUgPlAACI+yHrUKqUsm4zlpGV/Q8tEUx0Q4='Hashes للأنماط المضمّنة
يمكن استخدام الحيلة نفسها مع وسوم <style> المضمّنة؛ احسب قيمة hash الخاصة بها وأضفها إلى style-src. وهذا أفضل من 'unsafe-inline' بالنسبة إلى CSS.
وضع تقارير CSP
استخدم Content-Security-Policy-Report-Only لاختبار سياسة من دون فرضها. تُرسل الانتهاكات إلى نقطة النهاية الخاصة بك، لكنها لا تحظر أي شيء. وهذا مناسب جدًا لطرح CSP تدريجيًا.
Content-Security-Policy-Report-Only:
default-src 'self';
report-uri /csp-violations
// /csp-violations receives POSTs like:
{
"csp-report": {
"document-uri": "https://example.com/",
"violated-directive": "script-src 'self'",
"blocked-uri": "https://evil.com/x.js"
}
}report-to (حديث)
يُعد report-to مع Reporting-Endpoints البديل الحديث لـ report-uri. ويقدمان البيانات نفسها، لكن ببنية أكثر تنظيمًا.
Reporting-Endpoints: csp="/csp-reports"
Content-Security-Policy: script-src 'self'; report-to cspالتكامل مع أطر العمل
Next.js: اضبط CSP عبر middleware.ts أو ترويسات next.config.js. Nuxt: استخدم وحدة nuxt-security. Vite: اضبط ترويسات خادم التطوير، وفي الإنتاج اضبطها عبر المضيف الخاص بك (Vercel أو Netlify) في إعدادات الترويسات.
// next.config.js
module.exports = {
async headers() {
return [{
source: '/(.*)',
headers: [{
key: 'Content-Security-Policy',
value: "default-src 'self'; script-src 'self' 'strict-dynamic'"
}]
}];
}
};اختبار CSP
افتح DevTools ← Console؛ إذ تُسجَّل انتهاكات CSP هناك. استخدم https://csp-evaluator.withgoogle.com/ لتقييم سياستك. ابدأ بوضع Report-Only في الإنتاج، ثم فعّل الفرض بعد إصلاح جميع الانتهاكات.
فحص سريع
لماذا يُعد 'unsafe-inline' في توجيهة script-src نقطة ضعف في CSP؟
مراجعة: أفضل ممارسات CSP
اضبط ترويسة Content-Security-Policy مع توجيهات لكل نوع من الموارد. تجنب 'unsafe-inline'، واستخدم nonces مع 'strict-dynamic' أو قيم SHA hash. اضبط frame-ancestors على 'none' (أو 'self'). اختبر أولًا في وضع Report-Only. أرسل الانتهاكات إلى /csp-violations (أو استخدم report-to الحديث). تدعم أطر العمل CSP عبر middleware أو ترويسات الإعدادات.
الأسئلة الشائعة
هل درس «Content Security Policy: nonce وhash» مجاني؟
نعم — نص درس «Content Security Policy: nonce وhash» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «Content Security Policy: nonce وhash»؟
اكتب CSP صارمة باستخدام nonces للبرامج النصية المضمّنة، وhashes للمقاطع المعروفة، وreport-uri لمراقبة الانتهاكات في بيئة الإنتاج تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «Content Security Policy: nonce وhash»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- منع XSS: ترميز المخرجات وCSP
- CSRF: ملفات تعريف الارتباط والرموز SameSite
- Content Security Policy: nonce وhash
- تدفقات OAuth من الواجهة الأمامية