یک آزمایش اولیه برای <مجوز> HTML جدید عنصر

Thomas Steiner

تعدادی روش دستوری برای درخواست مجوز استفاده از ویژگی‌های قدرتمندی مانند دسترسی به موقعیت مکانی در برنامه‌های وب وجود دارد. این روش‌ها با چالش‌هایی همراه هستند، به همین دلیل تیم مجوزهای کروم در حال آزمایش یک روش اعلانی جدید است: یک عنصر HTML اختصاصی <permission> . این عنصر در نسخه آزمایشی کروم ۱۲۶ قرار دارد و در نهایت امیدواریم آن را استاندارد کنیم.

روش‌های دستوری برای درخواست مجوز

وقتی برنامه‌های وب نیاز به دسترسی به ویژگی‌های قدرتمند دارند، باید درخواست مجوز کنند. برای مثال، وقتی نقشه‌های گوگل با استفاده از API موقعیت مکانی جغرافیایی به موقعیت مکانی کاربر نیاز دارند، مرورگرها از کاربر درخواست می‌کنند و اغلب گزینه‌ای برای ذخیره آن تصمیم دارند. این یک مفهوم کاملاً تعریف‌شده در مشخصات مجوزها است.

در اولین استفاده به طور ضمنی درخواست کنید، نه اینکه از قبل صریحاً درخواست کنید

API موقعیت‌یابی جغرافیایی (Geolocation API) یک API قدرتمند است و به رویکرد پرسش ضمنی در اولین استفاده متکی است. برای مثال، وقتی یک برنامه متد navigator.geolocation.getCurrentPosition() را فراخوانی می‌کند، درخواست مجوزها به طور خودکار در اولین فراخوانی ظاهر می‌شود. مثال دیگر navigator.mediaDevices.getUserMedia() است.

سایر APIها، مانند Notification API یا Device Orientation and Motion API ، معمولاً یک روش صریح برای درخواست مجوز از طریق یک متد استاتیک مانند Notification.requestPermission() یا DeviceMotionEvent.requestPermission() دارند.

چالش‌های مربوط به روش‌های دستوری برای درخواست اجازه

هرزنامه مجوز

در گذشته، وب‌سایت‌ها می‌توانستند متدهایی مانند navigator.mediaDevices.getUserMedia() یا Notification.requestPermission() را فراخوانی کنند، اما navigator.geolocation.getCurrentPosition() نیز بلافاصله پس از بارگذاری وب‌سایت فراخوانی می‌کردند. قبل از اینکه کاربر با وب‌سایت تعامل داشته باشد، یک درخواست مجوز ظاهر می‌شد. این گاهی اوقات به عنوان هرزنامه مجوز توصیف می‌شود و بر هر دو رویکرد تأثیر می‌گذارد، به طور ضمنی در اولین استفاده درخواست می‌کند و همچنین به طور صریح از قبل درخواست می‌کند.

راهکارهای کاهش آسیب‌پذیری مرورگر و الزامات مربوط به حرکات کاربر

هرزنامه‌های مجوز منجر به این شد که فروشندگان مرورگر قبل از نمایش درخواست مجوز، از کاربر بخواهند که حرکتی مانند کلیک روی دکمه یا رویداد پایین آوردن صفحه کلید را انجام دهد. مشکل این رویکرد این است که برای مرورگر بسیار دشوار، اگر نگوییم غیرممکن، است که بفهمد آیا یک حرکت مشخص کاربر باید منجر به نمایش درخواست مجوز شود یا خیر. شاید کاربر فقط به دلیل طولانی شدن بارگذاری صفحه، از روی ناامیدی روی صفحه کلیک کرده باشد، یا شاید واقعاً روی دکمه « مرا پیدا کن» کلیک کرده باشد. برخی از وب‌سایت‌ها نیز در فریب کاربران برای کلیک روی محتوا برای فعال کردن درخواست، بسیار ماهر شده‌اند.

