مقدمة عن سياسة الميزات

ملخّص

تسمح سياسة الميزات لمطوّري الويب بتفعيل ميزات ويب وواجهات برمجة تطبيقات معيّنة أو إيقافها أو تعديل سلوكها في المتصفّح بشكل انتقائي. إنّه مثل CSP ولكن بدلاً من التحكّم في الأمان، فإنه يتحكّم في الميزات.

إنّ سياسات الميزات هي اتفاقيات صغيرة للموافقة بين المطوّر والمتصفّح يمكن أن تساعد في تعزيز أهدافنا المتمثّلة في إنشاء تطبيقات ويب عالية الجودة (والحفاظ عليها).

مقدمة

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

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

في ما يلي أمثلة على الإجراءات التي يمكنك اتّخاذها باستخدام سياسة الميزات:

  • تغيير السلوك التلقائي لرمز autoplay على الأجهزة الجوّالة وفيديوهات الجهات الخارجية
  • حظر موقع إلكتروني من استخدام واجهات برمجة تطبيقات حسّاسة، مثل camera أو microphone
  • السماح لرموز iframe باستخدام واجهة برمجة التطبيقات fullscreen
  • حظر استخدام واجهات برمجة التطبيقات القديمة، مثل XHR المتزامنة وdocument.write()
  • تأكَّد من ضبط حجم الصور بشكلٍ صحيح (مثلاً، منع حدوث تغييرات مفاجئة في التنسيق) وألّا تكون كبيرة جدًا بالنسبة إلى إطار العرض (مثلاً، استهلاك مساحة كبيرة من عرض النطاق للمستخدم).

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

استخدام سياسة الميزات

توفّر "سياسة الميزات" طريقتَين للتحكّم في الميزات:

  1. من خلال عنوان HTTP Feature-Policy
  2. باستخدام السمة allow في إطارات iframe

إنّ أسهل طريقة لاستخدام سياسة الميزات هي إرسال عنوان Feature-Policy HTTP مع استجابة الصفحة. وقيمة هذا العنوان هي سياسة أو مجموعة من السياسات التي تريد أن يلتزم بها المتصفّح لمصدر معيّن:

Feature-Policy: <feature> <allow list origin(s)>

