新 HTML <權限> 元素的來源試用

Thomas Steiner

有多種「命令式」方法用於要求取得使用權限 強大的功能，例如網頁應用程式的位置資訊存取權。這些方法 因此 Chrome 權限團隊正在嘗試 透過新的宣告式方法：專屬的 HTML <permission> 元素。這個 元素是來自 Chrome 126 的來源試用 並且標準化

要求權限的命令方法

網頁應用程式需要存取 強大的功能 不需要取得權限舉例來說 Google 地圖規定使用者必須使用 Geolocation API 瀏覽器會提示使用者，通常可以選擇儲存該決定。 這是 定義明確的概念 。

僅在首次使用時暗示性詢問，或明確提出這類要求

Geolocation API 是功能強大的 API，會優先以隱含要求的形式發出 採用的機制舉例來說，如果應用程式呼叫 navigator.geolocation.getCurrentPosition()敬上 方法後，權限提示會在第一次呼叫時自動彈出。 另一個例子是 navigator.mediaDevices.getUserMedia()。

其他 API (例如 通知 API 或 這個 Device Orientation and Motion API， 通常具備明確的方式，可透過如 Notification.requestPermission() 或 DeviceMotionEvent.requestPermission()。

要求授予權限的迫切方法挑戰

權限垃圾內容

過去，網站可以呼叫類似下列方法： navigator.mediaDevices.getUserMedia()或Notification.requestPermission()， 但使用者在網站上執行時，也會立即navigator.geolocation.getCurrentPosition() 已載入。在使用者進行互動前，會先彈出權限提示 網站。這有時會被稱為「權限垃圾內容」，並且會影響 要求首次使用，以及明確地要求 。

瀏覽器緩解措施和使用者手勢要求

權限垃圾內容導致瀏覽器廠商需要使用者手勢 (例如按鈕) 再點選或按下 keydown 事件，系統才會顯示權限提示。以下問題的問題 這會讓瀏覽器很難 假定特定使用者手勢是否會產生權限提示 不一定會顯示也許使用者只是單純地點擊網頁而已 因為網頁載入時間過長，或是網頁確實 按一下「找到我」按鈕。有些網站也很擅長 誘騙使用者點擊內容以觸發提示。

另一個緩解措施是提示濫用緩解措施，如完全封鎖 在非模組式介面中開始練習，或是在非強制回應中顯示權限提示 可能會幹擾使用者閱讀

權限情境化

另一個挑戰 (特別是大螢幕) 是權限提示的方式 通常會顯示在 死亡路段 是應用程式可繪製在瀏覽器視窗的區域之外。是 如果不是，使用者會錯過瀏覽器頂端的提示 視窗底部的按鈕。這個問題 在使用瀏覽器垃圾郵件緩解措施的情況下，往往會比較高。

無法復原

最後，使用者太容易融入死路。適用對象 例如，使用者封鎖某項功能的存取權後，必須 查看網站資訊下拉式選單，可在這裡重設 或將封鎖權限切換為開啟。兩個選項 (最差者) 則您必須重新載入網頁，直到更新後的設定生效為止。 協作平台未提供簡單的捷徑，無法讓使用者輕鬆變更 並必須詳盡地向使用者說明如何 變更他們的設定，如以下 Google 地圖底部所示 螢幕截圖。

如果權限是影響使用體驗的關鍵，例如授予裝置麥克風存取權 視訊會議應用程式，Google Meet 等應用程式會顯示幹擾性對話方塊 說明如何解除封鎖權限。

宣告式 <permission> 元素

為解決本文所述的挑戰，Chrome 權限團隊 已針對新的 HTML 元素 <permission> 開始來源試用。這個 元素可讓開發人員以宣告方式要求使用權限。 網站強大的功能組合。如要採用最簡單的方式 請參考下列範例：

<permission type="camera" />

目前仍在積極辯論 <permission> 是否應為無效 元素。void 元素是 HTML 中的自行關閉元素， 任何子節點，在 HTML 中，可能表示不含結束標記。

type 屬性

type敬上 屬性包含您要要求的權限清單 (以空格分隔)。在 撰寫本文時，可以使用的值為 'camera'、'microphone' 和 camera microphone (以空格分隔)。根據預設，這個元素會算繪 與採用 Barebones 使用者代理程式樣式的按鈕類似

type-ext 屬性

對於允許使用其他參數的權限， type-ext敬上 屬性接受以空格分隔的鍵/值組合，例如： precise:true。

lang 屬性

按鈕文字是由瀏覽器提供，要保持一致，因此 無法直接自訂瀏覽器變更文字語言 根據文件或父項元素鏈結沿用的語言，或 選用 lang敬上 屬性。這表示開發人員不需將 <permission> 本地化 元素本身如果 <permission> 元素繼續進行到來源之外 試用階段，每種權限類型可能會支援多個字串或圖示 以便提高彈性如想使用 <permission> 元素，因此需要特定字串或圖示，請與我們聯絡！

行為

使用者與 <permission> 元素互動時，他們可以循環顯示 各個階段

• 如果他們先前不允許使用某項功能，則可在每次造訪時允許該功能，或 允許在目前造訪期間使用。

  

• 如果他們先前已啟用這項功能，則可繼續或停止允許這項功能。 允許存取。

  

• 如果他們先前曾經禁用某項功能，則無法繼續允許該功能；或 這次會允許這項操作

  

<permission> 元素的文字會根據 狀態。舉例來說，如果您授予功能使用權限， 或「有變更」如果必須先授予權限 系統就會變更文字，邀請使用者使用這項功能。比較 擷取自以下螢幕截圖的螢幕截圖，即可查看這兩個狀態。

CSS 設計

為了確保使用者能輕鬆將按鈕視為介面， 功能，<permission> 元素的樣式受到限制。如果樣式設定 限制不適用於您的用途。我們歡迎您 方法和原因！雖然不是所有樣式需求都能配合，但我們希望能夠 探索安全的方法，瞭解如何讓 <permission> 元素有更多樣式 來源試用。下表詳細列出部分設有限制的房源 或是套用的特殊規則如果違反任何規則， <permission> 元素將停用，而且無法與其互動。不限 嘗試與 API 互動時，可能會觸發 JavaScript。錯誤訊息會針對系統偵測到的 。

以下的 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> 的樣式 會根據狀態來處理元素：

• :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;
}

JavaScript 事件

<permission> 元素應會與 Permissions API。 以下列舉幾個可監聽的事件：

• onpromptdismiss：當權限提示觸發時，會觸發此事件。 元素已由使用者關閉 (例如，按一下關閉 或點選提示以外的項目)。

• onpromptaction：當權限提示觸發時，會觸發此事件。 元素已由使用者根據提示採取特定動作 機器學習是向機器提供資料和答案 讓機器自行探索規則的科學但這不一定代表權限狀態已變更， 使用者可能採取的行動 (例如 繼續授權)。

• onvalidationstatuschange：當元素從 正在將「"valid"」變更為「"invalid"」。當"valid" 當使用者按下訊號時，瀏覽器會信任信號的完整性， 否則使用 "invalid"，例如元素部分遮住時 其他 HTML 內容。

您可以直接在 HTML 中為這些事件註冊事件接聽程式 代碼 (<permission type="…" onpromptdismiss="alert('The prompt was dismissed');" />), 或在 <permission> 元素上使用 addEventListener()，如 範例。

<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 元素，就不會顯示。也就是說 如果您的 HTML 程式碼包含 <permission> 元素， 而瀏覽器卻不知道您可能仍想使用 JavaScript 偵測支援情形 舉例來說，如果想建立透過點選 一般的 <button>。

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

來源試用

如要在網站上試用 <permission> 元素給實際使用者，請採取以下步驟： 申請來源試用。 參閱「開始使用來源試用」， 瞭解如何準備使用來源試用網站。來源試用 將於 Chrome 126 至 131 (2025 年 2 月 19 日) 執行。

示範

探索示範，並到 GitHub 查看原始碼。以下是支援的瀏覽器體驗螢幕截圖。

意見回饋

我們想瞭解 <permission> 如何滿足您的用途。感受 可自由回覆 存放區中的問題，或提交新的 第一。存放區中的公開信號： <permission> 元素可讓我們和其他瀏覽器知道你的興趣 基礎架構

常見問題

• 這比搭配權限的一般 <button> 更好 API？點擊 <button> 是一種使用者手勢，但瀏覽器無法 驗證該資源已連結至要求權限的要求。如果 使用者點選 <permission> 時，瀏覽器可以確定該次點擊是在 有關權限要求的資訊這可讓瀏覽器加快流程 否則風險會提高例如允許使用者 就能輕鬆取消封鎖權限
• 如果其他瀏覽器不支援 <permission> 元素，該怎麼辦？ <permission> 元素可用於漸進式強化。啟用 不支援瀏覽器，可以使用傳統權限流程。例如： 判斷依據為一般 <button> 的點擊次數。權限團隊也 處理 polyfill 的相關作業為 GitHub 存放區加上星號 並在作業就緒時接收通知
• 這是否與其他瀏覽器廠商討論過？<permission> 元素 2023 年，在 W3C TPAC 的 「分組討論」一節。個人中心 就能讀取 公開工作階段附註。 Chrome 團隊也要求了 請參閱「相關連結」一節。<permission> 元素是與其他瀏覽器持續討論的話題 想要標準化
• 這實際上是否應為 void 元素？你還在 主動爭論 <permission> 是否應為無效 元素。如有任何意見，歡迎透過該問題告訴我們。

相關連結

• 說明
• WebKit 標準排名
• Mozilla 標準定位

特別銘謝

這份文件已由 審查 Balázs Engedy Thomas Nguyen Penelope McLachlan， Marian Harbach David Warren 和 Rachel Andrew。