یکی دیگر از راهکارهای کاهش این مشکل، افزودن راهکارهایی برای کاهش سوءاستفاده‌های فوری است، مانند مسدود کردن کامل ویژگی‌ها در ابتدا، یا نمایش درخواست مجوز به روشی غیرمودال و کمتر مزاحم.

زمینه‌سازی مجوز

چالش دیگر، به خصوص در صفحه نمایش‌های بزرگ، نحوه نمایش معمول درخواست مجوز است: بالای خط مرگ ، یعنی خارج از ناحیه‌ای از پنجره مرورگر که برنامه می‌تواند از آن استفاده کند. بی‌سابقه نیست که کاربران وقتی فقط روی دکمه‌ای در پایین پنجره کلیک می‌کنند، درخواست بالای پنجره مرورگر خود را از دست بدهند. این مشکل اغلب زمانی تشدید می‌شود که اقدامات کاهش هرزنامه مرورگر انجام شده باشد.

لغو آسان نیست

در نهایت، برای کاربران بسیار آسان است که خود را به بن‌بست برسانند. به عنوان مثال، هنگامی که کاربر دسترسی به یک ویژگی را مسدود می‌کند، لازم است که از منوی کشویی اطلاعات سایت آگاه باشد که در آن می‌تواند مجوزها را بازنشانی کند یا مجوزهای مسدود شده را دوباره فعال کند. هر دو گزینه در بدترین حالت نیاز به بارگذاری مجدد کامل صفحه تا زمان اعمال تنظیمات به‌روزرسانی شده دارند. سایت‌ها هیچ توانایی ارائه میانبر آسان برای کاربران برای تغییر وضعیت مجوز موجود ندارند و باید با زحمت زیاد به کاربران توضیح دهند که چگونه تنظیمات خود را تغییر دهند، همانطور که در پایین تصویر گوگل مپ زیر نشان داده شده است.

اگر مجوز برای تجربه کاربری کلیدی باشد، مثلاً دسترسی به میکروفون برای یک برنامه کنفرانس ویدیویی، برنامه‌هایی مانند Google Meet دیالوگ‌های مزاحمی را نشان می‌دهند که به کاربر دستور می‌دهند چگونه مجوز را لغو کند.

یک عنصر اعلانی <permission>

برای پرداختن به چالش‌های شرح داده شده در این پست، تیم مجوزهای کروم یک نسخه آزمایشی برای یک عنصر HTML جدید <permission> راه‌اندازی کرده‌اند. این عنصر به توسعه‌دهندگان اجازه می‌دهد تا فعلاً برای استفاده از زیرمجموعه‌ای از ویژگی‌های قدرتمند موجود در وب‌سایت‌ها، درخواست مجوز کنند. در ساده‌ترین شکل، می‌توانید از آن مانند مثال زیر استفاده کنید:

<permission type="camera" />

هنوز هم به طور جدی مورد بحث است که آیا <permission> باید یک عنصر void باشد یا خیر. یک عنصر void یک عنصر خودبسته شونده در HTML است که نمی‌تواند هیچ گره فرزندی داشته باشد، که در HTML به این معنی است که ممکن است تگ پایانی نداشته باشد.

ویژگی type

ویژگی type شامل فهرستی از مجوزهایی است که شما درخواست می‌کنید و با فاصله از هم جدا شده‌اند. در زمان نگارش این متن، مقادیر مجاز عبارتند از 'camera' ، 'microphone' و camera microphone (که با فاصله از هم جدا شده‌اند). این عنصر به طور پیش‌فرض شبیه به دکمه‌هایی با استایل‌بندی ساده‌ی عامل کاربر رندر می‌شود.

ویژگی type-ext

برای برخی از مجوزها که پارامترهای اضافی را مجاز می‌دانند، ویژگی type-ext جفت‌های کلید-مقدار جدا شده با فاصله را می‌پذیرد، مانند، برای مثال، precise:true برای مجوز موقعیت جغرافیایی.

ویژگی lang

