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

ملخّص

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

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

مقدمة

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

الخاتمة

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

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