Trang này được dịch bởi Cloud Translation API.

Giới thiệu về Chính sách tính năng

Eric Bidelman

Twitter GitHub Trang chủ

Tóm tắt

Chính sách tính năng cho phép các nhà phát triển web bật, tắt và sửa đổi hành vi của một số API và tính năng web trong trình duyệt một cách có chọn lọc. Giống như CSP, nhưng thay vì kiểm soát bảo mật, công cụ này kiểm soát các tính năng!

Bản thân các chính sách về tính năng là một số ít thoả thuận chọn tham gia giữa nhà phát triển và trình duyệt, có thể giúp thúc đẩy mục tiêu xây dựng (và duy trì) các ứng dụng web chất lượng cao.

Giới thiệu

Việc xây dựng ứng dụng cho web là một cuộc phiêu lưu khó khăn. Thật khó để xây dựng một ứng dụng web hàng đầu đạt hiệu suất và sử dụng mọi phương pháp hay nhất và mới nhất. Thậm chí còn khó hơn để giữ cho trải nghiệm đó tuyệt vời theo thời gian. Khi dự án của bạn phát triển, các nhà phát triển sẽ tham gia, các tính năng mới xuất hiện và cơ sở mã sẽ phát triển. Trải nghiệm tuyệt vời TM mà bạn từng đạt được có thể bắt đầu xấu đi và trải nghiệm người dùng bắt đầu trở nên xấu đi! Chính sách tính năng được thiết kế để giúp bạn đi đúng hướng.

Với Chính sách tính năng, bạn chọn một số "chính sách" để trình duyệt thực thi các tính năng cụ thể được sử dụng trên trang web của bạn. Các chính sách này hạn chế những API mà trang web có thể truy cập hoặc sửa đổi hành vi mặc định của trình duyệt đối với một số tính năng.

Dưới đây là ví dụ về những việc bạn có thể làm với Chính sách tính năng:

Thay đổi hoạt động mặc định của autoplay đối với các video dành cho thiết bị di động và video của bên thứ ba.
Hạn chế một trang web sử dụng các API nhạy cảm như camera hoặc microphone.
Cho phép iframe sử dụng API fullscreen.
Chặn việc sử dụng các API lỗi thời như XHR và document.write() đồng bộ.
Đảm bảo hình ảnh có kích thước phù hợp (ví dụ: tránh tình trạng đơ bố cục) và không quá lớn so với khung nhìn (ví dụ: lãng phí băng thông của người dùng).

Chính sách là hợp đồng giữa nhà phát triển và trình duyệt. Những dữ liệu này thông báo cho trình duyệt về ý định của nhà phát triển, nhờ đó giúp chúng tôi trung thực khi ứng dụng của chúng tôi cố gắng sai lệch và làm điều gì đó có hại. Nếu trang web hoặc nội dung của bên thứ ba được nhúng tìm cách vi phạm bất kỳ quy tắc nào được nhà phát triển chọn sẵn, thì trình duyệt sẽ ghi đè hành vi bằng trải nghiệm người dùng phù hợp hơn hoặc chặn hoàn toàn API.

Sử dụng chính sách tính năng

Chính sách tính năng đưa ra hai cách để kiểm soát các tính năng:

Thông qua tiêu đề HTTP Feature-Policy.
Với thuộc tính allow trên iframe.

Lưu ý: Sự khác biệt lớn nhất giữa tiêu đề HTTP và thuộc tính allow là thuộc tính allow chỉ kiểm soát các tính năng trong iframe. Tiêu đề có thể kiểm soát các tính năng trong phản hồi chính + mọi nội dung của iframe trong trang. Điều này là do iframe kế thừa các chính sách của trang gốc.

Tiêu đề HTTP `Feature-Policy`

Cách dễ nhất để sử dụng Chính sách tính năng là gửi tiêu đề HTTP Feature-Policy cùng với phản hồi của trang. Giá trị của tiêu đề này là một chính sách hoặc một bộ chính sách mà bạn muốn trình duyệt tuân theo một nguồn gốc nhất định:

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

Danh sách cho phép theo điểm gốc có thể có một số giá trị:

*: Tính năng này được cho phép trong ngữ cảnh duyệt web cấp cao nhất và trong ngữ cảnh duyệt web lồng nhau (iframe).
'self': Tính năng này được cho phép trong ngữ cảnh duyệt web cấp cao nhất và ngữ cảnh duyệt web lồng nhau cùng nguồn gốc. Điều này không được phép trong các tài liệu trên nhiều nguồn gốc trong các ngữ cảnh duyệt web lồng nhau.
'none': Tính năng này không được phép trong ngữ cảnh duyệt web cấp cao nhất và không được phép trong ngữ cảnh duyệt web lồng nhau.
<origin(s)>: các nguồn gốc cụ thể để bật chính sách (ví dụ: https://example.com).

Ví dụ

Giả sử bạn muốn chặn tất cả nội dung sử dụng API vị trí địa lý trên trang web của mình. Bạn có thể thực hiện việc đó bằng cách gửi danh sách cho phép nghiêm ngặt của 'none' cho tính năng geolocation:

Feature-Policy: geolocation 'none'

Nếu một đoạn mã hoặc iframe cố sử dụng API vị trí địa lý, thì trình duyệt sẽ chặn mã hoặc iframe đó. Điều này vẫn xảy ra ngay cả khi trước đó người dùng đã cấp quyền chia sẻ vị trí của họ.

Vi phạm chính sách vị trí địa lý đã đặt — Vi phạm chính sách về vị trí địa lý đã đặt.

Trong các trường hợp khác, bạn nên nới lỏng chính sách này một chút. Chúng tôi có thể cho phép nguồn gốc của mình sử dụng API vị trí địa lý nhưng ngăn nội dung của bên thứ ba truy cập vào API đó bằng cách đặt 'self' trong danh sách cho phép:

Feature-Policy: geolocation 'self'

Thuộc tính `allow` của iframe

Cách thứ hai để sử dụng Chính sách tính năng là kiểm soát nội dung trong iframe. Sử dụng thuộc tính allow để chỉ định danh sách chính sách cho nội dung được nhúng:

<!-- 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>

Còn các thuộc tính iframe hiện có thì sao?

Một số tính năng do Chính sách tính năng kiểm soát hiện có một thuộc tính để kiểm soát hành vi. Ví dụ: <iframe allowfullscreen> là một thuộc tính cho phép nội dung iframe sử dụng API HTMLElement.requestFullscreen(). Ngoài ra, còn có các thuộc tính allowpaymentrequest và allowusermedia để cho phép Payment Request API và getUserMedia() tương ứng.

Hãy cố gắng sử dụng thuộc tính allow thay vì các thuộc tính cũ này nếu có thể. Đối với trường hợp bạn cần hỗ trợ khả năng tương thích ngược, việc sử dụng thuộc tính allow có thuộc tính cũ tương đương là hoàn toàn hợp lý (ví dụ: <iframe allowfullscreen allow="fullscreen">). Chỉ cần lưu ý rằng chính sách hạn chế hơn sẽ chiến thắng. Ví dụ: các iframe sau đây sẽ không được phép chuyển sang chế độ toàn màn hình vì allow="fullscreen 'none'" hạn chế hơn allowfullscreen:

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

Kiểm soát nhiều chính sách cùng một lúc

Bạn có thể kiểm soát một số tính năng cùng lúc bằng cách gửi tiêu đề HTTP cùng với một danh sách các lệnh chính sách riêng biệt ;:

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

hoặc bằng cách gửi một tiêu đề riêng cho từng chính sách:

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

Ví dụ này sẽ hoạt động như sau:

Không cho phép sử dụng unsized-media cho mọi ngữ cảnh duyệt web.
Không cho phép sử dụng geolocation cho mọi ngữ cảnh duyệt web, ngoại trừ https://example.com và nguồn gốc của trang.
Cho phép camera truy cập vào mọi ngữ cảnh duyệt web.

Ví dụ – đặt nhiều chính sách trên một iframe

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

API JavaScript

Mặc dù Chrome 60 đã thêm tính năng hỗ trợ cho tiêu đề HTTP Feature-Policy và thuộc tính allow trên iframe, nhưng API JavaScript đã được thêm vào Chrome 74.

API này cho phép mã phía máy khách xác định những tính năng mà trang, khung hoặc trình duyệt cho phép. Bạn có thể truy cập các tiện ích trong document.featurePolicy đối với tài liệu chính hoặc frame.featurePolicy đối với iframe.

Ví dụ:

Ví dụ dưới đây minh hoạ kết quả của việc gửi chính sách của Feature-Policy: geolocation 'self' trên trang web https://example.com:

/* @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"]

Danh sách chính sách

Vậy, bạn có thể kiểm soát những tính năng nào thông qua Chính sách về tính năng?

Hiện tại, việc thiếu tài liệu về những chính sách được triển khai và cách sử dụng các chính sách đó. Danh sách này cũng sẽ tăng theo thời gian khi nhiều trình duyệt áp dụng quy cách và triển khai nhiều chính sách. Chính sách về tính năng sẽ là một mục tiêu thường xuyên thay đổi và chắc chắn sẽ có các tài liệu tham khảo hữu ích.

Hiện tại, có một vài cách để xem tính năng nào ở chế độ có thể kiểm soát.

Xem các bản minh hoạ về Chính sách tính năng cho nhà bếp. Bài viết này có ví dụ về từng chính sách đã được triển khai trong Blink.
Kiểm tra nguồn của Chrome để biết danh sách tên tính năng.
Truy vấn document.featurePolicy.allowedFeatures() trên about:blank để tìm danh sách:

        ["geolocation",
         "midi",
         "camera",
         "usb",
         "magnetometer",
         "fullscreen",
         "animations",
         "payment",
         "picture-in-picture",
         "accelerometer",
         "vr",
        ...

Hãy kiểm tra chromestatus.com để biết các chính sách đã được triển khai hoặc đang được xem xét trong Blink.

Để xác định cách sử dụng một số chính sách này, vui lòng xem kho lưu trữ GitHub của thông số kỹ thuật. Trong đó có một số nội dung giải thích về một số chính sách.

Câu hỏi thường gặp

Khi nào tôi sử dụng Chính sách tính năng?

Tất cả các chính sách đều được áp dụng, vì vậy, hãy sử dụng Chính sách tính năng vào thời điểm/khi thích hợp. Ví dụ: nếu ứng dụng của bạn là một thư viện hình ảnh, thì chính sách maximum-downscaling-image sẽ giúp bạn tránh gửi hình ảnh có kích thước lớn tới khung nhìn trên thiết bị di động.

Bạn nên thận trọng khi sử dụng các chính sách khác như document-write và sync-xhr. Việc bật các tính năng này có thể làm hỏng nội dung của bên thứ ba, chẳng hạn như quảng cáo. Mặt khác, Chính sách tính năng có thể là một quy trình kiểm tra rõ ràng để đảm bảo các trang của bạn không bao giờ sử dụng những API tệ hại này!

Tôi có sử dụng Chính sách tính năng trong quá trình phát triển hoặc sản xuất không?

Cả hai. Bạn nên bật các chính sách trong quá trình phát triển và duy trì các chính sách này trong quá trình phát hành chính thức. Việc bật chính sách trong quá trình phát triển có thể giúp bạn bắt đầu đi đúng hướng. Giúp bạn phát hiện mọi sự hồi quy không mong muốn trước khi chúng xảy ra. Duy trì bật chính sách trong quá trình phát hành chính thức để đảm bảo người dùng có được một trải nghiệm người dùng nhất định.

Có cách nào để báo cáo vi phạm chính sách cho máy chủ của tôi không?

API Báo cáo đang trong quá trình hoạt động! Tương tự như cách các trang web có thể chọn nhận báo cáo về lỗi vi phạm CSP hoặc vi phạm chính sách, bạn sẽ có thể nhận được báo cáo về các lỗi vi phạm chính sách về tính năng ngoài đời thực.

Quy tắc kế thừa cho nội dung iframe là gì?

Các tập lệnh (bên thứ nhất hoặc bên thứ ba) kế thừa chính sách ngữ cảnh duyệt web. Điều đó có nghĩa là các tập lệnh cấp cao nhất sẽ kế thừa các chính sách của tài liệu chính.

iframe kế thừa các chính sách của trang gốc. Nếu iframe có thuộc tính allow, thì chính sách nghiêm ngặt hơn giữa trang mẹ và danh sách allow sẽ chiến thắng. Để biết thêm thông tin về cách sử dụng iframe, hãy xem thuộc tính allow trên iframe.

Nếu tôi áp dụng một chính sách, thì chính sách đó có kéo dài qua các lần điều hướng trang không?

Không. Thời gian tồn tại của chính sách là cho một phản hồi điều hướng trang duy nhất. Nếu người dùng chuyển đến một trang mới, thì tiêu đề Feature-Policy phải được gửi một cách rõ ràng trong phản hồi mới để chính sách được áp dụng.

Những trình duyệt nào hỗ trợ Chính sách tính năng?

Xem caniuse.com để biết thông tin chi tiết mới nhất về khả năng hỗ trợ cho trình duyệt.

Hiện tại, Chrome là trình duyệt duy nhất hỗ trợ chính sách tính năng. Tuy nhiên, vì toàn bộ nền tảng API là giao diện có thể chọn sử dụng hoặc có thể phát hiện tính năng, nên Chính sách tính năng sẽ tự áp dụng cho tính năng nâng cao tăng dần.

Kết luận

Chính sách tính năng có thể giúp cung cấp một lộ trình rõ ràng để cải thiện trải nghiệm người dùng và hiệu suất. Cách này đặc biệt hữu ích khi phát triển hoặc duy trì một ứng dụng vì có thể giúp tránh nguy cơ sử dụng súng cầm tay trước khi chúng xâm nhập vào cơ sở mã của bạn.

Tài nguyên bổ sung:

Giải thích chính sách tính năng
Quy cách của Chính sách tính năng
Bản minh hoạ về bồn rửa bát
Tiện ích Công cụ cho nhà phát triển về chính sách tính năng – Người kiểm thử dùng thử các chính sách tính năng trên một trang.
các mục trên chromestatus.com

Giới thiệu về Chính sách tính năng

Tóm tắt

Giới thiệu

Sử dụng chính sách tính năng

Tiêu đề HTTP Feature-Policy

Thuộc tính allow của iframe

Còn các thuộc tính iframe hiện có thì sao?

Kiểm soát nhiều chính sách cùng một lúc

API JavaScript

Ví dụ:

Danh sách chính sách

Câu hỏi thường gặp

Khi nào tôi sử dụng Chính sách tính năng?

Tôi có sử dụng Chính sách tính năng trong quá trình phát triển hoặc sản xuất không?

Có cách nào để báo cáo vi phạm chính sách cho máy chủ của tôi không?

Quy tắc kế thừa cho nội dung iframe là gì?

Nếu tôi áp dụng một chính sách, thì chính sách đó có kéo dài qua các lần điều hướng trang không?

Những trình duyệt nào hỗ trợ Chính sách tính năng?

Kết luận

Tiêu đề HTTP `Feature-Policy`

Thuộc tính `allow` của iframe