متن دکمه توسط مرورگر ارائه می‌شود و قرار است ثابت باشد، بنابراین نمی‌توان آن را مستقیماً سفارشی کرد. مرورگر زبان متن را بر اساس زبان ارثی سند یا زنجیره عنصر والد یا یک ویژگی اختیاری lang تغییر می‌دهد. این بدان معناست که توسعه‌دهندگان نیازی به بومی‌سازی عنصر <permission> ندارند. اگر عنصر <permission> از مرحله آزمایشی اولیه فراتر رود، ممکن است چندین رشته یا آیکون برای هر نوع مجوز پشتیبانی شود تا انعطاف‌پذیری افزایش یابد. اگر به استفاده از عنصر <permission> علاقه‌مند هستید و به یک رشته یا آیکون خاص نیاز دارید، با ما تماس بگیرید !

رفتار

وقتی کاربر با عنصر <permission> تعامل می‌کند، می‌تواند مراحل مختلفی را طی کند:

• اگر قبلاً به یک ویژگی اجازه نداده‌اند، می‌توانند آن را در هر بازدید یا برای بازدید فعلی مجاز کنند.

  

• اگر قبلاً این ویژگی را مجاز دانسته بودند، می‌توانند به مجاز بودن آن ادامه دهند یا آن را متوقف کنند.

  

• اگر قبلاً یک ویژگی را مجاز نکرده‌اند، می‌توانند همچنان به آن اجازه ندهند، یا این بار آن را مجاز کنند.

  

متن عنصر <permission> به طور خودکار بر اساس وضعیت به‌روزرسانی می‌شود. برای مثال، اگر مجوز استفاده از یک ویژگی اعطا شده باشد، متن به این صورت تغییر می‌کند که می‌گوید آن ویژگی مجاز است. اگر ابتدا نیاز به اعطای مجوز باشد، متن به این صورت تغییر می‌کند که کاربر را به استفاده از آن ویژگی دعوت کند. برای مشاهده دو حالت، تصویر قبلی را با تصویر زیر مقایسه کنید.

طراحی سی اس اس

برای اطمینان از اینکه کاربران می‌توانند به راحتی دکمه را به عنوان سطحی برای دسترسی به قابلیت‌های قدرتمند تشخیص دهند، سبک‌بندی عنصر <permission> محدود شده است. اگر محدودیت‌های سبک‌بندی برای مورد استفاده شما کارساز نیست، ما دوست داریم در مورد چگونگی و چرایی آن بشنویم ! در حالی که نمی‌توان همه نیازهای سبک‌بندی را برآورده کرد، امیدواریم پس از آزمایش اصلی، راه‌های امنی برای امکان سبک‌بندی بیشتر عنصر <permission> کشف کنیم. جدول زیر جزئیات برخی از ویژگی‌هایی را که محدودیت‌ها یا قوانین خاصی بر آنها اعمال می‌شود، شرح می‌دهد. در صورت نقض هر یک از قوانین، عنصر <permission> غیرفعال می‌شود و نمی‌توان با آن تعامل داشت. هرگونه تلاش برای تعامل با آن منجر به استثنائاتی می‌شود که می‌توان با جاوا اسکریپت آنها را دریافت کرد. پیام خطا حاوی جزئیات بیشتری در مورد تخلف شناسایی شده خواهد بود.

ویژگی‌های CSS زیر می‌توانند به صورت عادی استفاده شوند:

• font-kerning
• font-optical-sizing
• font-stretch
• font-synthesis-weight
• font-synthesis-style
• font-synthesis-small-caps
• font-feature-settings
• forced-color-adjust
• text-rendering
• align-self
• anchor-name aspect-ratio
• border (و همه ویژگی‌های border-* )
• clear
• color-scheme
• contain
• contain-intrinsic-width
• contain-intrinsic-height
• container-name
• container-type
• counter-*
• flex-*
• float
• height
• isolation
• justify-self
• left
• order
• orphans
• outline-* (به استثنای outline-offset که قبلاً ذکر شد)
• overflow-anchor
• overscroll-behavior-*
• page
• position
• position-anchor
• content-visibility
• right
• scroll-margin-*
• scroll-padding-*
• text-spacing-trim
• top
• visibility
• x
• y
• ruby-position
• user-select
• width
• will-change
• z-index

