التواصل بين المصادر المختلفة: أنماط الأمان مع واجهة برمجة تطبيقات PostMessage

في الويب الحديث، تحتاج التطبيقات بشكل متكرر إلى التفاعل مع موارد من مصادر مختلفة. تُعد سياسة نفس المصدر (SOP) آلية أمان حاسمة تقيد النصوص البرمجية (scripts) من الوصول إلى موارد من مصدر مختلف. ومع ذلك، هناك سيناريوهات مشروعة يكون فيها التواصل بين المصادر المختلفة ضروريًا. توفر واجهة برمجة التطبيقات postMessage آلية مُتحكم بها لتحقيق ذلك، ولكن من الضروري فهم مخاطرها الأمنية المحتملة وتطبيق أنماط الأمان المناسبة.

فهم سياسة نفس المصدر (SOP)

سياسة نفس المصدر هي مفهوم أمني أساسي في متصفحات الويب. فهي تمنع صفحات الويب من إرسال طلبات إلى نطاق مختلف عن النطاق الذي خدم صفحة الويب. يتم تعريف المصدر بواسطة المخطط (البروتوكول)، والمضيف (النطاق)، والمنفذ. إذا اختلف أي من هذه العناصر، تُعتبر المصادر مختلفة. على سبيل المثال:

• https://example.com
• https://www.example.com
• http://example.com
• https://example.com:8080

كل هذه المصادر مختلفة، وتقيد سياسة نفس المصدر (SOP) الوصول المباشر للنصوص البرمجية بينها.

تقديم واجهة برمجة تطبيقات PostMessage

توفر واجهة برمجة التطبيقات postMessage آلية آمنة ومُتحكم بها للتواصل بين المصادر المختلفة. تسمح للنصوص البرمجية بإرسال رسائل إلى نوافذ أخرى (مثل iframes، أو نوافذ جديدة، أو علامات تبويب)، بغض النظر عن مصدرها. يمكن للنافذة المستقبلة بعد ذلك الاستماع لهذه الرسائل ومعالجتها وفقًا لذلك.

الصيغة الأساسية لإرسال رسالة هي:

otherWindow.postMessage(message, targetOrigin);

• otherWindow: مرجع إلى النافذة المستهدفة (على سبيل المثال، window.parent، iframe.contentWindow، أو كائن نافذة تم الحصول عليه من window.open).
• message: البيانات التي تريد إرسالها. يمكن أن تكون أي كائن JavaScript يمكن تحويله إلى سلسلة (مثل السلاسل النصية، الأرقام، الكائنات، المصفوفات).
• targetOrigin: يحدد المصدر الذي تريد إرسال الرسالة إليه. هذا معيار أمني حاسم.

في الطرف المستقبل، تحتاج إلى الاستماع لحدث message:

window.addEventListener('message', function(event) {
  // ...
});

يحتوي كائن event على الخصائص التالية:

• event.data: الرسالة التي أرسلتها النافذة الأخرى.
• event.origin: مصدر النافذة التي أرسلت الرسالة.
• event.source: مرجع إلى النافذة التي أرسلت الرسالة.

المخاطر الأمنية والثغرات

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

1. عدم تطابق المصدر المستهدف

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

مثال (كود برمجي به ثغرة):

window.addEventListener('message', function(event) {
  // لا تفعل هذا!
  processMessage(event.data);
});

مثال (كود برمجي آمن):

window.addEventListener('message', function(event) {
  if (event.origin !== 'https://trusted-origin.com') {
    console.warn('تم استلام رسالة من مصدر غير موثوق:', event.origin);
    return;
  }

  processMessage(event.data);
});

2. حقن البيانات

يمكن أن يؤدي التعامل مع البيانات المستلمة (event.data) ككود قابل للتنفيذ أو حقنها مباشرة في DOM إلى ثغرات البرمجة النصية عبر المواقع (XSS). قم دائمًا بتعقيم البيانات المستلمة والتحقق من صحتها قبل استخدامها.

مثال (كود برمجي به ثغرة):

window.addEventListener('message', function(event) {
  if (event.origin === 'https://trusted-origin.com') {
    document.body.innerHTML = event.data; // لا تفعل هذا!
  }
});

مثال (كود برمجي آمن):

window.addEventListener('message', function(event) {
  if (event.origin === 'https://trusted-origin.com') {
    const sanitizedData = sanitize(event.data); // قم بتطبيق دالة تعقيم مناسبة
    document.getElementById('message-container').textContent = sanitizedData;
  }
});

function sanitize(data) {
    // قم بتطبيق منطق تعقيم قوي هنا.
    // على سبيل المثال، استخدم DOMPurify أو مكتبة مشابهة
    return DOMPurify.sanitize(data);
}

3. هجمات الرجل في المنتصف (MITM)

إذا تم الاتصال عبر قناة غير آمنة (HTTP)، يمكن لمهاجم الرجل في المنتصف اعتراض الرسائل وتعديلها. استخدم دائمًا HTTPS للاتصال الآمن.

