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

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 hoạt động của một số API và tính năng web nhất định trong trình duyệt. Giống như CSP, nhưng thay vì kiểm soát tính bảo mật, kiểm soát các tính năng!

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

Giới thiệu

Xây dựng cho web là một cuộc phiêu lưu đầy khó khăn. Xây dựng được một trò chơi hàng đầu đã khó rồi ứng dụng web nâng cao hiệu suất và sử dụng tất cả các phương pháp hay nhất và mới nhất. Thậm chí khó duy trì trải nghiệm tuyệt vời theo thời gian. Khi dự án của bạn phát triển, nhiều nhà phát triển tham gia, các tính năng mới xuất hiện và cơ sở mã hoá ngày càng 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 chịu đau đớn! Chính sách về 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 tham gia một bộ "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 toàn bộ trang web của bạn. Những 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 một số tính năng nhất định.

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

  • Thay đổi hành vi mặc định autoplay trên 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. Chúng cung cấp thông tin của trình duyệt về ý định của nhà phát triển, do đó, giúp chúng tôi trung thực khi ứng dụng của chúng ta sẽ cố gắng đi sai đường và làm điều gì đó xấu. Nếu trang web hoặc nhúng nội dung của bên thứ ba tìm cách vi phạm bất kỳ lựa chọn nào của nhà phát triển các quy tắc này, trình duyệt sẽ ghi đè hành vi bằng trải nghiệm người dùng tốt hơn hoặc chặn API hoàn toàn.

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

Chính sách về tính năng cung cấp hai cách để kiểm soát các tính năng:

  1. Thông qua tiêu đề HTTP Feature-Policy.
  2. Bằng thuộc tính allow trên iframe.

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

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

Danh sách cho phép theo nguồn gốc có thể nhận một số giá trị khác nhau:

  • *: Tính năng này được cho phép trong ngữ cảnh duyệt web cấp cao nhất và trong bối cảnh duyệt web lồng ghép duyệt qua ngữ cảnh (iframe).
  • 'self': Tính năng này được cho phép trong bối cảnh duyệt web cấp cao nhất và bối cảnh duyệt web lồng ghép cùng nguồn gốc. Nội dung này không được phép xuất hiện trên nhiều nguồn gốc tài liệu trong 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)>: những 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 bạn. Bạn có thể thực hiện điều đó bằng cách gửi danh sách cho phép của 'none' đối với tính năng geolocation:

Feature-Policy: geolocation 'none'

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

Vi phạm chính sách định vị vị trí đã đặt
Vi phạm chính sách định vị vị trí đã đặt.

Trong các trường hợp khác, bạn có thể 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 riêng chúng tôi để sử dụng API vị trí địa lý nhưng ngăn nội dung của bên thứ ba truy cập bằng cách đặt 'self' trong danh sách cho phép:

Feature-Policy: geolocation 'self'

Thuộc tính iframe allow

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 một 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 chịu sự kiểm soát của Chính sách về tính năng hiện có để kiểm soát hành vi của chúng. Ví dụ: <iframe allowfullscreen> là thuộc tính cho phép nội dung iframe sử dụng API HTMLElement.requestFullscreen(). Ngoài ra còn có allowpaymentrequest và allowusermedia để cho phép Payment Request API và getUserMedia(), .

Hãy thử sử dụng thuộc tính allow thay cho các thuộc tính cũ nếu có thể. Đối với các trường hợp bạn cần hỗ trợ lui khả năng tương thích bằng cách sử dụng thuộc tính allow với một thuộc tính cũ tương đương hoàn toàn không có lỗi (ví dụ: <iframe allowfullscreen allow="fullscreen">). Xin lưu ý rằng chính sách nào có tính hạn chế cao hơn sẽ giành chiến thắng. Ví dụ: như sau iframe 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 một lúc bằng cách gửi tiêu đề HTTP bằng 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ẽ thực hiện 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ừ nguồn gốc riêng của trang và https://example.com.
  • 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 đã hỗ trợ thêm cho tiêu đề HTTP Feature-Policy và Thuộc tính allow trên iframe, 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 tính năng nào được phép trang, khung hoặc trình duyệt. Bạn có thể truy cập các tiện ích của Google Workspace trong document.featurePolicy cho tài liệu chính hoặc frame.featurePolicy cho iframe.