علاوه بر این، می‌توان از تمام ویژگی‌های معادل منطقی استفاده کرد (برای مثال، inline-size معادل width است)، و از همان قوانین معادل آنها پیروی کرد.

شبه کلاس‌ها

دو شبه کلاس ویژه وجود دارد که امکان استایل‌دهی به عنصر <permission> را بر اساس وضعیت (state) فراهم می‌کنند:

• :granted : شبه کلاس :granted امکان استایل‌بندی خاص را در صورت اعطای مجوز فراهم می‌کند.
• :invalid : شبه کلاس :invalid امکان استایل‌بندی خاص را در زمانی که عنصر در وضعیت نامعتبر است، فراهم می‌کند، برای مثال، زمانی که در یک iframe با مبدا متقاطع ارائه می‌شود.

permission {
  background-color: green;
}

permission:granted {
  background-color: light-green;
}

/* Not supported during the origin trial. */
permission:invalid {
  background-color: gray;
}

رویدادهای جاوا اسکریپت

عنصر <permission> برای استفاده همراه با API مربوط به مجوزها در نظر گرفته شده است. تعدادی رویداد وجود دارد که می‌توان به آنها گوش داد:

• onpromptdismiss : این رویداد زمانی اجرا می‌شود که درخواست مجوز ایجاد شده توسط عنصر توسط کاربر رد شده باشد (برای مثال با کلیک روی دکمه بستن یا کلیک کردن در خارج از اعلان).

• onpromptaction : این رویداد زمانی اجرا می‌شود که درخواست مجوز ایجاد شده توسط عنصر، با انجام برخی اقدامات توسط کاربر در مورد خود درخواست، برطرف شده باشد. این لزوماً به این معنی نیست که وضعیت مجوز تغییر کرده است، ممکن است کاربر اقدامی انجام داده باشد که وضعیت موجود را حفظ کند (مانند ادامه دادن به اجازه دادن به یک مجوز).

• onvalidationstatuschange : این رویداد زمانی اجرا می‌شود که عنصر از حالت "valid" به حالت "invalid" تغییر کند. عنصر زمانی "valid" در نظر گرفته می‌شود که مرورگر در صورت کلیک کاربر، به یکپارچگی سیگنال اعتماد کند و در غیر این صورت "invalid" در نظر گرفته می‌شود، به عنوان مثال، زمانی که عنصر تا حدی توسط محتوای HTML دیگری مسدود شده باشد.

شما می‌توانید شنونده‌های رویداد را برای این رویدادها مستقیماً به صورت درون‌خطی در کد HTML ثبت کنید ( <permission type="…" onpromptdismiss="alert('The prompt was dismissed');" /> )، یا از addEventListener() روی عنصر <permission> استفاده کنید، همانطور که در مثال زیر نشان داده شده است.

<permission type="camera" />
<script>
  const permission = document.querySelector('permission');
  permission.addEventListener('promptdismiss', showCameraWarning);

  function showCameraWarning() {
    // Show warning that the app isn't fully usable
    // unless the camera permission is granted.
  }

  const permissionStatus = await navigator.permissions.query({name: "camera"});
  
  permissionStatus.addEventListener('change', () => {
    // Run the check when the status changes.
    if (permissionStatus.state === "granted") {
      useCamera();
    }
  });

  // Run the initial check.
  if (permissionStatus.state === "granted") {
    useCamera();
  }
</script>

تشخیص ویژگی

اگر مرورگری از یک عنصر HTML پشتیبانی نکند، آن را نشان نمی‌دهد. این بدان معناست که اگر عنصر <permission> را در کد HTML خود داشته باشید، اگر مرورگر آن را نداند، هیچ اتفاقی نمی‌افتد. شما هنوز هم می‌توانید با استفاده از جاوا اسکریپت، مثلاً برای ایجاد یک اعلان مجوز که از طریق کلیک روی یک <button> معمولی فعال می‌شود، پشتیبانی را تشخیص دهید.

