حماية موقعك باستخدام سياسة الميزات

كانت إحدى ميزات نظام الويب الأساسي التي تم إبرازها في قمة Chrome Dev الأخيرة هي سياسة الميزات ، والتي تهدف إلى "السماح لمؤلفي المواقع بتمكين وتعطيل استخدام ميزات المتصفح المختلفة وواجهات برمجة التطبيقات". في هذه المقالة ، سألقي نظرة على ما يعنيه ذلك لمطوري الويب ، مع بعض الأمثلة العملية.

في مقالته التمهيدية على موقع Google Developers ، يصف إريك بيدلمان سياسة الميزات على النحو التالي:

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

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

قد تشمل الأمثلة ما يلي:

1. أقوم بتضمين iframe ولا أريد أن يتمكن الموقع المضمن من الوصول إلى كاميرا الزائر ؛
2. أرغب في اكتشاف المواقف التي يتم فيها نشر صور غير محسّنة على موقعي عبر نظام إدارة المحتوى ؛
3. هناك العديد من المطورين الذين يعملون في مشروعي ، وأود أن أعرف ما إذا كانوا يستخدمون واجهات برمجة تطبيقات قديمة مثل document.write .

يمكن تتبع كل هذه الأشياء أو حظرها أو الإبلاغ عنها كجزء من سياسة الميزات.

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

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

 Feature-Policy: <directive> <allowlist>

<directive> هو اسم الميزة التي تقوم بتعيين السياسة عليها.

قائمة الميزات الحالية (مأخوذة من العرض التقديمي المقدم في Chrome Dev Summit) هي كما يلي:

• مقياس التسارع
• مستشعر الضوء المحيط
• تشغيل تلقائي
• الة تصوير
• كتابة الوثيقة
• الوسائط المشفرة
• تكبير الشاشة
• تحديد الموقع الجغرافي
• جيروسكوب
• تخطيط الرسوم المتحركة
• تحميل بطيئ
• تنسيقات الصور القديمة
• مقياس المغناطيسية
• ميدي
• صور كبيرة الحجم
• دفع
• صور في صور
• مكبر الصوت
• مزامنة النص
• مزامنة- xhr
• صور غير محسنة
• وسائط غير بحجم
• يو اس بي
• التمرير العمودي
• vr

توضح <allowlist> كيفية استخدام الميزة - إن وجدت - وتأخذ قيمة واحدة أو أكثر من القيم التالية.

• *
  السياسة الأكثر تحرراً ، والتي تنص على أنه سيتم السماح بالميزة في هذا المستند ، وأي إطارات مضمنة سواء من هذا المجال أو في أي مكان آخر. يمكن استخدامه فقط كقيمة واحدة لأنه ليس من المنطقي تمكين كل شيء وأيضًا تمرير قائمة المجالات ، على سبيل المثال.
• self
  ستكون الميزة متاحة في المستند وأي إطارات مضمنة ، ومع ذلك ، يجب أن يكون لإطارات iframe نفس الأصل.
• src
  قابل للتطبيق فقط عند استخدام سمة iframe allow . يسمح هذا لميزة طالما أن المستند الذي تم تحميله فيه يأتي من نفس أصل عنوان URL في سمة src الخاصة بإطار iframe.
• none
  تعطيل الميزة الخاصة بالمستند وأي إطارات مضمنة متداخلة. يمكن استخدامها فقط كقيمة واحدة.
• <origin(s)>
  الميزة مسموح بها لأصول محددة ؛ هذا يعني أنه يمكنك تحديد قائمة المجالات التي يُسمح فيها بالميزة. قائمة المجالات مفصولة بمسافات.

هناك طريقتان يمكنك من خلالهما تمكين سياسات الميزات على موقعك: يمكنك إرسال رأس HTTP ، أو استخدام السمة allow على iframe.

رأس HTTP

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

على سبيل المثال ، إذا أردت منع استخدام واجهة برمجة تطبيقات تحديد الموقع الجغرافي وكنت أستخدم خادم الويب NGINX ، فيمكنني تحرير ملفات التكوين لموقعي في NGINX لإضافة العنوان التالي ، مما سيمنع أي مستند في موقعي وأي iframe مضمنًا من استخدام واجهة برمجة تطبيقات تحديد الموقع الجغرافي.

 add_header Feature-Policy "geolocation none;";

يمكن تعيين سياسات متعددة في عنوان واحد. لمنع تحديد الموقع الجغرافي والاهتزاز ولكن مع السماح unsized-media من النطاق example.com ، يمكنني تعيين ما يلي:

 add_header Feature-Policy "vibrate none; geolocation none; unsized-media https://example.com;";

سمة allow على iFrames

إذا كنا مهتمين بشكل أساسي بما يحدث للمحتوى في iframe ، فيمكننا استخدام سياسة الميزات في iframe نفسه ؛ هذا يستفيد من دعم المتصفح الأفضل قليلاً في وقت كتابة هذا التقرير مع دعم Chrome و Safari لهذا الاستخدام.

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

 <iframe allow="geolocation 'none'; camera 'none'; microphone 'none'">