Ví dụ:

Ví dụ bên dưới minh hoạ kết quả của việc gửi chính sách 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 Chính sách về tính năng có thể kiểm soát những tính năng nào?

Hiện tại, chúng tôi chưa có tài liệu về những chính sách sẽ được triển khai và cách sử dụng chúng. Danh sách này cũng sẽ tăng theo thời gian khi các trình duyệt khác nhau áp dụng thông số kỹ thuật và triển khai nhiều chính sách. Chính sách tính năng sẽ thay đổi và tài liệu tham khảo tốt.

Hiện tại, có một số cách để xem những tính năng nào có thể điều khiển được.

  • Hãy xem bản minh hoạ về Chính sách về tính năng Bồn rửa bát của chúng tôi. Có các ví dụ của từng chính sách đã triển khai trong Blink.
  • Kiểm tra nguồn của Chrome để biết danh sách tên đối tượ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 truy cập chromestatus.com để biết các chính sách đã được đượ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, hãy xem kho lưu trữ GitHub của quy cách. Video này chứa 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 cho phép người dùng chọn áp dụng, vì vậy, hãy sử dụng Chính sách về tính năng vào thời điểm/trường hợp thích hợp. Cho Ví dụ: nếu ứng dụng là một thư viện hình ảnh, maximum-downscaling-image sẽ giúp bạn tránh gửi hình ảnh khổng lồ tới khung nhìn trên thiết bị di động.

Bạn nên dùng các chính sách khác như document-write và sync-xhr cùng với chính sách khác quan tâm. Việc bật chế độ 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. Trên mặt khác, Chính sách tính năng cũng có thể là một sự kiểm tra trực tiếp để đảm bảo các trang của bạn không bao giờ sử dụng những API khủng khiếp 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 phát hành chính thức không?

Cả hai. Bạn nên bật chính sách trong quá trình phát triển và duy trì chính sách mới hoạt động trong khi phát hành công khai. Việc bật chính sách trong quá trình phát triển có thể giúp bạn khởi đầu đi đúng hướng. Công cụ này sẽ giúp bạn phát hiện mọi thông tin bất ngờ trước khi chúng xảy ra. Duy trì trạng thái bật chính sách trong phiên bản phát hành công khai nhằm đảm bảo một trải nghiệm người dùng nhất định cho người dùng.

Có cách nào để báo cáo các trường hợp vi phạm chính sách đến máy chủ của tôi không?

API Báo cáo đang xây dựng! Tương tự như cách các trang web có thể chọn tham gia nhận báo cáo về Lỗi vi phạm CSP hoặc ngừng sử dụng, bạn sẽ có thể nhận báo cáo về các lỗi vi phạm chính sách đối với tính năng một cách tự nhiên.

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

Tập lệnh (bên thứ nhất hoặc bên thứ ba) kế thừa chính sách duyệt web ngữ cảnh. Điều đó có nghĩa là tập lệnh cấp cao nhất 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ó allow, chính sách nghiêm ngặt hơn giữa trang mẹ và allow danh sách, 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.

Không. Thời gian tồn tại của chính sách là dành cho một phản hồi điều hướng trang. Nếu người dùng chuyển đến một trang mới, tiêu đề Feature-Policy phải được thể hiện rõ ràng được gửi 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?

Truy cập caniuse.com để biết thông tin mới nhất chi tiết về hỗ trợ trình duyệt.

Tại thời điểm này, Chrome là trình duyệt duy nhất hỗ trợ chính sách về tính năng. Tuy nhiên, vì toàn bộ nền tảng API đều cho phép người dùng chọn sử dụng hoặc có thể phát hiện tính năng, Chính sách về tính năng phù hợp với sự cải tiến tăng dần.

Kết luận

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

Tài nguyên khác: