التحكم في CORS: دليل المطور لطلبات الوصول عبر الأصل بشكل آمن

مع تعقيد تطبيقات الويب الحديثة بشكل متزايد، أصبحت الحاجة إلى إجراء طلبات عبر الأصل متطلباً أساسياً. ومع ذلك، يجب تكوين هذه الطلبات بعناية للحفاظ على الأمان مع تمكين الوظائف. Cross-Origin Resource Sharing (CORS) هو آلية تتحكم في كيفية معالجة المتصفحات للطلبات عبر الأصل، وفهم التكوين الصحيح لها أمر بالغ الأهمية لأي مطور يعمل مع واجهات برمجية للتطبيقات (APIs).

فهم أساسيات CORS

CORS هو آلية تعتمد على رؤوس HTTP تسمح للخوادم بتحديد الأصول المسموح لها بالوصول إلى مواردها. عند إجراء المتصفح لطلب عبر الأصل، يرسل أولاً طلب مسبق باستخدام طريقة OPTIONS للتحقق مما إذا كان الطلب الفعلي مسموحاً به.

الرؤوس الرئيسية المتأثرة بـ CORS هي:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400

أنماط التكوين الأساسية لـ CORS

لبيئات التطوير، قد ترغب في السماح بجميع الأصول مؤقتاً:

// مثال على Node.js/Express
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

ومع ذلك، هذا النهج غير آمن جداً لبيئات الإنتاج. نهج أكثر أماناً يتضمن تحديد الأصول الموثوقة صراحة:

// تكوين CORS آمن للإنتاج
const corsOptions = {
  origin: ['https://yourdomain.com', 'https://www.yourdomain.com'],
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true
};

app.use(cors(corsOptions));

التعامل مع بيانات الاعتماد والطلبات المسبقة

عند إجراء طلبات مع بيانات اعتماد (الكعكات، رؤوس التفويض)، يجب تعيين خيار credentials: true والتأكد من أن رأس Access-Control-Allow-Origin مُحدد إلى الأصل المحدد، وليس *:

// مثال على التعامل مع بيانات الاعتماد
app.use((req, res, next) => {
  const allowedOrigins = ['https://yourdomain.com'];
  const origin = req.headers.origin;
  
  if (allowedOrigins.includes(origin)) {
    res.header('Access-Control-Allow-Origin', origin);
    res.header('Access-Control-Allow-Credentials', 'true');
  }
  
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

الثغرات الأمنية الشائعة والحلول

أحد أخطر الأخطاء هو استخدام * لجميع الأصول. هذا النهج يفتح تطبيقك لثغرات أمنية:

// ❌ خطير - لا تفعل هذا في الإنتاج
res.header('Access-Control-Allow-Origin', '*');

مشكلة شائعة أخرى هي عدم التعامل بشكل صحيح مع الطلبات المسبقة:

// ✅ التعامل الصحيح مع الطلبات المسبقة
app.options('*', (req, res) => {
  res.header('Access-Control-Allow-Origin', 'https://yourdomain.com');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.sendStatus(200);
});

التكوين المتقدم للسيناريوهات المعقدة

للتطبيقات التي تحتوي على عدة نطاقات فرعية أو توجيه معقد، فكر في تنفيذ التحقق الديناميكي للأصول:

// التحقق الديناميكي للأصول
const validateOrigin = (origin) => {
  const allowedOrigins = [
    'https://yourdomain.com',
    'https://api.yourdomain.com',
    'https://admin.yourdomain.com'
  ];
  
  return allowedOrigins.includes(origin) || 
         origin.startsWith('https://staging.yourdomain.com');
};

app.use((req, res, next) => {
  const origin = req.headers.origin;
  
  if (origin && validateOrigin(origin)) {
    res.header('Access-Control-Allow-Origin', origin);
  }
  
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With');
  res.header('Access-Control-Allow-Credentials', 'true');
  res.header('Access-Control-Max-Age', '86400');
  
  if (req.method === 'OPTIONS') {
    res.sendStatus(200);
  } else {
    next();
  }
});

تصحيح أخطاء مشكلات CORS

أدوات المطور في المتصفح لا تقدر بثمن عند تصحيح مشكلات CORS. عندما تواجه أخطاء CORS، تحقق من:

• علامة الشبكة في المتصفح للطلبات المسبقة
• أخطاء وحدة التحكم التي تظهر انتهاكات CORS المحددة
• رؤوس استجابة الخادم للتحقق من وجود رؤوس CORS

استخدم curl لاختبار رؤوس CORS مباشرة:

curl -H "Origin: https://yourdomain.com" \
     -H "Access-Control-Request-Method: POST" \
     -H "Access-Control-Request-Headers: Content-Type" \
     -X OPTIONS \
     -v https://api.yourdomain.com/endpoint

الخاتمة

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