4. تزوير الطلبات عبر المواقع (CSRF)

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

5. استخدام حرف البدل (Wildcard) في targetOrigin

يسمح تعيين targetOrigin إلى * لأي مصدر باستلام الرسالة. يجب تجنب هذا إلا في حالة الضرورة القصوى، لأنه يبطل الغرض من الأمان القائم على المصدر. إذا كان لا بد من استخدام *، فتأكد من تطبيق تدابير أمنية قوية أخرى، مثل رموز مصادقة الرسائل (MACs).

مثال (تجنب هذا):

otherWindow.postMessage(message, '*'); // تجنب استخدام '*' إلا في حالة الضرورة القصوى

أنماط الأمان وأفضل الممارسات

للتخفيف من المخاطر المرتبطة بـ postMessage، اتبع أنماط الأمان وأفضل الممارسات التالية:

1. التحقق الصارم من المصدر

تحقق دائمًا من خاصية event.origin في جانب المستقبل. قارنها بقائمة محددة مسبقًا من المصادر الموثوقة. استخدم المساواة الصارمة (===) للمقارنة.

2. تعقيم البيانات والتحقق من صحتها

قم بتعقيم جميع البيانات المستلمة عبر postMessage والتحقق من صحتها قبل استخدامها. استخدم تقنيات التعقيم المناسبة اعتمادًا على كيفية استخدام البيانات (مثل ترميز HTML، ترميز URL، التحقق من صحة الإدخال). استخدم مكتبات مثل DOMPurify لتعقيم HTML.

3. رموز مصادقة الرسائل (MACs)

قم بتضمين رمز مصادقة الرسالة (MAC) في الرسالة لضمان سلامتها وأصالتها. يقوم المرسل بحساب MAC باستخدام مفتاح سري مشترك ويضعه في الرسالة. يقوم المستقبل بإعادة حساب MAC باستخدام نفس المفتاح السري المشترك ومقارنته بـ MAC المستلم. إذا تطابقا، تعتبر الرسالة أصلية ولم يتم العبث بها.

مثال (استخدام HMAC-SHA256):

// المرسل
async function sendMessage(message, targetOrigin, sharedSecret) {
  const encoder = new TextEncoder();
  const data = encoder.encode(JSON.stringify(message));
  const key = await crypto.subtle.importKey(
    "raw",
    encoder.encode(sharedSecret),
    { name: "HMAC", hash: "SHA-256" },
    false,
    ["sign"]
  );
  const signature = await crypto.subtle.sign("HMAC", key, data);
  const signatureArray = Array.from(new Uint8Array(signature));
  const signatureHex = signatureArray.map(b => b.toString(16).padStart(2, '0')).join('');

  const securedMessage = {
    data: message,
    signature: signatureHex
  };

  otherWindow.postMessage(securedMessage, targetOrigin);
}

// المستقبل
async function receiveMessage(event, sharedSecret) {
  if (event.origin !== 'https://trusted-origin.com') {
    console.warn('تم استلام رسالة من مصدر غير موثوق:', event.origin);
    return;
  }

  const securedMessage = event.data;
  const message = securedMessage.data;
  const receivedSignature = securedMessage.signature;

  const encoder = new TextEncoder();
  const data = encoder.encode(JSON.stringify(message));
  const key = await crypto.subtle.importKey(
    "raw",
    encoder.encode(sharedSecret),
    { name: "HMAC", hash: "SHA-256" },
    false,
    ["verify"]
  );
  const signature = await crypto.subtle.sign("HMAC", key, data);
  const signatureArray = Array.from(new Uint8Array(signature));
  const signatureHex = signatureArray.map(b => b.toString(16).padStart(2, '0')).join('');

  if (signatureHex === receivedSignature) {
    console.log('الرسالة أصلية!');
    processMessage(message); // استمر في معالجة الرسالة
  } else {
    console.error('فشل التحقق من توقيع الرسالة!');
  }
}

مهم: يجب إنشاء المفتاح السري المشترك وتخزينه بشكل آمن. تجنب ترميز المفتاح بشكل ثابت في الكود.

4. استخدام Nonce والطوابع الزمنية

لمنع هجمات إعادة التشغيل (replay attacks)، قم بتضمين nonce فريد (رقم يستخدم مرة واحدة) وطابع زمني في الرسالة. يمكن للمستقبل بعد ذلك التحقق من أن nonce لم يتم استخدامه من قبل وأن الطابع الزمني يقع ضمن إطار زمني مقبول. هذا يخفف من خطر قيام المهاجم بإعادة تشغيل الرسائل التي تم اعتراضها مسبقًا.

5. مبدأ الامتيازات الأقل

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

6. سياسة أمان المحتوى (CSP)

استخدم سياسة أمان المحتوى (CSP) لتقييد المصادر التي يمكن تحميل النصوص البرمجية منها والإجراءات التي يمكن أن تقوم بها النصوص البرمجية. يمكن أن يساعد هذا في التخفيف من تأثير ثغرات XSS التي قد تنشأ من التعامل غير السليم مع بيانات postMessage.

