إصدار تجريبي من Origin يتيح استخدام رؤوس HTTP في ميزة "الوصول إلى مساحة التخزين"

Natalia Markoborodova

يبدأ Chrome تجربة أصل لإضافة عناوين HTTP إلى Storage Access API (SAA) في الإصدار 130: عناوين Storage Access. يهدف عنوان الطلب الجديد Sec-Fetch-Storage-Access وعنوان الاستجابة Activate-Storage-Access إلى توفير الدعم للموارد غير المستندة إلى إطارات iframe، وتحسين الأداء وتجربة المستخدم للمواقع الإلكترونية التي تعتمد على المحتوى المضمّن، مثل أدوات وسائل التواصل الاجتماعي والتقاويم والأدوات التفاعلية.

سير عمل JavaScript (وقيوده)

في السابق، كانت ميزة "الإعلانات المتجاوبة ذاتيًا" تتطلّب طلبًا من واجهة برمجة التطبيقات JavaScript إلى document.requestStorageAccess() في كل عملية إعادة تحميل، حتى إذا كان المستخدم قد منح الإذن من قبل. على الرغم من فعالية هذه الطريقة، فإنّها تفرض بعض القيود:

• رحلات متعدّدة عبر الشبكة: غالبًا ما كانت العملية تتضمّن عدة طلبات عبر الشبكة وعمليات إعادة تحميل للصفحة قبل أن يعمل المحتوى المضمّن بشكل كامل.
• الاعتماد على إطارات iframe: كان تنفيذ JavaScript يتطلّب استخدام إطارات iframe أو موارد فرعية داخل إطارات iframe، ما يحدّ من المرونة المتاحة للمطوّرين.

على سبيل المثال، ستبدو أداة التقويم من calendar.example المضمّنة في website.example باستخدام JavaScript فقط على النحو التالي:

1. تحميل عنصر نائب: يطلب website.example الأداة. بما أنّ الأداة calendar.example المضمّنة في website.example لا يمكنها الوصول إلى ملفات تعريف الارتباط غير المقسّمة، يتم عرض أداة عنصر نائب بدلاً من ذلك.
2. طلب الإذن: يتم تحميل العنصر النائب، ثم يتم استدعاء document.requestStorageAccess() لطلب إذن storage-access.
3. يختار المستخدم منح الإذن.
4. إعادة تحميل التطبيق المصغّر: يتم تحديث التطبيق المصغّر، وهذه المرة مع إمكانية الوصول إلى ملفات تعريف الارتباط، ويتم أخيرًا تحميل المحتوى المخصّص.
5. في كل مرة يزور فيها المستخدم موقعًا إلكترونيًا يتضمّن أداة calendar.example، تبدو العملية مماثلة تمامًا للخطوات 1 و2 و4، والتبسيط الوحيد هو أنّ المستخدم لا يحتاج إلى إعادة منح الإذن بالوصول.

هذه العملية غير فعّالة: إذا كان المستخدم قد منح إذن الوصول إلى مساحة التخزين، يصبح تحميل iframe الأولي واستدعاء document.requestStorageAccess() وإعادة التحميل اللاحقة غير ضرورية، ما يؤدي إلى حدوث تأخير.

الخطوات الجديدة باستخدام عناوين HTTP

تتيح "عناوين Storage Access" تحميل المحتوى المضمّن بشكل أكثر كفاءة، بما في ذلك الموارد غير التابعة لإطارات iframe.

باستخدام "عناوين Storage Access API"، سيجلب المتصفّح تلقائيًا الموارد مع ضبط عنوان الطلب Sec-Fetch-Storage-Access: inactive إذا كان المستخدم قد منح الإذن من قبل. ليس على المطوّر اتّخاذ أي إجراء لضبط عنوان الطلب. يمكن للخادم الردّ باستخدام عنوان Activate-Storage-Access: retry; allowed-origin="<origin>"، وسيعيد المتصفّح محاولة الطلب باستخدام بيانات الاعتماد اللازمة.

عنوان الطلب

Sec-Fetch-Storage-Access: <access-status>

عندما يزور المستخدم صفحة تتضمّن محتوًى من مواقع إلكترونية متعددة، سيضمّن المتصفّح تلقائيًا العنوان Sec-Fetch-Storage-Access في الطلبات المقدَّمة إلى مواقع إلكترونية متعددة والتي قد تتطلّب بيانات اعتماد (مثل ملفات تعريف الارتباط). يشير هذا العنوان إلى حالة إذن الوصول إلى ملفات تعريف الارتباط في المحتوى المضمّن. في ما يلي كيفية تفسير قيمه:

• ‫none: لا يتضمّن التضمين الإذن storage-access، وبالتالي لا يمكنه الوصول إلى ملفات تعريف الارتباط غير المقسّمة.
• ‫inactive: يتضمّن التضمين الإذن storage-access، ولكن لم يتم تفعيل هذا الإذن. لا يملك التضمين إذن الوصول إلى ملفات تعريف الارتباط غير المقسّمة.
• ‫active: يتضمّن عملية التضمين إذن وصول إلى ملفات تعريف الارتباط غير المقسّمة. سيتم تضمين هذه القيمة في أي طلبات من مصادر متعددة يمكنها الوصول إلى ملفات تعريف الارتباط غير المقسّمة.

عناوين الاستجابة

Activate-Storage-Access: <retry-or-reload>

يطلب العنوان Activate-Storage-Access من المتصفّح إما إعادة محاولة الطلب باستخدام ملفات تعريف الارتباط أو تحميل المورد مباشرةً مع تفعيل Storage Access API. يمكن أن يحتوي العنوان على القيم التالية:

• ‫load: يطلب من المتصفّح منح الجهة التي تضمّن المورد إذن الوصول إلى ملفات تعريف الارتباط غير المقسّمة للمورد المطلوب.
• ‫retry: يردّ الخادم بأنّ على المتصفّح تفعيل إذن الوصول إلى مساحة التخزين، ثم إعادة محاولة الطلب.

Activate-Storage-Access: retry; allowed-origin="https://site.example"
Activate-Storage-Access: retry; allowed-origin=*
Activate-Storage-Access: load

دعم الموارد غير التابعة لإطارات iframe

يتيح تعديل "عناوين الوصول إلى مساحة التخزين" استخدام ميزة "الوصول إلى مساحة التخزين" للمحتوى غير المضمّن في إطار iframe، مثل الصور المستضافة على نطاق مختلف. في السابق، لم تكن أي واجهة برمجة تطبيقات لمنصة الويب تسمح بتحميل هذه الموارد باستخدام بيانات الاعتماد في المتصفّحات إذا لم تتوفّر ملفات تعريف الارتباط التابعة لجهات خارجية. على سبيل المثال، يمكن أن يطلب embedding-site.example صورة:

   <img src="https://server.example/image"/>

ويمكن للخادم أن يستجيب بعرض محتوى أو رسالة خطأ، وذلك حسب ما إذا كانت هناك ملفات تعريف ارتباط متاحة:

app.get('/image', (req, res) => {
  const headers = req.headers;
  const cookieHeader = headers.cookie;
  // Check if the embed has the necessary cookie access
  if (!cookieHeader || !cookieHeader.includes('foo')) {
  // If the cookie is not present, check if the browser supports Storage Access headers
    if (
      'sec-fetch-storage-access' in headers &&
      headers['sec-fetch-storage-access'] == 'inactive'
    ) {
    // If the browser supports Storage Access API, retry the request with storage access enabled
      res.setHeader('Activate-Storage-Access', 'retry; allowed-origin="https://embedding-site.example"');
    }
    res.status(401).send('No cookie!');
   } else {
    // If the cookie is available, check if the user is authorized to access the image
    if (!check_authorization(cookieHeader)) {
      return res.status(401).send('Unauthorized!');
    }
    // If the user is authorized, respond with the image file
    res.sendFile("path/to/image.jpeg");
  }
});