if ('HTMLPermissionElement' in window) {
  // The `<permission>` element is supported.
}

محاکمه مبدا

برای امتحان کردن عنصر <permission> در سایت خود با کاربران واقعی، در نسخه آزمایشی origin ثبت نام کنید . برای دستورالعمل‌های نحوه آماده‌سازی سایت خود برای استفاده از نسخه‌های آزمایشی origin، بخش «شروع با نسخه‌های آزمایشی origin» را مطالعه کنید. نسخه آزمایشی origin از کروم ۱۲۶ تا ۱۳۱ (۱۹ فوریه ۲۰۲۵) اجرا خواهد شد.

نسخه آزمایشی

نسخه آزمایشی را بررسی کنید و کد منبع را در GitHub بررسی کنید. در اینجا تصویری از تجربه در یک مرورگر پشتیبانی شده آورده شده است.

بازخورد

ما دوست داریم از شما بشنویم که <permission> چگونه برای مورد استفاده شما کار می‌کند. در صورت تمایل می‌توانید به یکی از مسائل موجود در مخزن پاسخ دهید یا یک مورد جدید ثبت کنید. سیگنال‌های عمومی در مخزن برای عنصر <permission> به ما و سایر مرورگرها اطلاع می‌دهند که شما به آن علاقه‌مند هستید.

سوالات متداول

• این چه تفاوتی با یک <button> معمولی که با API مجوزها جفت شده است، دارد؟ کلیک روی <button> یک حرکت کاربر است، اما مرورگرها هیچ راهی برای تأیید ارتباط آن با درخواست مجوز ندارند. اگر کاربر روی <permission> کلیک کرده باشد، مرورگر می‌تواند مطمئن شود که کلیک مربوط به درخواست مجوز است. این به مرورگر اجازه می‌دهد تا جریان‌هایی را تسهیل کند که در غیر این صورت بسیار پرخطرتر خواهند بود. به عنوان مثال، به کاربر اجازه می‌دهد تا به راحتی مسدود شدن یک مجوز را لغو کند.
• اگر مرورگرهای دیگر از عنصر <permission> پشتیبانی نکنند چه می‌شود؟ عنصر <permission> می‌تواند به عنوان یک پیشرفت تدریجی مورد استفاده قرار گیرد. در مرورگرهایی که از آن پشتیبانی نمی‌کنند، می‌توان از یک جریان مجوز کلاسیک استفاده کرد. به عنوان مثال، بر اساس کلیک یک <button> معمولی. تیم مجوزها همچنین روی یک polyfill کار می‌کنند. مخزن گیت‌هاب را ستاره‌دار کنید تا وقتی آماده شد، مطلع شوید.
• آیا این موضوع با سایر فروشندگان مرورگر مورد بحث قرار گرفت؟ عنصر <permission> در W3C TPAC در سال 2023 در یک جلسه‌ی فشرده به طور فعال مورد بحث قرار گرفت. می‌توانید یادداشت‌های جلسه‌ی عمومی را بخوانید. تیم کروم همچنین از هر دو فروشنده درخواست موضع‌گیری رسمی در مورد استانداردها کرده است، به بخش پیوندهای مرتبط مراجعه کنید. عنصر <permission> موضوع بحث‌های مداوم با سایر مرورگرها است و ما امیدواریم که آن را استاندارد کنیم.
• آیا این واقعاً باید یک عنصر void باشد؟ هنوز هم به طور جدی مورد بحث است که آیا <permission> باید یک عنصر void باشد یا خیر. اگر بازخوردی دارید، در مورد این موضوع نظر دهید.

لینک‌های مرتبط

• توضیح دهنده
• جایگاه استانداردهای WebKit
• جایگاه استانداردهای موزیلا

تقدیرنامه‌ها

این سند توسط بالاش انگدی ، توماس نگوین ، پنلوپه مک‌لاکلان ، ماریان هارباخ ، دیوید وارن و راشل اندرو بررسی شده است.