7. التحقق من صحة الإدخال

تحقق دائمًا من بنية وتنسيق البيانات المستلمة. حدد تنسيقًا واضحًا للرسائل وتأكد من أن البيانات المستلمة تتوافق مع هذا التنسيق. يساعد هذا في منع السلوك غير المتوقع والثغرات.

8. التسلسل الآمن للبيانات

استخدم تنسيق تسلسل بيانات آمنًا، مثل JSON، لتسلسل الرسائل وإلغاء تسلسلها. تجنب استخدام التنسيقات التي تسمح بتنفيذ الكود، مثل eval() أو Function().

9. تحديد حجم الرسالة

حدد حجم الرسائل المرسلة عبر postMessage. يمكن أن تستهلك الرسائل الكبيرة موارد مفرطة وقد تؤدي إلى هجمات حجب الخدمة.

10. عمليات تدقيق أمنية منتظمة

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

سيناريو مثال: اتصال آمن بين Iframe وصفحته الأصل

لنفترض سيناريو يحتاج فيه iframe مستضاف على https://iframe.example.com إلى التواصل مع صفحته الأصل المستضافة على https://parent.example.com. يحتاج iframe إلى إرسال بيانات المستخدم إلى الصفحة الأصل لمعالجتها.

Iframe (https://iframe.example.com):

// أنشئ مفتاحًا سريًا مشتركًا (استبدل بطريقة آمنة لإنشاء المفاتيح)
const sharedSecret = 'YOUR_SECURE_SHARED_SECRET';

// احصل على بيانات المستخدم
const userData = {
  name: 'John Doe',
  email: 'john.doe@example.com'
};

// أرسل بيانات المستخدم إلى الصفحة الأصل
async function sendUserData(userData) {
  const encoder = new TextEncoder();
  const data = encoder.encode(JSON.stringify(userData));
  const key = await crypto.subtle.importKey(
    "raw",
    encoder.encode(sharedSecret),
    { name: "HMAC", hash: "SHA-256" },
    false,
    ["sign"]
  );
  const signature = await crypto.subtle.sign("HMAC", key, data);
  const signatureArray = Array.from(new Uint8Array(signature));
  const signatureHex = signatureArray.map(b => b.toString(16).padStart(2, '0')).join('');

  const securedMessage = {
    data: userData,
    signature: signatureHex
  };
  parent.postMessage(securedMessage, 'https://parent.example.com');
}

sendUserData(userData);

الصفحة الأصل (https://parent.example.com):

// المفتاح السري المشترك (يجب أن يطابق مفتاح الـ iframe)
const sharedSecret = 'YOUR_SECURE_SHARED_SECRET';

window.addEventListener('message', async function(event) {
  if (event.origin !== 'https://iframe.example.com') {
    console.warn('تم استلام رسالة من مصدر غير موثوق:', event.origin);
    return;
  }

  const securedMessage = event.data;
  const userData = securedMessage.data;
  const receivedSignature = securedMessage.signature;

  const encoder = new TextEncoder();
  const data = encoder.encode(JSON.stringify(userData));
  const key = await crypto.subtle.importKey(
    "raw",
    encoder.encode(sharedSecret),
    { name: "HMAC", hash: "SHA-256" },
    false,
    ["verify"]
  );
  const signature = await crypto.subtle.sign("HMAC", key, data);
  const signatureArray = Array.from(new Uint8Array(signature));
  const signatureHex = signatureArray.map(b => b.toString(16).padStart(2, '0')).join('');


  if (signatureHex === receivedSignature) {
    console.log('الرسالة أصلية!');
    // عالج بيانات المستخدم
    console.log('بيانات المستخدم:', userData);
  } else {
    console.error('فشل التحقق من توقيع الرسالة!');
  }
});

ملاحظات هامة:

• استبدل YOUR_SECURE_SHARED_SECRET بمفتاح سري مشترك تم إنشاؤه بشكل آمن.
• يجب أن يكون المفتاح السري المشترك هو نفسه في كل من iframe والصفحة الأصل.
• يستخدم هذا المثال HMAC-SHA256 لمصادقة الرسائل.

الخاتمة

تُعد واجهة برمجة التطبيقات postMessage أداة قوية لتمكين التواصل بين المصادر المختلفة في تطبيقات الويب. ومع ذلك، من الضروري فهم المخاطر الأمنية المحتملة وتطبيق أنماط الأمان المناسبة للتخفيف من هذه المخاطر. باتباع أنماط الأمان وأفضل الممارسات الموضحة في هذا الدليل، يمكنك استخدام postMessage بأمان لبناء تطبيقات ويب قوية وآمنة.

تذكر دائمًا إعطاء الأولوية للأمان والبقاء على اطلاع بأحدث أفضل الممارسات الأمنية لتطوير الويب. قم بمراجعة الكود الخاص بك وتكوينات الأمان بانتظام لضمان حماية تطبيقاتك من الثغرات المحتملة.