網路權限最佳做法

Marian Harbach

Thomas Steiner

權限提示是網路上保護強大功能的主要機制，這些功能可能會危害使用者的隱私權和安全性。透過權限提示，瀏覽器可確保使用者有意讓要求的網站存取相關功能。權限提示適用於許多 API，包括媒體擷取 (攝影機和麥克風)、地理位置、儲存空間存取權、MIDI 和通知 (詳情請參閱 MDN 的權限 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() 就是允許通知，或者使用裝置方向事件 API 中較不常見的 DeviceOrientationEvent.requestPermission()。請注意，某些瀏覽器可能會自動授予特定 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 中的運作方式)。