功能政策簡介

摘要

功能政策可讓網頁開發人員選擇性啟用、停用及 修改瀏覽器中特定 API 和網頁功能的行為。這就像 CSP，但不是控制安全性，而是 控制功能！

功能政策本身幾乎沒有開發人員同意參與的協議 和瀏覽器 可以協助我們達成打造 (及維護) 高安全性的目標 優質的網頁應用程式

簡介

打造專屬網路是一路成長的冒險旅程。要建立優秀的團隊並不容易 兼具效能與採用所有最新最佳做法的網頁應用程式。等於 讓使用者體驗變得越來越好隨著專案不斷發展 隨著開發人員紛紛開始加入新功能，程式碼集也不斷擴張，沒錯 您擁有的優質經驗 TM 可能會開始拖慢和使用者體驗。 開始遭受痛苦！功能政策的用意是協助您順利完成設定。

使用功能政策時，您需要為瀏覽器啟用一組「政策」，以便瀏覽器 不讓網站使用特定功能這些政策有限制 網站可以存取哪些 API，或修改瀏覽器的預設行為 某些功能。

以下列舉幾項功能政策的用途：

  • 變更預設行為 的片長為 autoplay。
  • 限制網站使用敏感 API，例如 camera 或 microphone。
  • 允許 iframe 使用 fullscreen API。
  • 禁止使用同步 XHR 和 document.write() 等過時 API。
  • 確保圖片的大小正確 (例如避免版面配置遭到破壞) 尺寸過大 (例如浪費使用者的頻寬)。

政策是指開發人員與瀏覽器之間的合約。會根據 瀏覽器就能掌握開發人員的意圖 因此，請務必 我們的應用程式會試著衝下邊欄，然後做壞事如果網站或內嵌內容 第三方內容試圖違反開發人員預先選取的任何項目 瀏覽器就會以更好的使用者體驗覆寫行為，或封鎖 API 以致於可能必須趕在最後一刻 大幅更動專案，甚至將專案全部取消

使用功能政策

功能政策提供兩種控制功能：

  1. 透過 Feature-Policy HTTP 標頭。
  2. 在 iframe 上使用 allow 屬性。
，瞭解如何調查及移除這項存取權。

如要使用功能政策，最簡單的方法是傳送 Feature-Policy HTTP 標頭。這個標頭的值是政策或已設定的值 指定瀏覽器要遵守的政策：

Feature-Policy: <feature> <allow list origin(s)>

