權限提示是網路上保護強大功能的主要機制,可避免這些功能對使用者的隱私權和安全性造成潛在危險。透過權限提示,瀏覽器可確保使用者有意讓要求的網站存取相關功能。權限提示會用於多個 API,包括媒體擷取 (相機和麥克風)、地理位置、儲存空間存取權、MIDI 和通知 (詳情請參閱 MDN 的 Permissions API 說明文件)。
本指南概述了根據 Chrome 使用統計資料和使用者研究,向使用者顯示權限提示的最佳做法。遵循這些最佳做法後,使用者應該會遇到較少不必要的提示,導致開發人員收到的「封鎖」決定也會減少。本文結尾提供一些程式碼模式,說明如何使用權限控管 API,以及協助使用者從封鎖狀態復原的最佳做法。
提示最佳做法
您應在使用者互動後要求權限,讓使用者瞭解您要求權限的原因,以及授予權限的好處。盡可能讓使用者使用其他方式來完成相同功能。一般來說,如果您謹慎選擇要求權限的時機,就能減少要求權限的頻率,進而降低使用者進入難以復原的封鎖狀態的機率。下列最佳做法將進一步說明這些建議。
請勿在網頁載入時或在使用者未互動時要求使用者提供權限
在載入網頁時要求使用者授權,就好比在實體商店中要求顧客提供機密資訊。看到權限提示 (可能與其他幾個提示訊息一併顯示,例如訂閱電子報和 Cookie 同意聲明) 會讓使用者感到不悅。使用者無法瞭解為何要回答問題,以及這項操作帶來的好處。
即使您的網頁應用程式必須存取特定功能才能運作,您仍應讓使用者瞭解為何需要這項功能。舉例來說,您可以先在權限提示前加上自己的提示,說明需要權限的原因,並讓使用者自行選擇 (例如,在可行情況下,提供其他方式來達成相同功能)。如果您無法想到比網頁載入時更適合要求權限的時機,請參閱本指南稍後的幾個範例。
要求權限時,如果沒有先與使用者互動 (也稱為「暫時使用者啟用」),也是不恰當的做法。Chrome 追蹤記錄顯示,在電腦版 Chrome 上顯示的 77% 權限提示,都沒有提供使用者意圖的簡單信號,因此只有 12% 的提示會獲得許可。在使用者互動後,允許率會提高至 30%。因此,請在使用者以某種形式與網頁互動後,才要求授權。
只有在使用者能理解你為何提出問題時,才詢問
權限決定通常是隱私權決定。根據情境完整性架構,我們知道隱私權決策高度依賴情境。瞭解為何需要存取權,可說是這項作業的關鍵。因此,您應只要求提供價值給使用者的功能 (以及使用者可能會同意您提供價值的功能)。此外,您應在使用者清楚瞭解功能的用途時,才要求權限。目的是讓使用者盡可能輕鬆瞭解使用情境。
我們的使用者研究顯示,如果使用者瞭解網站要求存取權的原因,並認為這項權限有益於自己,就更有可能授予存取權。我們也發現,使用者希望先探索不熟悉的網站,以便進一步瞭解允許存取權可帶來的價值。他們通常會在這個時候關閉或忽略權限提示。使用單次授權時,他們可能會先允許單次造訪。您的應用程式必須支援這些行為。
盡可能提供其他方式來達成相同功能
部分功能的結果可能對使用者沒有幫助。舉例來說,如果使用者連線至 VPN,則沒有 GPS 感應器的電腦裝置可能會傳回錯誤的位置資訊。其他使用者可能不想提供剪貼簿存取權,因為他們希望保有控制權,並手動使用組合鍵觸發這些事件。在這種情況下,請務必提供其他方式來達成相同的結果。舉例來說,如果您要求地理位置權限,請提供文字欄位,讓使用者自行輸入郵遞區號或地址。使用剪貼簿時,請確認可複製的元素也能透過鍵盤快速鍵或內容選單選取及複製。在通知中,建議使用者選擇接收電子郵件,而非推播通知。
有用的模式是使用替代 UI,並說明存取權的好處。使用者看到觸發地理位置 API 的按鈕旁邊有輸入位置的選項時,會覺得自己可以控制接下來發生的情況,因為他們知道自己也可以直接輸入地址。同樣地,如果使用者可以選擇透過推播或電子郵件接收通知,或是不允許攝影機和麥克風存取權限,加入會議,他們就更容易瞭解自己做出的取捨。
請勿讓自己陷入封鎖狀態,因為很難復原
一旦使用者決定永久不允許存取權限受控功能,瀏覽器就會遵循該決定。如果可以繼續提示存取權,惡意網站就會持續向使用者發送提示。因此,如果要從某項功能的封鎖狀態復原,使用者必須刻意採取一些動作。因此,請避免在許多使用者可能不會允許存取權的情況下,要求使用者授權。
常見的做法是使用所謂的預先提示,向使用者說明即將發生的情況,以及應用程式為何需要您要要求的功能。只有在使用者對這類預先提示做出肯定回應時,您才應觸發瀏覽器的權限提示。在某些情況下,使用者可能需要從該狀態復原。如需進一步瞭解這項功能,請參閱「協助使用者從封鎖狀態復原」一節。
留意第三方內容
請注意,有一個不明來源的權限提示。如果您在網站上加入第三方指令碼,這些指令碼可能會觸發您不想顯示的權限提示。這可能會影響使用者對網站的體驗,尤其是當這類提示未遵循已概略說明的最佳做法時。為確保能持續掌控使用者體驗,您應仔細閱讀任何第三方程式庫和指令碼的說明文件,並將這些項目加入自己的程式碼。
要求權限的時機
以下列舉幾個適合要求權限的時機,並遵循上述最佳做法:
- 使用者按下表單欄位旁邊的「使用我的所在位置」按鈕後,即可手動輸入地址。
- 使用者訂閱影片頻道或貼文後,在對話方塊中按下肯定按鈕,說明更新內容可透過電子郵件或通知傳送至手機或電腦。
- 使用者進入準備加入視訊通話的頁面後,會在預先提示中回答是否要讓自己在通話中可見和可聽 (請參閱這份 Google Meet 案例研究)。
要求權限的程式碼模式
取得使用 API 的權限的方式因 API 而異。部分 (通常是較舊的) API 會採用一種模式,在您第一次嘗試使用 API 時,瀏覽器會自動要求權限。例如,呼叫 navigator.geolocation.getCurrentPosition()
時的 Geolocation API。
try {
navigator.geolocation.getCurrentPosition((pos) => console.log(pos));
} catch (error) {
console.error(error);
}
其他 API 則採用一種模式,您必須先使用靜態方法明確要求權限。舉例來說,Notification.requestPermission()
可用於允許通知,而較不常見的 DeviceOrientationEvent.requestPermission()
則是裝置方向事件 API 的一部分。請注意,某些瀏覽器可能會自動授予特定 API 權限。舉例來說,Chrome 一律會允許存取裝置的方向,而 Safari 則會顯示提示。
const result = await DeviceOrientationEvent.requestPermission();
console.log(`The user's decision when prompted to use the Device Orientation
Events API was: ${result}.`);
if (result === 'granted') {
/* Use the API. */
}
如何檢查權限狀態
如要確認您是否可以使用特定 API,請使用 Permissions API 中的 navigator.permissions.query()
方法。
const result = await navigator.permissions.query({ name: 'geolocation' });
console.log(`The result of querying for the Geolocation API is:
${result.state}.`);
if (result.state === 'granted') {
// Use the API.
}
協助使用者從封鎖狀態復原
如要協助使用者排解存取權問題,請偵測他們是否使用 Permissions API 封鎖存取權,並提供如何變更設定的指南。舉例來說,當使用者與與權限控管功能相關聯的 UI 元素互動時,請使用前一個部分所述的模式,並開啟疑難排解對話方塊。變更權限狀態的確切步驟會因瀏覽器而異,因此建議您根據使用者代理程式字串,以及產品中使用最廣泛的瀏覽器,提供相符的說明。
在 Chrome 中,使用者應按一下網址列左側的「調音器」圖示,前往網站控制項。使用者可以在此開啟或關閉相應的權限。在某些情況下,使用者可能必須重新載入頁面,才能使用這項功能。在這種情況下,視窗頂端會顯示訊息列,點選相應按鈕即可重新載入。
其他瀏覽器也有類似的權限控制 UI (例如,瞭解 Firefox 中的運作方式)。