網路權限最佳做法

Marian Harbach
Marian Harbach
X
Thomas Steiner

權限提示是網頁的主要機制，可保護使用者免於隱私權和安全性可能受到威脅的強大功能。瀏覽器會確認使用者是否要在特定網站上啟用某項功能。 您可以為多種 API 實作權限，包括媒體擷取 (相機和麥克風)、地理位置、儲存空間存取權、MIDI 和通知。

根據 Chrome 使用統計資料和使用者研究，在向使用者顯示權限提示時，請遵循下列做法。遵循這些做法後，使用者應該會較少遇到不必要的提示，進而減少封鎖決策。

本文最後會提供一些程式碼模式，說明如何使用權限控管 API，以及如何協助使用者從封鎖狀態復原。

提示最佳做法

在使用者與應用程式互動後要求權限，讓使用者瞭解您要求權限的原因，以及允許存取權後可獲得的好處。

請盡可能提供其他方式來完成相同工作。只要謹慎選擇適當的詢問時機，就能降低使用者進入難以復原的封鎖狀態的機率。

請勿在網頁載入時或使用者沒有互動的情況下要求權限

在網頁載入時要求權限，就等同於在顧客走進實體商店時，要求他們提供私密資訊。看到權限提示 (可能與其他電子報註冊和 Cookie 同意聲明提示一起顯示)，會造成不適感。使用者不會瞭解為何要提供這項資訊，以及提供後能獲得哪些好處。

即使網頁應用程式必須存取特定功能才能運作，也請讓使用者瞭解原因。舉例來說，在權限提示中，說明為何需要提示，並讓使用者選擇 (例如提供其他方式來完成相同功能)。如果您認為在載入網頁時要求權限是最佳時機，請參閱本指南稍後的幾個範例。

如果沒有使用者互動，要求權限也無效。這稱為暫時性使用者啟用。Chrome 遙測資料顯示，桌機上 77% 的權限提示都是在沒有使用者意圖信號的情況下顯示，因此只有 12% 的提示獲得允許。使用者互動後，允許率會提高至 30%。

使用者與網頁互動後，才要求權限。

只有在使用者能瞭解原因時才要求

權限決策通常是隱私權決策。根據情境完整性架構，我們知道隱私權決策高度取決於情境。瞭解存取權的必要性至關重要。您應只要求提供價值所需的功能，讓使用者可能同意他們會發現價值。此外，當使用者明顯瞭解功能有何幫助時，請要求權限。讓使用者更容易瞭解使用情境。

我們的使用者研究顯示，如果使用者瞭解網站要求存取權的原因，且認為授予存取權可帶來好處，就更有可能允許存取。我們也發現，使用者會先瀏覽不熟悉的網站，瞭解授予存取權可獲得的價值，因此他們通常會先關閉或忽略權限提示。有了單次權限，使用者可能會先允許單次存取。請在應用程式中支援這些行為。

提供替代方案

部分功能的結果可能對使用者沒有幫助。舉例來說，如果使用者連上 VPN，沒有 GPS 感應器的桌機裝置可能會回報錯誤的位置資訊。其他使用者可能不想提供剪貼簿存取權，因為他們偏好自行控管，並手動觸發這些事件。在這些情況下，請提供替代方式，以達成相同結果。

舉例來說，如果要求地理位置權限，請提供文字欄位，讓使用者輸入郵遞區號或地址。允許使用鍵盤快速鍵或右鍵選單選取元素並複製到剪貼簿。如果是通知，請提供電子郵件，而非推送通知。

實用的模式是使用替代 UI，同時說明存取權的好處。如果使用者看到可輸入位置資訊的選項，且旁邊有觸發地理位置 API 的按鈕，就會覺得自己能掌控一切，因為他們知道可以輸入地址。同樣地，如果使用者可以選擇透過推播或電子郵件接收通知，或是加入會議但不允許存取相機和麥克風，他們就會瞭解其中的取捨。

避免進入封鎖狀態

使用者永久拒絕存取受權限限制的功能後，瀏覽器會遵守這項決定。如果可以繼續提示存取權，惡意網站就會不斷向使用者發出提示。從功能遭封鎖的狀態復原需要費一番功夫。避免在使用者不太可能允許存取權的情況下要求權限。

常見做法是使用所謂的「前置提示」，向使用者說明即將發生的情況，以及應用程式需要您即將要求的這項功能的原因。只有在使用者對這類前置提示做出肯定回應時，才應觸發瀏覽器的權限提示。在某些情況下，使用者可能確實需要從該狀態復原。詳情請參閱「協助使用者從封鎖狀態中復原」一節。

注意第三方內容

請留意權限提示的非預期來源。網站上的第三方指令碼可能會觸發非預期的權限提示，進而影響使用者體驗，尤其是在提示不符合最佳做法時。如要控管使用者體驗，請詳閱您新增至程式碼的任何第三方程式庫和指令碼文件。

何時要求權限

以下列舉幾個適合要求權限的時機，並說明最佳做法：

  • 使用者點選表單欄位旁的「使用我的位置」後，手動輸入地址時。
  • 使用者訂閱影片頻道或貼文，並在說明更新內容可透過電子郵件或通知傳送的對話方塊中，點選確認按鈕。
  • 使用者抵達準備加入視訊通話的頁面，並在預先提示中肯定地回答想要顯示影像和聲音。詳情請參閱 Google Meet 案例研究。

程式碼模式

視 API 而定，使用 API 的權限會透過不同方式授予。部分舊版 API 使用的模型會在您首次嘗試使用 API 時，自動要求瀏覽器提供權限。舉例來說，呼叫 navigator.geolocation.getCurrentPosition() 時，系統會將 Geolocation API 視為「Geolocation」SKU 來計費。

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. */
}

檢查權限狀態

Browser Support

  • Chrome: 43.
  • Edge: 79.
  • Firefox: 46.
  • Safari: 16.

Source

如要檢查是否可以使用特定 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 中，使用者可以依序點選網址列中的「查看網站資訊」 >「網站設定」，變更權限。在某些情況下，使用者可能必須重新載入頁面，才能使用某項功能。這時視窗頂端會顯示訊息列，提示重新載入網站。

Chrome 瀏覽器中的網站控制項。

使用網站控制項變更權限後，系統會顯示重新載入提示。

其他瀏覽器也有類似的權限控制使用者介面，例如 Firefox。