來源允許清單可能有多種不同的值：

  • *：這項功能適用於頂層瀏覽結構定義和巢狀結構 瀏覽環境 (iframe)。
  • 'self'：這項功能可用於頂層瀏覽結構定義，以及 同源巢狀瀏覽結構定義。不適用於跨來源 。
  • 'none'：無法在頂層瀏覽結構定義中使用這項功能， 不允許在巢狀瀏覽環境中使用
  • <origin(s)>：要啟用政策的特定來源 (例如 https://example.com)。

範例

假設您想全面禁止使用 網站上的地理位置做法是以最嚴格的標準傳送 使用 geolocation 功能的 'none' 許可清單：

Feature-Policy: geolocation 'none'

如果一段程式碼或 iframe 嘗試使用 Geolocation API，瀏覽器 封鎖裝置就算使用者先前 分享位置資訊的權限。

違反設定的地理位置政策
違反已設定的地理位置政策。

而在其他情況下，您則能稍微放寬這項政策。我們可以 我們自己的來源使用 Geolocation API，但也要防止第三方內容來自於 在允許清單中設定 'self' 來存取該網路：

Feature-Policy: geolocation 'self'

iframe allow 屬性

「功能政策」的第二種做法是 iframe。使用 allow 屬性指定政策清單 嵌入的內容：

<!-- Allow all browsing contexts within this iframe to use fullscreen. -->
<iframe src="https://example.com..." allow="fullscreen"></iframe>

<!-- Equivalent to: -->
<iframe src="https://example.com..." allow="fullscreen *"></iframe>

<!-- Allow only iframe content on a particular origin to access the user's location. -->
<iframe
  src="https://another-example.com/demos/..."
  allow="geolocation https://another-example.com"
></iframe>

現有的 iframe 屬性會怎麼樣？

部分由功能政策控管的功能目前已經 屬性控制應用程式行為例如：<iframe allowfullscreen> 是允許 iframe 內容使用 HTMLElement.requestFullscreen() API。還有allowpaymentrequest和 allowusermedia 屬性以便 Payment Request API 和 getUserMedia()， 。

請嘗試使用 allow 屬性，而非舊屬性 屬性。需要支援反向支援的案件 使用 allow 屬性搭配同等舊版屬性的相容性 這完全沒問題 (例如 <iframe allowfullscreen allow="fullscreen">)。 不過請注意，較嚴格的政策將勝出。例如，下列 無法將 iframe 進入全螢幕模式，因為 allow="fullscreen 'none'" 的限制比 allowfullscreen 嚴格：

<!-- Blocks fullscreen access if the browser supports feature policy. -->
<iframe allowfullscreen allow="fullscreen 'none'" src="..."></iframe>

一次控管多項政策

透過傳送 HTTP 標頭，可同時控制多項功能 包含以 ; 分隔的政策指令清單：

Feature-Policy: unsized-media 'none'; geolocation 'self' https://example.com; camera *;

也可以為每項政策傳送個別標頭：

Feature-Policy: unsized-media 'none'
Feature-Policy: geolocation 'self' https://example.com
Feature-Policy: camera *;

此範例會進行下列操作：

  • 不允許所有瀏覽結構定義使用 unsized-media。
  • 不允許在所有瀏覽環境中使用 geolocation，但 不同的網頁來源和 https://example.com
  • 允許所有瀏覽環境使用「camera」。

範例 - 在 iframe 上設定多項政策

<!-- Blocks the iframe from using the camera and microphone
     (if the browser supports feature policy). -->
<iframe allow="camera 'none'; microphone 'none'"></iframe>

JavaScript API

Chrome 60 已新增對 Feature-Policy HTTP 標頭和 iframe 搭配 allow 屬性，則 Chrome 74 新增了 JavaScript API。

這個 API 可讓用戶端程式碼判斷 網頁、頁框或瀏覽器想取得寶藏嗎？ document.featurePolicy 用於主要文件，frame.featurePolicy 給 iframe。

範例

以下範例說明將 https://example.com 網站上的「Feature-Policy: geolocation 'self'」：

/* @return {Array<string>} List of feature policies allowed by the page. */
document.featurePolicy.allowedFeatures();
// → ["geolocation", "midi",  "camera", "usb", "autoplay",...]

/* @return {boolean} True if the page allows the 'geolocation' feature. */
document.featurePolicy.allowsFeature('geolocation');
// → true

/* @return {boolean} True if the provided origin allows the 'geolocation' feature. */
document.featurePolicy.allowsFeature(
  'geolocation',
  'https://another-example.com/'
);
// → false

/* @return {Array<string>} List of feature policies allowed by the browser
regardless of whether they are in force. */
document.featurePolicy.features();
// → ["geolocation", "midi",  "camera", "usb", "autoplay",...]

/* @return {Array<string>} List of origins (used throughout the page) that are
   allowed to use the 'geolocation' feature. */
document.featurePolicy.getAllowlistForFeature('geolocation');
// → ["https://example.com"]

政策清單

那麼可透過功能政策控管哪些功能？

目前缺少有關執行政策的說明文件 以及使用方式這份清單也會隨著各種瀏覽器而增加 需要符合規範，並實施各種政策。功能政策即將異動 絕對需要目標和實用的參考文件

目前您可以透過幾種方式查看可控制的功能。

  • 您可以前往功能政策廚房接收器觀看示範影片。其中包含範例 說明 Blink 中實施的每個政策
  • 檢查 Chrome 來源 。
  • 在 about:blank 上查詢 document.featurePolicy.allowedFeatures() 以找出清單：
        ["geolocation",
         "midi",
         "camera",
         "usb",
         "magnetometer",
         "fullscreen",
         "animations",
         "payment",
         "picture-in-picture",
         "accelerometer",
         "vr",
        ...
  • 請前往 chromestatus.com 查看目前已的政策 或被判定為 Blink 的情況

想瞭解部分政策「使用方式」，請參閱 規格的 GitHub 存放區。 其中包含一些政策的說明。

常見問題

使用功能政策的時機

所有政策都是選擇加入，因此請視情況適時使用功能政策。適用對象 舉例來說，如果應用程式是圖片庫，maximum-downscaling-image 政策有助於避免將大量圖片傳送到行動裝置的可視區域。

應與其他政策 (例如 document-write 和 sync-xhr) 搭配使用 維護人員因此開啟這些警告可能會導致廣告等第三方內容無法正常運作。每月中的特定幾天 另一方面，功能政策可用來檢查您的網頁 絕對不會使用這些難以執行的 API！

是否會在開發或正式環境使用功能政策？

兩者。建議您在開發期間啟用政策，並 政策生效。在開發期間啟用政策 幫助您踏出正確的第一步協助您找出任何意料之外 以免發生迴歸問題在實際工作環境中保持啟用政策 保證提供使用者特定的使用體驗

可以向我的伺服器檢舉違反政策的情形嗎？

Reporting API 仍在開發中！ 類似於網站選擇接收電子報的方式 CSP 違規事項或 淘汰後 ，即可收到有關功能違反政策情形的報告。

iframe 內容有哪些沿用規則？

指令碼 (第一方或第三方) 會沿用瀏覽政策 相關資訊也就是說，頂層指令碼會沿用主要文件的政策。

iframe 會沿用其上層頁面的政策。如果 iframe 的 allow 屬性，父項頁面和 allow 之間的政策較嚴格 list，勝出。如要進一步瞭解 iframe 用量，請參閱 iframe 上的 allow 屬性。

不可以。政策的生命週期適用於單一網頁導覽回應，如果 如果使用者前往新網頁，Feature-Policy 標頭必須明確 才會套用政策的新回應。

哪些瀏覽器支援功能政策？

如需最新資訊，請造訪 caniuse.com 以便進一步瞭解瀏覽器支援

目前 Chrome 是唯一支援功能政策的瀏覽器。不過 由於整個 API 介面已啟用，或是功能可偵測，因此功能政策 非常適合漸進式增強。

結論

功能政策有助於提供良好的使用者體驗及改進使用者體驗， 以及效能良好這在開發或維護應用程式時特別實用 因為這樣可以防止潛在的攤位闖入程式碼集。

其他資源：