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

ملخّص

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

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

مقدمة

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

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

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

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

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

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

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

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

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

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() API. فهناك أيضًا السمتان 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

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

تسمح واجهة برمجة التطبيقات هذه للرمز البرمجي من جهة العميل بتحديد الميزات المسموح بها من خلال صفحة أو إطار أو متصفح. يمكنك الوصول إلى الميزات الخاصة به ضمن "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 بمزيد من العناية. وقد يؤدي تفعيلها إلى إيقاف المحتوى التابع لجهة خارجية مثل الإعلانات. ومن ناحية أخرى، يمكنك أن تحرص سياسة الميزات على إجراء تدقيق دقيق للتأكد من أنّ صفحاتك لا تستخدم أبدًا واجهات برمجة التطبيقات المخيفة جيّدًا.

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

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

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

جارٍ العمل على Reporting API يمكنك تلقّي تقارير حول انتهاكات سياسة الميزات في أي وقت، تمامًا كما هو الحال بالنسبة إلى كيفية تفعيل ميزة تلقّي تقارير حول انتهاكات سياسة CSP أو عمليات الإيقاف النهائي.

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

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

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

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

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

راجع caniuse.com للحصول على أحدث التفاصيل حول دعم المتصفح.

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

الخلاصة

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

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