إذا لم تكن ملفات تعريف الارتباط متاحة، يتحقّق الخادم من قيمة عنوان الطلب Sec-Fetch-Storage-Access. إذا تم ضبط هذه القيمة على inactive، يستجيب الخادم باستخدام العنوان Activate-Storage-Access: retry، ما يشير إلى أنّه يجب إعادة محاولة الطلب مع إمكانية الوصول إلى مساحة التخزين. إذا لم تكن هناك ملفات تعريف ارتباط ولم يتضمّن العنوان Sec-Fetch-Storage-Access القيمة inactive، لن يتم تحميل الصورة.

تسلسل عناوين HTTP

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

باستخدام Storage Access Headers، ستؤدي زيارات الصفحات اللاحقة إلى بدء المسار التالي:

1. يزور المستخدم website.example الذي تم تضمين calendar.example فيه مرة أخرى. لا يمكن لهذا الاسترجاع الوصول إلى ملف تعريف الارتباط بعد، كما كان الحال في السابق. ومع ذلك، سبق أن منح المستخدم الإذن storage-access، ويتضمّن جلب البيانات العنوان Sec-Fetch-Storage-Access: inactive، للإشارة إلى أنّ الوصول إلى ملفات تعريف الارتباط غير المقسّمة متاح ولكن لا يتم استخدامه.
2. يستجيب الخادم calendar.example باستخدام العنوان Activate-Storage-Access: retry; allowed-origin="<origin>" (في هذه الحالة، ستكون قيمة <origin> هي https://website.example)، للإشارة إلى أنّ عملية جلب المورد تتطلّب استخدام ملفات تعريف الارتباط غير المقسّمة مع إذن الوصول إلى مساحة التخزين.
3. يعيد المتصفّح محاولة إرسال الطلب، ويضمّ هذه المرة ملفات تعريف الارتباط غير المقسّمة (من خلال تفعيل إذن storage-access لعملية الجلب هذه).
4. يستجيب خادم calendar.example بمحتوى إطار iframe المخصّص. يتضمّن الردّ العنوان Activate-Storage-Access: load للإشارة إلى أنّه على المتصفّح تحميل المحتوى مع تفعيل الإذن storage-access (أي التحميل مع إمكانية الوصول إلى ملفات تعريف الارتباط غير المقسّمة، كما لو تم استدعاء document.requestStorageAccess()).
5. يحمّل وكيل المستخدم محتوى iframe مع إمكانية الوصول إلى ملفات تعريف الارتباط غير المقسّمة باستخدام إذن الوصول إلى مساحة التخزين. بعد هذه الخطوة، يمكن أن تعمل الأداة على النحو المتوقّع.

تعديل الحلّ

باستخدام ميزة "عناوين الوصول إلى مساحة التخزين"، قد تحتاج إلى تعديل الرمز في حالتين:

1. تستخدِم "إعلانات البحث المدفوعة" وتريد تحقيق أداء أفضل باستخدام منطق العناوين.
2. لديك عملية تحقّق أو منطق يعتمد على ما إذا كان عنوان Origin مضمّنًا في الطلب على خادمك.

تنفيذ منطق عناوين SAA

لاستخدام عناوين Storage Access API في الحلّ الذي تقدّمه، عليك تعديل الحلّ. لنفترض أنّك مالك calendar.example. لكي يتمكّن website.example من تحميل أداة calendar.example مخصّصة، يجب أن يتيح رمز الأداة الوصول إلى مساحة التخزين.

من جهة العميل

لا تتطلّب ميزة "عناوين الوصول إلى مساحة التخزين" أي تعديل للرمز البرمجي من جهة العميل للحلول الحالية. يمكنك الاطّلاع على المستندات لمعرفة كيفية تنفيذ SAA.

جهة الخادم

على جانب الخادم، يمكنك استخدام العناوين الجديدة:

app.get('/cookie-access-endpoint', (req, res) => {
  const storageAccessHeader = req.headers['sec-fetch-storage-access'];

  if (storageAccessHeader === 'inactive') {
    // User needs to grant permission, trigger a prompt
    if (!validate_origin(req.headers.origin)) {
      res.status(401).send(`${req.headers.origin} is not allowed to send` +
          ' credentialed requests to this server.');
      return;
    }
    res.set('Activate-Storage-Access', `retry; allowed-origin="${req.headers.origin}"`);
    res.status(401).send('This resource requires storage access. Please grant permission.');
  } else if (storageAccessHeader === 'active') {
    // User has granted permission, proceed with access
    res.set('Activate-Storage-Access', 'load');
    // Include the actual iframe content here
    res.send('This is the content that requires cookie access.');
  } else {
    // Handle other cases (e.g., 'Sec-Fetch-Storage-Access': 'none')
  }
});

يمكنك الاطّلاع على العرض التوضيحي لمعرفة كيفية عمل هذا الحل عمليًا.

تعديل منطق عنوان Origin

باستخدام عناوين Storage Access API، يرسل Chrome العنوان Origin في عدد أكبر من الطلبات مقارنةً بالسابق. قد يؤثر ذلك في منطق جهة الخادم إذا كان يعتمد على توفّر عنوان Origin فقط لأنواع معيّنة من الطلبات (مثل تلك المحدّدة بواسطة CORS).

لتجنُّب المشاكل المحتملة، عليك مراجعة الرمز البرمجي من جهة الخادم:

• تحقَّق من أي عملية تحقّق أو منطق يعتمد على وجود العنوان Origin.
• عدِّل الرمز البرمجي للتعامل مع العنوان Origin في المزيد من الحالات.

المزايا الرئيسية

إنّ "عناوين الوصول إلى مساحة التخزين" هي طريقة مقترَحة وأكثر فعالية لاستخدام واجهة برمجة التطبيقات SAA. بشكل عام، يؤدي هذا التغيير إلى تحقيق عدة تحسينات:

• إتاحة عمليات التضمين غير المستندة إلى إطارات iframe: تتيح واجهة برمجة التطبيقات Storage Access API استخدامها مع مجموعة أكبر من الموارد.
• تقليل استخدام الشبكة: عدد أقل من الطلبات وأحجام حمولات أصغر
• انخفاض استخدام وحدة المعالجة المركزية: تقليل معالجة JavaScript
• تحسين تجربة المستخدم: يزيل عمليات التحميل الوسيطة المزعجة.

المشاركة في التجربة الأصلية

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

يمكنك تجربة ميزة "عناوين الوصول إلى مساحة التخزين" من خلال التسجيل في التجارب الأصلية بدءًا من الإصدار 130 من Chrome. للمشاركة في التجربة الأصلية، عليك اتّباع الخطوات التالية:

1. انتقِل إلى صفحة التسجيل في تجربة Storage Access Headers الأصلية.
2. اتّبِع التعليمات بشأن المشاركة في التجربة الأصلية.

الاختبار محليًا

يمكنك اختبار ميزة "عناوين Storage Access" محليًا للتأكّد من أنّ موقعك الإلكتروني جاهز لهذا التغيير.

اتّبِع الخطوات التالية لضبط إعدادات مثيل Chrome:

1. فعِّل ميزة Chrome التجريبية على chrome://flags/#storage-access-headers.
2. أعِد تشغيل Chrome لتفعيل التغييرات.

التفاعل مع الملاحظات ومشاركتها

إذا كانت لديك ملاحظات أو واجهت أي مشاكل، يمكنك تقديم بلاغ. يمكنك أيضًا الاطّلاع على مزيد من المعلومات عن عناوين Storage Access API في شرح GitHub.