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

إريك بيدلمان
Twitter GitHub الصفحة الرئيسية

ملخّص

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

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

مقدمة

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

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

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

  • يمكنك تغيير السلوك التلقائي لـ 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)

مثال

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

Feature-Policy: geolocation 'none'

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

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

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

Feature-Policy: geolocation 'self'

السمة allow في إطار iframe

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

الخلاصة

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

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