يمكن أن تتضمّن قائمة مصادر الإذن عدة قيم مختلفة:

  • *: يُسمح باستخدام الميزة في سياقات التصفّح من المستوى الأعلى وفي سياقات التصفّح المُدمجة (إطارات iframe).
  • 'self': يُسمح باستخدام الميزة في سياقات التصفّح من المستوى الأعلى و سياقات التصفّح المتداخلة من المصدر نفسه. ولا يُسمح بها في مستندات المصدر المتعدّد في سياقات التصفّح المتداخلة.
  • ‫'none': لا يُسمح باستخدام الميزة في سياقات التصفّح ذات المستوى الأعلى ولا يُسمح باستخدامها في سياقات التصفّح المتداخلة.
  • ‫<origin(s)>: مصادر معيّنة لتفعيل السياسة لها (مثل https://example.com).

مثال

لنفترض أنّك أردت حظر كل المحتوى من استخدام واجهة برمجة التطبيقات Geolocation API على موقعك الإلكتروني. يمكنك إجراء ذلك من خلال إرسال قائمة 'none' مسموح بها بشكل صارم لميزة geolocation:

Feature-Policy: geolocation 'none'

إذا حاولت قطعة من الرمز أو إطار iframe استخدام واجهة برمجة التطبيقات Geolocation API، سيعمل المتصفّح على حظرها. وينطبق ذلك حتى إذا كان المستخدم قد منح في السابق الإذن بمشاركة موقعه الجغرافي.

انتهاك سياسة الموقع الجغرافي المحدَّد
انتهاك سياسة الموقع الجغرافي المحدّدة

في حالات أخرى، قد يكون من المنطقي تخفيف هذه السياسة قليلاً. يمكننا السماح لمصدرنا الخاص باستخدام واجهة برمجة التطبيقات Geolocation API ولكن منع المحتوى التابع لجهة خارجية من الوصول إليها من خلال ضبط 'self' في قائمة المسموح بها:

Feature-Policy: geolocation 'self'

سمة iframe allow

أما الطريقة الثانية لاستخدام سياسة الميزات، فهي للتحكّم في المحتوى ضمن iframe. استخدِم السمة allow لتحديد قائمة سياسات للمحتوى المضمّن:

<!-- Allow all browsing contexts within this iframe to use fullscreen. -->
<iframe src="https://example.com..." allow="fullscreen"></iframe>

<!-- Equivalent to: -->
<iframe src="https://example.com..." allow="fullscreen *"></iframe>

<!-- Allow only iframe content on a particular origin to access the user's location. -->
<iframe
  src="https://another-example.com/demos/..."
  allow="geolocation https://another-example.com"
></iframe>

ماذا عن سمات iframe الحالية؟

تحتوي بعض الميزات التي تتحكّم فيها سياسة الميزات على سمة حالية للتحكّم في سلوكها. على سبيل المثال، <iframe allowfullscreen> هي سمة تسمح لمحتوى iframe باستخدام واجهة برمجة التطبيقات HTMLElement.requestFullscreen(). تتوفّر أيضًا السمتَان allowpaymentrequest و allowusermedia للسماح باستخدام Payment Request API وgetUserMedia()، على التوالي.

حاوِل استخدام السمة allow بدلاً من هذين السمتَين القديمتَين متى أمكن ذلك. في الحالات التي تحتاج فيها إلى إتاحة التوافق مع الإصدارات القديمة، يمكنك استخدام السمة allow مع سمة قديمة مماثلة، وهو أمر مقبول تمامًا (مثل <iframe allowfullscreen allow="fullscreen">). يُرجى العِلم أنّ السياسة الأكثر تقييدًا هي السائدة. على سبيل المثال، لن يُسمح بعرض الإطار التالي iframe في وضع ملء الشاشة لأنّ allow="fullscreen 'none'" أكثر تقييدًا من allowfullscreen:

<!-- Blocks fullscreen access if the browser supports feature policy. -->
<iframe allowfullscreen allow="fullscreen 'none'" src="..."></iframe>

التحكّم في سياسات متعدّدة في آنٍ واحد

يمكن التحكّم في عدة ميزات في الوقت نفسه من خلال إرسال عنوان HTTP مع قائمة مفصولة بفاصل ; من توجيهات السياسة:

Feature-Policy: unsized-media 'none'; geolocation 'self' https://example.com; camera *;

أو من خلال إرسال عنوان منفصل لكل سياسة:

Feature-Policy: unsized-media 'none'
Feature-Policy: geolocation 'self' https://example.com
Feature-Policy: camera *;

سيؤدي هذا المثال إلى تنفيذ ما يلي:

  • لا يسمح باستخدام unsized-media في جميع سياقات التصفّح.
  • لا يسمح باستخدام geolocation في جميع سياقات التصفّح باستثناء https://example.com و مصدر الصفحة.
  • السماح لتطبيق camera بالوصول إلى جميع سياقات التصفّح

مثال: ضبط سياسات متعددة على إطار iframe

<!-- Blocks the iframe from using the camera and microphone
     (if the browser supports feature policy). -->
<iframe allow="camera 'none'; microphone 'none'"></iframe>

JavaScript API

على الرغم من أنّ الإصدار 60 من Chrome أضاف دعمًا لعنوان Feature-Policy HTTP والسمة allow في إطارات iframe، تمت إضافة JavaScript API في الإصدار 74 من Chrome.

تسمح واجهة برمجة التطبيقات هذه للرمز البرمجي من جهة العميل بتحديد الميزات المسموح بها من قِبل الصفحة أو الإطار أو المتصفّح. يمكنك الوصول إلى ميزاته الرائعة ضمن document.featurePolicy للمستند الرئيسي أو frame.featurePolicy لمحاولة استخدام إطارات iframe.

مثال

يوضّح المثال التالي نتائج إرسال سياسة Feature-Policy: geolocation 'self' على الموقع الإلكتروني https://example.com:

/* @return {Array<string>} List of feature policies allowed by the page. */
document.featurePolicy.allowedFeatures();
// → ["geolocation", "midi",  "camera", "usb", "autoplay",...]

/* @return {boolean} True if the page allows the 'geolocation' feature. */
document.featurePolicy.allowsFeature('geolocation');
// → true

/* @return {boolean} True if the provided origin allows the 'geolocation' feature. */
document.featurePolicy.allowsFeature(
  'geolocation',
  'https://another-example.com/'
);
// → false

/* @return {Array<string>} List of feature policies allowed by the browser
regardless of whether they are in force. */
document.featurePolicy.features();
// → ["geolocation", "midi",  "camera", "usb", "autoplay",...]

/* @return {Array<string>} List of origins (used throughout the page) that are
   allowed to use the 'geolocation' feature. */
document.featurePolicy.getAllowlistForFeature('geolocation');
// → ["https://example.com"]

قائمة السياسات

ما هي الميزات التي يمكن التحكّم فيها من خلال سياسة الميزات؟

في الوقت الحالي، لا تتوفّر وثائق حول السياسات التي يتم تنفيذها وكيفية استخدامها. ستتزايد القائمة أيضًا بمرور الوقت عندما تتّبع المتصفّحات المختلفة المواصفات وتنفّذ سياسات مختلفة. ستكون سياسة الميزات هدفًا متنقلًا، وسيكون من الضروري بالتأكيد توفُّر مستندات مرجعية جيدة.

في الوقت الحالي، تتوفّر طريقتان لمعرفة الميزات التي يمكن التحكّم فيها.

  • اطّلِع على مجموعة متنوعة من العروض التوضيحية حول سياسة الميزات. ويتضمّن أمثلة على كل سياسة تم تنفيذها في Blink.
  • اطّلِع على مصدر Chrome للحصول على قائمة بأسماء الميزات.
  • ابحث عن document.featurePolicy.allowedFeatures() على about:blank للعثور على القائمة:
        ["geolocation",
         "midi",
         "camera",
         "usb",
         "magnetometer",
         "fullscreen",
         "animations",
         "payment",
         "picture-in-picture",
         "accelerometer",
         "vr",
        ...
  • يُرجى الانتقال إلى chromestatus.com للاطّلاع على السياسات التي تم تنفيذها أو التي يتم النظر فيها في Blink.

لتحديد كيفية استخدام بعض هذه السياسات، يمكنك الاطّلاع على مستودع GitHub الخاص بالمواصفات. ويحتوي على بعض التفسيرات حول بعض السياسات.

الأسئلة الشائعة

متى يمكنني استخدام سياسة الميزات؟

جميع السياسات اختيارية، لذا استخدِم "سياسة الميزات" عندما يكون ذلك منطقيًا. على سبيل المثال، إذا كان تطبيقك عبارة عن معرض صور، ستساعدك maximum-downscaling-image السياسة على تجنُّب إرسال صور عملاقة إلى إطارات عرض الأجهزة الجوّالة.

يجب استخدام السياسات الأخرى، مثل document-write وsync-xhr، بمزيد من الحذر. وقد يؤدي تفعيلها إلى إيقاف محتوى الجهات الخارجية، مثل الإعلانات. على மறٍى، يمكن أن تكون "سياسة الميزات" إجراءً وقائيًا للتأكّد من أنّ صفحاتك لن تستخدم أبدًا واجهات برمجة التطبيقات هذه.

هل أستخدم "سياسة الميزات" في مرحلة التطوير أو مرحلة الإنتاج؟

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

هل هناك طريقة للإبلاغ عن انتهاكات السياسة في خادمي؟

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

ما هي قواعد اكتساب المحتوى في إطار iframe؟

تكتسِب النصوص البرمجية (سواء كانت تابعة للطرف الأول أو لجهة خارجية) سياسة سياق التصفّح. وهذا يعني أنّ النصوص البرمجية ذات المستوى الأعلى تكتسِب سياسات المستند الرئيسي.

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

لا، مدة صلاحية السياسة هي لردّ واحد على التنقّل في الصفحة. إذا انتقل المستخدم إلى صفحة جديدة، يجب إرسال عنوان Feature-Policy بوضوح في الاستجابة الجديدة لكي يتم تطبيق السياسة.

ما هي المتصفّحات المتوافقة مع سياسة الميزات؟

يمكنك الانتقال إلى caniuse.com للاطّلاع على أحدث التفاصيل حول التوافق مع المتصفّحات.

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

الخاتمة

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

مراجع إضافية: