使用權限政策控管瀏覽器功能

管理網頁和第三方 iframe 對瀏覽器功能的存取權。

Kevin K. Lee

權限政策 (舊稱「功能政策」) 可讓開發人員 控制網頁可用的瀏覽器功能、 iframe 和 子資源，方法是宣告一組政策，讓瀏覽器強制執行。這些 政策會套用至回應標頭來源清單中提供的來源。 來源清單可以包含相同來源和/或跨來源，因此允許 開發人員可控管第一方和第三方的瀏覽器功能存取權。

使用者必須最終決定允許存取更強大的功能，也必須透過提示提供明確權限。

權限政策可讓頂層網站定義網站和第三個網站 「協議」和「監控」 功能存取權要求是否合法。例如： 封鎖所有第三方的地理位置功能 開發人員可以確定沒有第三方 地理位置。

權限政策變更

權限政策先前稱為功能政策。主要概念仍維持不變，但名稱上有一些重要異動。

結構化欄位使用方式

結構化欄位提供一組常見的資料結構，可用於將 HTTP 標頭欄位值的剖析和序列化作業標準化。如要進一步瞭解結構化欄位，請參閱 Fastly 的網誌文章「透過結構化標頭欄位改善 HTTP」。

  geolocation 'self' https://example.com; camera 'none'

  geolocation=(self "https://example.com"), camera=()

使用 iframe allow 屬性合併標頭

透過功能政策，您可以將來源加入標頭來源清單，或在 iframe 標記中加入 allow 屬性，即可將這項功能新增至跨來源頁框。使用權限政策時，如果您在來源清單中加入跨來源頁框，該來源的 iframe 標記就必須包含 allow 屬性。 如果回應中沒有權限政策標頭，系統會將來源清單視為預設值為 *。在 iframe 中加入 allow 屬性即可使用這項功能。

因此，我們建議開發人員在回應中明確設定權限政策標頭，讓未列在來源清單中的跨來源 iframe 都無法存取這項功能，即使 allow 存在也一樣。

Chrome 第 88 版後仍可使用功能政策，但可做為權限政策的別名。除語法外，邏輯沒有差異。如果同時使用權限政策和功能政策標頭，Permissions-Policy 標頭的優先順序將較高，並會覆寫 Feature-Policy 標頭提供的值。

如何使用權限政策？

快速總覽

在深入探討前，我們先快速看一下以下這個常見情況：身為網站擁有者，並想控管網站和第三方程式碼使用瀏覽器功能的方式。

• 您的網站https://your-site.example。
• 你的網站嵌入了來源相同來源 (https://your-site.example) 的 iframe。
• 你的網站嵌入了你所信任的 https://trusted-site.example 的 iframe。
• 您的網站也會顯示 https://ad.example 放送的廣告。
• 您只需允許網站和信任的網站地理位置，而不允許廣告刊登。

在此情況下，請使用下列標頭：

Permissions-Policy: geolocation=(self "https://trusted-site.example")

接著，請明確將 allow 屬性設為受信任網站的 iframe 標記：

<iframe src="https://trusted-site.example" allow="geolocation">

在本例中，標頭來源清單只允許你的網站 (self) 和 trusted-site.example 使用地理位置功能。「ad.example」無法使用地理位置。

1. 您的網站 (your-site.example) 已取得使用者同意，可以使用地理位置功能。
2. 同來源 iframe (your-site.example) 可以在不使用 allow 屬性的情況下使用此功能。
3. 如果 iframe 是由另一個子網域 (subdomain.your-site-example) 放送，但並未加入來源清單，而在 iframe 代碼上設定了 allow 屬性，則無法使用這項功能。系統會將不同的子網域視為跨來源網站，但屬於跨來源網站。
4. 凡是加入來源清單，並在 iframe 代碼上設定了 allow 屬性的跨來源 iframe (trusted-site.example)，才能使用這項功能。
5. 在來源清單中加入的跨來源 iframe (trusted-site.example) 沒有 allow 屬性，因此無法使用這項功能。
6. 系統會禁止未加入來源清單的跨來源 iframe (ad.example) 使用這項功能，即使 iframe 代碼中包含 allow 屬性也一樣。

Permissions-Policy HTTP 回應標頭

Permissions-Policy: <feature>=(<token>|<origin(s)>)

在伺服器的回應中使用 Permissions-Policy 標頭，即可設定地圖項目的允許來源。標頭值可以包含符記和來源字串的組合。所有來源的可用權杖都是*可用權杖，self則代表相同來源。

如果標題涉及多項地圖項目，請以半形逗號隔開各個地圖項目。如果您列出多個來源，請以空格分隔來源清單中的每個來源。如果標頭列出的是跨來源要求的來源，iframe 代碼必須包含 allow 屬性。

以下為部分鍵/值組合範例：

• 語法：[FEATURE]=*
  • 政策適用於所有來源
  • 範例：geolocation=*
• 語法：[FEATURE]=(self)
  • 套用至相同來源的政策
  • 範例：geolocation=(self)
• 語法：[FEATURE]=(self [ORIGIN(s)])
  • 政策已套用至相同來源與指定來源
  • 範例：geolocation=(self "https://a.example" "https://b.example")
  • self 是「https://your-site.example」的簡寫
• 語法：[FEATURE]=([ORIGIN(s)])
  • 政策已套用至相同來源與指定來源
  • 範例：geolocation=("https://your-site.example" "https://a.example" "https://b.example")
  • 使用這種語法時，其中一個來源應為嵌入器的來源。此外，如果嵌入網頁本身未獲得權限，即使將 iframe 加入來源清單，該頁面嵌入的 iframe 也會遭到封鎖，這是因為這類 iframe 會委派權限。您也可以使用 self 權杖。
• 語法：[FEATURE]=()
  • 已禁止所有來源使用這項功能
  • 範例：geolocation=()

不同的子網域和路徑

系統會將不同的子網域 (例如 https://your-site.example 和 https://subdomain.your-site.example) 視為「相同網站，但跨來源」。因此，在來源清單中新增子網域，並不會允許存取同一個網站的其他子網域。凡是需要使用這項功能的內嵌子網域，都必須個別加入來源清單。舉例來說，如果只允許透過標頭 Permissions-Policy: browsing-topics=(self) 存取使用者的瀏覽主題，那麼來自同一個網站不同子網域的 iframe 就無法存取主題。https://subdomain.your-site.example

系統會將不同路徑 (例如 https://your-site.example 和 https://your-site.example/embed) 視為相同來源，而且不同的路徑不必列在來源清單中。

iframe allow 屬性

跨來源使用時，iframe 需要代碼中的 allow 屬性才能存取這項功能。

語法：<iframe src="[ORIGIN]" allow="[FEATURE] <'src' | [ORIGIN(s)]"></iframe>

例如：

<iframe src="https://trusted-site.example" allow="geolocation">

處理 iframe 瀏覽作業

根據預設，如果 iframe 前往其他來源，這項政策就不會套用至 iframe 前往的來源。只要在 allow 屬性中列出 iframe 前往的來源，系統就會將先前 iframe 套用的權限政策套用至 iframe 前往的來源。

<iframe src="https://trusted-site.example" allow="geolocation https://trusted-site.example https://trusted-navigated-site.example">

如要查看實際運作情形，請前往 iframe 導覽示範。

權限政策設定範例

以下示範提供下列設定範例。

允許所有來源使用這項功能

Permissions-Policy: geolocation=*

<iframe src="https://trusted-site.example" allow="geolocation">
<iframe src="https://ad.example" allow="geolocation">

將來源清單設為 * 符記後，就能對網頁上所有的來源 (包括本身和所有 iframe) 使用這項功能。在本例中，所有透過 https://your-site.example 提供的程式碼，以及從 https://trusted-site.example iframe 和 https://ad.example 提供的代碼，都可存取使用者瀏覽器中的地理位置功能。請記住，您必須在 iframe 上設定 allow 屬性，並且將來源新增至標頭來源清單。

您可以在示範中查看這項設定。

功能僅適用於來源相同

Permissions-Policy: geolocation=(self)

使用 self 權杖只允許將地理位置用於相同出發地。跨來源將無法存取這項功能。在本例中，只有 https://trusted-site.example (self) 可存取地理位置。如果只想在您的網頁上找到這項功能，請使用這個語法。

您可以在示範中查看這項設定。

允許存取相同來源和特定跨來源的功能

Permissions-Policy: geolocation=(self "https://trusted-site.example")

這個語法允許本身 (https://your-site.example) 和 https://trusted-site.example 使用地理位置。請記得在 iframe 代碼中明確加入 allow 屬性。如果另一個包含 <iframe src="https://ad.example" allow="geolocation"> 的 iframe，則 https://ad.example 將無法存取地理位置功能。只有列於來源清單中列出的原始網頁和 https://trusted-site.example，且 iframe 標記中含有 allow 屬性，才能存取使用者的功能。

您可以在示範中查看這項設定。

已禁止所有來源使用這項功能

Permissions-Policy: geolocation=()

如果來源清單空白，則所有來源都會無法使用這項功能。您可以在示範中查看這項設定。

使用 JavaScript API

功能政策的現有 JavaScript API 會以物件的形式顯示在文件或元素 (document.featurePolicy or element.featurePolicy) 上。尚未實作權限政策的 JavaScript API。

Feature Policy API 可用於權限政策設定的政策，但有一些限制。關於 JavaScript API 實作，您還有其他問題，而我們準備了提案，協助您將邏輯移至 Permissions API。如有任何想法，歡迎加入討論。

featurePolicy.allowsFeature(feature)

• 如果此功能可用於預設來源用途，則傳回 true。
• 兩種政策的行為與「權限政策」和舊版功能政策相同
• 在 iframe 元素 (iframeEl.featurePolicy.allowsFeature('geolocation')) 上呼叫 allowsFeature() 時，傳回的值會反映 iframe 中是否設定了 allow 屬性

featurePolicy.allowsFeature(feature, origin)

• 如果指定來源允許此功能，則傳回 true。
• 如果已在 document 上呼叫此方法，此方法不會再指出是否允許指定來源使用此功能，例如功能政策。現在，這個方法會指示該來源可能允許該功能。您必須額外檢查 iframe 是否已設定 allow 屬性。開發人員必須對 iframe 元素上的 allow 屬性進行額外檢查，以判定第三方來源是否可以使用這項功能。

使用 element 物件檢查 iframe 中的功能

您可以使用 element.allowsFeature(feature)，將 allow 屬性納入考量，這一點與不需要的 document.allowsFeature(feature, origin) 不同。

const someIframeEl = document.getElementById('some-iframe')
const isCameraFeatureAllowed = someIframeEl.featurePolicy.allowsFeature('camera')

featurePolicy.allowedFeatures()

• 傳回適用於預設來源用途的功能清單。
• 兩項權限政策和功能政策設定的行為皆相同
• 如果相關節點是 iframe，系統會將 allow 屬性納入考量。

featurePolicy.features()

• 傳回瀏覽器可用功能清單。
• 兩項權限政策和功能政策設定的行為皆相同

Chrome 開發人員工具整合

瞭解開發人員工具中的權限政策如何運作。

1. 開啟 Chrome 開發人員工具。
2. 開啟「應用程式」面板查看每個頁框許可和禁止的功能。
3. 在側欄中，選取要檢查的頁框。系統會列出所選影格可使用的功能，以及該影格中封鎖的功能清單。

從功能政策遷移

如果您目前正在使用 Feature-Policy 標頭，可以按照下列步驟改用權限政策。

將功能政策標頭替換為權限政策標頭

由於功能政策標頭僅適用於以 Chromium 為基礎的瀏覽器，且自 Chrome 88 版開始支援權限政策標頭，因此你可以放心透過權限政策更新現有的標頭。

Feature-Policy:
  autoplay *;
  geolocation 'self';
  camera 'self' 'https://trusted-site.example';
  fullscreen 'none';

Permissions-Policy:
  autoplay=*,
  geolocation=(self),
  camera=(self "https://trusted-site.example"),
  fullscreen=()

更新「document.allowsFeature(feature, origin)」用量

如果您使用 document.allowsFeature(feature, origin) 方法檢查 iframe 允許的功能，請使用 iframe 元素附加的 allowsFeature(feature) 方法，不要使用所含 document。element.allowsFeature(feature) 方法負責允許屬性，document.allowsFeature(feature, origin) 則不需要。

正在檢查「document」功能存取權

如要繼續使用 document 做為基本節點，您必須為 iframe 標記上的 allow 屬性進行額外檢查。

<iframe id="some-iframe" src="https://example.com" allow="camera"></iframe>

Permissions-Policy: camera=(self "https://example.com")

const isCameraPolicySet = document.featurePolicy.allowsFeature('camera', 'https://example.com')

const someIframeEl = document.getElementById('some-iframe')
const hasCameraAttributeValue = someIframeEl.hasAttribute('allow')
&& someIframeEl.getAttribute('allow').includes('camera')

const isCameraFeatureAllowed = isCameraPolicySet && hasCameraAttributeValue

建議您像上述範例一樣，對 element 物件呼叫 allowsFeature()，而不要使用 document 更新現有程式碼。

Reporting API

Reporting API 為網頁應用程式提供一致的回報機制，而權限政策違規的 Reporting API 仍是實驗功能。

如要測試實驗功能，請按照逐步操作說明操作，並在 chrome://flags/#enable-experimental-web-platform-features 中啟用標記。啟用旗標後，您可以在開發人員工具中的「應用程式」分頁，觀察「工具」中違反權限政策的情形：

以下例子說明如何建構 Reporting API 標頭：

Reporting-Endpoints: main-endpoint="https://reports.example/main", default="https://reports.example/default"

Content-Security-Policy: script-src 'self'; object-src 'none'; report-to main-endpoint;
Document-Policy: document-write=?0; report-to=main-endpoint;

在目前的實作中，您可以設定「default」端點，接收在該影格內發生任何違規情況的報告(如上方範例所示)子頁框必須自行設定報表設定。

瞭解詳情

如要進一步瞭解權限政策，請參閱下列資源：

• 權限政策規格
• 權限政策說明
• 政策控管功能的清單。