網路權限最佳做法

權限提示是網路的主要機制,可保護可能對使用者隱私和安全造成危險的功能。具備權限提示時,瀏覽器旨在確保使用者刻意允許要求的網站存取相關功能。權限提示適用於許多 API,包括媒體擷取 (攝影機和麥克風)、地理位置、儲存空間存取權、MIDI 和通知 (詳情請參閱 MDN 的權限 API 說明文件)。

本指南說明根據 Chrome 使用統計資料和使用者研究向使用者顯示權限提示的最佳做法。當您採用這些最佳做法時,應會減少不必要的提示,導致開發人員做出的「封鎖」決策變少。本文的結尾將介紹一些關於使用權限限制 API 的程式碼模式,以及協助使用者從遭封鎖狀態復原的最佳做法。

提示最佳做法

建議您在使用者互動後向使用者要求權限,讓他們能夠瞭解您詢問的原因,以及如果能從中獲得什麼好處。如果可能,建議您允許使用者透過其他方式來完成相同的功能。一般來說,原則上選擇要求取得權限的頻率,會減少使用者進入難以復原的封鎖狀態,降低使用者取得權限的機率。以下最佳做法針對上述個別建議提供詳細說明。

載入網頁時或在使用者互動時一律不詢問

在網頁載入時要求使用者授權,就等於要求客戶在前往實體商店時提供機密資訊。看到權限提示 (可能包括訂閱電子報和 Cookie 同意聲明的其他提示) 對結果相當不耐煩。使用者無法瞭解提出請求的原因和好處

即使無法存取特定功能,網頁應用程式卻無法運作,您應讓使用者有機會瞭解這需要的原因。舉例來說,您可以在權限提示中自行提示權限提示,說明需求並為使用者提供選擇 (例如可行時,提供可完成相同功能的替代方式)。要是您不是想要求權限,比載入網頁更適合,本指南稍後會舉幾個例子說明。

同樣未獲得先前的使用者互動 (又稱為暫時性使用者啟用) 也未達到要求權限的情況。從 Chrome 遙測資料顯示,電腦版 Chrome 會顯示 77% 的權限提示,但使用者意圖信號非常基本,因此這類提示中只有 12% 會獲得允許。使用者與使用者互動後,允許將費率提高至 30%。因此,只有在使用者與某些形式的頁面互動後,才提出權限要求。

只在使用者能理解您提問的原因時再詢問

權限決策通常是隱私權方面的決策。根據情境完整性架構,我們知道隱私權決策與情境極為相關。瞭解為何需要存取權可以視為此步驟的重要一環。因此,您要求的功能應只須為使用者提供有價值的功能,而在同意你的情況下,使用者也會同意你們確實會獲得價值。此外,在使用者清楚知道這項功能很實用的情況下,應立即要求權限。這麼做是為了讓使用者盡可能輕鬆瞭解使用情境。

我們的使用者研究顯示,如果使用者瞭解網站要求存取權的原因並能帶來好處,就更有可能允許存取。我們也發現,使用者希望能先探索陌生網站,進一步瞭解他們授予存取權後可獲得的價值。在此期間,使用者通常會關閉或忽略權限提示。授予單次權限後,他們或許就能先造訪單次造訪。您的應用程式需要支援這些行為。

提供替代方法,盡可能實現相同功能

某些功能的結果對使用者而言可能沒有幫助。舉例來說,沒有 GPS 感應器的電腦裝置地理位置可能會傳回錯誤的位置資訊,因為使用者已連線至 VPN。其他使用者可能不想提供剪貼簿存取權,因為他們偏好保有控制權,並手動透過按鍵組合觸發這些事件。在這種情況下,建議您提供替代做法來完成相同結果。舉例來說,如果要求地理位置權限,請提供文字欄位,讓使用者可自行輸入郵遞區號或地址。使用剪貼簿時,請確保使用者也可以透過按鍵組合或內容選單,選取和複製要複製的元素。透過通知,您可以讓使用者能收到電子郵件 而不是推播通知

其中一種實用的模式,就是使用替代 UI 做為說明,瞭解為何存取權可能有幫助。使用者在觸發 Geolocation 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.
}

瀏覽器支援

  • 43
  • 79
  • 46
  • 16

來源

協助使用者從遭封鎖的狀態復原

為協助使用者排解存取問題,請偵測他們使用 Permissions API 封鎖存取權,並提供有關變更設定的指南。舉例來說,當使用者與權限受限制功能相關聯的 UI 元素互動時,請使用上一節所述的模式並開啟疑難排解對話方塊。變更權限狀態的確切步驟因瀏覽器而異,因此建議您根據使用者代理程式字串,以及產品中最常用的瀏覽器提供相符的說明。

在 Chrome 中,使用者可以按一下網址列左側的「調整」圖示前往「網站控制項」。他們可以在這個頁面切換權限。在某些情況下,使用者可能必須先重新載入頁面,才能使用這項功能。在這種情況下,視窗頂端會顯示訊息列,讓您點選個別按鈕時要重新載入。

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

使用網站控制項變更權限後,出現重新載入提示。

其他瀏覽器的權限也類似 UI,可用來控制權限 (例如瞭解運作方式在 Firefox 中的運作方式)。