قد تكون على دراية بالسمات الفردية التي تتحكم في محتوى iframes allowfullscreen و allowpaymentrequest و allowusermedia . يمكن استبدالها بسمة allow لسياسة الميزات ، ولأسباب توافق المتصفح ، يمكنك استخدام كلاهما في إطار iframe. إذا كنت تستخدم كلتا السمتين ، فسيتم تطبيق الأكثر تقييدًا. تعرض مقالة Google مثالاً على إطار iframe الذي يستخدم allowfullscreen - مما يعني أنه يُسمح لإطار iframe بالدخول إلى ملء الشاشة ، ولكن بعد ذلك مع سياسة ميزة متضاربة fullscreen none . هذا التعارض ، وبالتالي فإن السياسة الأكثر تقييدًا هي التي تفوز ولن يُسمح لإطار iframe هذا بالدخول إلى وضع ملء الشاشة.

 <iframe allowfullscreen allow="fullscreen 'none'" src="...">

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

واجهة برمجة تطبيقات سياسة الميزات والتقارير

يمكن الإبلاغ عن انتهاكات سياسة الميزات عبر Reporting API ، مما يعني أنه يمكنك تطوير مجموعة شاملة من السياسات لتتبع استخدام ميزة عبر موقعك. سيكون هذا شفافًا تمامًا للمستخدمين لديك ولكنه يمنحك قدرًا هائلاً من المعلومات حول كيفية استخدام الميزات.

دعم المستعرض لسياسة الميزات

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

العديد من حالات الاستخدام التي سأوضحها أدناه قابلة للاستخدام في الوقت الحالي ، دون التسبب في أي تأثير على زوار الموقع الذين يستخدمون المتصفحات دون دعم.

متى يجب استخدام نهج الميزة

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

مراقبة الأطراف الثالثة

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

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

تمكين الميزات بشكل انتقائي

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

اصطياد استخدام واجهات برمجة التطبيقات القديمة والميزات ذات الأداء السيئ

يمكن تشغيل "نهج الميزات" في وضع التقرير فقط. يمكنه بعد ذلك تتبع استخدام ميزات معينة ويخبرك عندما يتم العثور عليها على الموقع. يمكن أن يكون هذا مفيدًا في العديد من السيناريوهات. إذا كان لديك موقع كبير جدًا به الكثير من التعليمات البرمجية القديمة ، فإن تمكين سياسة الميزات سيساعدك على تعقب الأماكن التي تحتاج إلى الاهتمام. إذا كنت تعمل مع فريق كبير (خاصة إذا كان المطورون يسحبون غالبًا بعض مكتبات الكود التابعة لجهات خارجية) ، فيمكن لـ Feature Policy التقاط الأشياء التي تفضل عدم رؤيتها على الموقع.

التعامل مع الصور المحسّنة بشكل سيء

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

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

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

تبحث سياسة ميزة unsized-media غير الحجم عن الصور أو الفيديوهات التي ليس لها حجم معين في HTML أو CSS. عند تحميل عنصر وسائط غير بحجم ، يمكن أن يتسبب ذلك في إعادة تدفق المحتوى على الصفحة.

لمنع إضافة أي وسائط غير بحجم إلى الموقع ، قم بتعيين العنوان التالي. سيتم بعد ذلك عرض الوسائط بحجم افتراضي 300 × 150 بكسل. سترى تحميل موقعك بوسائط صغيرة ، وتدرك أن لديك مشكلة في الإصلاح.

 Feature-Policy: unsized-media 'none'

شاهد عرضًا توضيحيًا (يحتاج إلى Chrome Canary مع تشغيل ميزات النظام الأساسي للويب التجريبية).

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

 Feature-Policy: oversized-images 'none'

شاهد عرضًا توضيحيًا (يحتاج إلى Chrome Canary مع تشغيل ميزات النظام الأساسي للويب التجريبية).

تتحقق سياسة ميزة unoptimized-images لمعرفة ما إذا كان حجم بيانات الصور بالبايت أكبر من 0.5x منطقة العرض بالبكسل. إذا تم تمكين هذه السياسة وكانت الصور تنتهكها ، فسيتم عرض عنصر نائب بدلاً من الصورة.

 Feature-Policy: unoptimized-images 'none'

شاهد عرضًا توضيحيًا (يحتاج إلى Chrome Canary مع تشغيل ميزات النظام الأساسي للويب التجريبية).

اختبار سياسة الميزة وإعداد التقارير عنها

سيعرض Chrome DevTools رسالة لإعلامك بأن بعض الميزات قد تم حظرها أو تمكينها بواسطة سياسة الميزات. إذا قمت بتمكين سياسة الميزات على موقعك ، فيمكنك التحقق من أن هذا يعمل.

تمت إضافة دعم نهج الميزات أيضًا إلى موقع Security Headers ، مما يعني أنه يمكنك التحقق من وجودها جنبًا إلى جنب مع الرؤوس مثل سياسة أمان المحتوى على موقعك - ​​أو مواقع أخرى على الويب.

هناك امتداد Chrome DevTools يتيح لك التبديل بين تشغيل وإيقاف سياسات الميزات المختلفة (أيضًا طريقة رائعة للتحقق من صفحاتك دون الحاجة إلى تكوين أي رؤوس).

إذا كنت ترغب في دمج سياسات الميزات الخاصة بك مع Reporting API ، فهناك المزيد من المعلومات فيما يتعلق بكيفية القيام بذلك هنا.

مزيد من القراءة والموارد

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

• مواصفات نهج الميزة
• إدخال سياسة الميزات
• عرض من Chrome Dev Summit
• نهج الميزات على MDN
• هل يمكنني استخدام سياسة الميزات
• عروض توضيحية لسياسة الميزات
• قم بإعداد رؤوس سياسة الميزات وسياسة الإحالة وسياسة أمان المحتوى في Nginx