Kiểm soát các tính năng của trình duyệt bằng Chính sách về quyền

Quản lý cách trang và iframe của bên thứ ba trên trang của bạn có quyền truy cập vào các tính năng của trình duyệt.

Kevin K. Lee

Chính sách về quyền (trước đây gọi là Chính sách tính năng) cho phép nhà phát triển kiểm soát các tính năng trình duyệt có sẵn cho một trang, iframe của trang đó và bằng cách khai báo một nhóm chính sách để trình duyệt thực thi. Các các chính sách này được áp dụng cho các nguồn gốc được cung cấp trong danh sách nguồn gốc của tiêu đề phản hồi. Danh sách nguồn gốc có thể chứa cùng nguồn gốc và/hoặc nhiều nguồn gốc, đồng thời cho phép nhà phát triển để kiểm soát quyền truy cập của bên thứ nhất và bên thứ ba vào các tính năng của trình duyệt.

Người dùng là người đưa ra quyết định cuối cùng về việc cho phép ứng dụng truy cập vào các tính năng mạnh mẽ hơn và cần phải cấp quyền rõ ràng thông qua lời nhắc.

Chính sách về quyền cho phép trang web cấp cao nhất xác định nội dung nào và trang web thứ ba các bên có ý định sử dụng và loại bỏ gánh nặng cho người dùng trong việc xác định liệu yêu cầu cấp quyền sử dụng đối tượng đó có hợp pháp hay không. Ví dụ: bằng cách chặn tính năng định vị vị trí cho tất cả các bên thứ ba thông qua Chính sách về quyền, nhà phát triển có thể chắc chắn rằng không bên thứ ba nào có được quyền truy cập vào định vị vị trí.

Thay đổi đối với chính sách về quyền

Chính sách về quyền trước đây được gọi là Chính sách tính năng. Các khái niệm chính vẫn giữ nguyên, nhưng có một số thay đổi quan trọng cùng với tên.

Cách sử dụng trường có cấu trúc

Trường có cấu trúc cung cấp một tập hợp các cấu trúc dữ liệu phổ biến để chuẩn hoá quá trình phân tích cú pháp và chuyển đổi tuần tự các giá trị trường tiêu đề HTTP. Tìm hiểu thêm về Trường có cấu trúc trong bài đăng trên blog của Fastly, "Cải thiện HTTP bằng các trường tiêu đề có cấu trúc".

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

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

Kết hợp tiêu đề với thuộc tính allow của iframe

Với Chính sách tính năng, bạn có thể thêm tính năng vào một khung trên nhiều nguồn gốc bằng cách thêm nguồn gốc vào danh sách nguồn gốc của tiêu đề hoặc thêm thuộc tính allow vào thẻ iframe. Theo Chính sách về quyền, nếu bạn thêm một khung trên nhiều nguồn gốc vào danh sách nguồn gốc, thì thẻ iframe cho nguồn gốc đó phải bao gồm thuộc tính allow. Nếu phản hồi không chứa tiêu đề Chính sách về quyền, thì danh sách nguồn gốc sẽ được coi là có giá trị mặc định là *. Việc thêm thuộc tính allow vào iframe sẽ cho phép truy cập vào tính năng này.

Do đó, nhà phát triển nên đặt tiêu đề Chính sách quyền một cách rõ ràng trong phản hồi để các iframe trên nhiều nguồn gốc không được liệt kê trong danh sách nguồn gốc sẽ bị chặn truy cập vào tính năng này, ngay cả khi có allow.

Bạn vẫn có thể sử dụng Chính sách tính năng sau Chrome 88, nhưng Chính sách này hoạt động như một email đại diện cho Chính sách về quyền. Ngoài cú pháp, không có sự khác biệt nào về logic. Nếu bạn dùng cả hai tiêu đề của Chính sách về quyền và Chính sách tính năng, thì tiêu đề Permissions-Policy sẽ có mức độ ưu tiên cao hơn và thay thế giá trị do tiêu đề Feature-Policy cung cấp.

Làm cách nào để sử dụng Chính sách về quyền?

Tổng quan nhanh

Trước khi tìm hiểu sâu, hãy cùng xem nhanh một trường hợp phổ biến khi bạn là chủ sở hữu một trang web và bạn muốn kiểm soát cách trang web của bạn và mã của bên thứ ba sử dụng các tính năng của trình duyệt.

• Trang web của bạn đang https://your-site.example.
• Trang web của bạn nhúng một iframe từ cùng nguồn gốc (https://your-site.example).
• Trang web của bạn nhúng một iframe từ https://trusted-site.example mà bạn tin cậy.
• Trang web của bạn cũng hiển thị quảng cáo do https://ad.example phân phát.
• Bạn chỉ muốn cho phép định vị vị trí cho trang web và trang web đáng tin cậy, chứ không phải cho quảng cáo.

Trong trường hợp này, hãy sử dụng tiêu đề sau:

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

Và đặt rõ ràng thuộc tính allow thành thẻ iframe cho trang web đáng tin cậy:

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

Trong ví dụ này, danh sách nguồn gốc của tiêu đề chỉ cho phép trang web của bạn (self) và trusted-site.example sử dụng tính năng định vị vị trí. ad.example không được phép sử dụng vị trí địa lý.

1. Trang web your-site.example của bạn được phép sử dụng tính năng định vị vị trí khi có sự đồng ý của người dùng.
2. iframe cùng nguồn gốc (your-site.example) được phép sử dụng tính năng này mà không cần dùng thuộc tính allow.
3. Một iframe phân phát từ một miền con khác (subdomain.your-site-example) chưa được thêm vào danh sách nguồn gốc và có thuộc tính cho phép được đặt trên thẻ iframe sẽ bị chặn sử dụng tính năng này. Các miền con khác nhau được coi là cùng một trang web nhưng có nhiều nguồn gốc.
4. iframe trên nhiều nguồn gốc (trusted-site.example) đã được thêm vào danh sách nguồn gốc và đã đặt thuộc tính allow trên thẻ iframe để sử dụng tính năng này.
5. iframe trên nhiều nguồn gốc (trusted-site.example) được thêm vào danh sách nguồn gốc mà không có thuộc tính allow sẽ bị chặn sử dụng tính năng này.
6. iframe trên nhiều nguồn gốc (ad.example) không được thêm vào danh sách nguồn gốc sẽ bị chặn sử dụng tính năng này, ngay cả khi thuộc tính allow có trong thẻ iframe.

Tiêu đề phản hồi HTTP Permissions-Policy

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

Sử dụng tiêu đề Permissions-Policy trong phản hồi từ máy chủ để thiết lập các nguồn gốc được phép cho một tính năng. Giá trị tiêu đề có thể kết hợp mã thông báo và chuỗi nguồn gốc. Các mã thông báo có sẵn là * cho mọi nguồn gốc và self cho cùng nguồn gốc.

Nếu tiêu đề của bạn dành cho nhiều đối tượng, hãy phân tách các đối tượng bằng dấu phẩy. Nếu bạn liệt kê nhiều nguồn gốc, hãy phân tách từng nguồn gốc trong danh sách nguồn gốc bằng một dấu cách. Đối với các tiêu đề liệt kê một nguồn gốc là một yêu cầu trên nhiều nguồn gốc, thẻ iframe phải bao gồm thuộc tính allow.

Dưới đây là một số ví dụ về cặp khoá-giá trị:

• Cú pháp: [FEATURE]=*
  • Chính sách áp dụng cho mọi nguồn gốc
  • Ví dụ: geolocation=*
• Cú pháp: [FEATURE]=(self)
  • Đã áp dụng chính sách cho cùng nguồn gốc
  • Ví dụ: geolocation=(self)
• Cú pháp: [FEATURE]=(self [ORIGIN(s)])
  • Chính sách được áp dụng cho cùng một nguồn gốc và nguồn gốc đã chỉ định
  • Ví dụ: geolocation=(self "https://a.example" "https://b.example")
  • self là viết tắt của https://your-site.example
• Cú pháp: [FEATURE]=([ORIGIN(s)])
  • Chính sách được áp dụng cho cùng một nguồn gốc và nguồn gốc đã chỉ định
  • Ví dụ: geolocation=("https://your-site.example" "https://a.example" "https://b.example")
  • Khi sử dụng cú pháp này, một trong các nguồn gốc phải là nguồn gốc của trình nhúng. Nếu chính trang trình nhúng không được cấp quyền, thì các iframe được nhúng trong trang đó cũng sẽ bị chặn ngay cả khi chúng được thêm vào danh sách nguồn gốc vì Chính sách về quyền sẽ uỷ quyền truy cập. Bạn cũng có thể sử dụng mã thông báo self.
• Cú pháp: [FEATURE]=()
  • Tính năng bị chặn đối với mọi nguồn gốc
  • Ví dụ: geolocation=()

Các miền con và đường dẫn khác nhau

Các miền con khác nhau, chẳng hạn như https://your-site.example và https://subdomain.your-site.example, được coi là cùng một trang web nhưng nhiều nguồn gốc. Do đó, việc thêm miền con vào danh sách nguồn gốc sẽ không cấp quyền truy cập vào một miền con khác của cùng trang web đó. Bạn phải thêm riêng mọi miền con được nhúng muốn sử dụng tính năng này vào danh sách nguồn gốc. Ví dụ: Nếu tiêu đề Permissions-Policy: browsing-topics=(self) chỉ được phép truy cập vào các chủ đề duyệt web của người dùng trên cùng nguồn gốc, thì iframe thuộc một miền con khác của cùng trang web (https://subdomain.your-site.example) sẽ không có quyền truy cập vào chủ đề.

Các đường dẫn khác nhau, chẳng hạn như https://your-site.example và https://your-site.example/embed, được coi là cùng nguồn gốc và các đường dẫn khác nhau không cần phải được liệt kê trong danh sách gốc.

Thuộc tính allow của iframe

Để sử dụng trên nhiều nguồn gốc, iframe cần có thuộc tính allow trong thẻ để có thể sử dụng tính năng này.

Cú pháp: <iframe src="[ORIGIN]" allow="[FEATURE] <'src' | [ORIGIN(s)]"></iframe>

Ví dụ:

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

Xử lý hoạt động điều hướng iframe

Theo mặc định, nếu một iframe điều hướng đến một nguồn gốc khác, thì chính sách này sẽ không được áp dụng cho nguồn mà iframe đó điều hướng đến. Bằng cách liệt kê nguồn gốc mà iframe điều hướng đến trong thuộc tính allow, Chính sách quyền đã áp dụng cho iframe ban đầu sẽ được áp dụng cho nguồn gốc mà iframe điều hướng đến.

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

Bạn có thể xem tính năng này trong thực tế bằng cách truy cập bản minh hoạ điều hướng iframe.

Ví dụ về cách thiết lập Chính sách về quyền

Bạn có thể xem ví dụ về những cách thiết lập sau đây trong bản minh hoạ.

Tính năng này được dùng trên mọi nguồn gốc

Permissions-Policy: geolocation=*

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

Khi bạn đặt danh sách nguồn gốc thành mã thông báo *, tính năng này sẽ được cho phép đối với mọi nguồn gốc có trên trang, bao gồm cả chính nó và tất cả iframe. Trong ví dụ này, tất cả mã được phân phát qua https://your-site.example cũng như các mã được phân phát từ iframe https://trusted-site.example và https://ad.example đều có quyền truy cập vào tính năng định vị vị trí trong trình duyệt của người dùng. Hãy nhớ rằng bạn cũng phải đặt thuộc tính allow (cho phép) trên chính iframe cùng với việc thêm nguồn gốc vào danh sách nguồn gốc của tiêu đề.

Bạn có thể xem cách thiết lập này trong bản minh hoạ.

Chỉ cho phép tính năng trên cùng nguồn gốc

Permissions-Policy: geolocation=(self)

Việc sử dụng mã thông báo self chỉ cho phép sử dụng thông tin định vị vị trí cho cùng một nguồn gốc. Các nguồn gốc khác sẽ không có quyền sử dụng tính năng này. Trong ví dụ này, chỉ https://trusted-site.example (self) mới có quyền truy cập vào thông tin định vị vị trí. Hãy sử dụng cú pháp này nếu bạn chỉ muốn tính năng này cho trang của mình và không cho trang nào khác.

Bạn có thể xem cách thiết lập này trong bản minh hoạ.

Cho phép tính năng này trên cùng nguồn gốc và nhiều nguồn gốc cụ thể

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

Cú pháp này cho phép sử dụng thông tin định vị vị trí cho cả chính (https://your-site.example) và https://trusted-site.example. Hãy nhớ thêm rõ ràng thuộc tính allow vào thẻ iframe. Nếu có một iframe khác với <iframe src="https://ad.example" allow="geolocation">, thì https://ad.example sẽ không có quyền truy cập vào tính năng định vị vị trí. Chỉ trang gốc và https://trusted-site.example được liệt kê trong danh sách gốc cùng với thuộc tính allow trong thẻ iframe mới có quyền truy cập vào tính năng của người dùng.

Bạn có thể xem cách thiết lập này trong bản minh hoạ.

Tính năng bị chặn trên mọi nguồn gốc

Permissions-Policy: geolocation=()

Khi danh sách nguồn gốc trống, tính năng này sẽ bị chặn đối với mọi nguồn gốc. Bạn có thể xem cách thiết lập này trong bản minh hoạ.

Sử dụng API JavaScript

Bạn có thể tìm thấy API JavaScript hiện tại của Chính sách tính năng dưới dạng đối tượng trên tài liệu hoặc phần tử (document.featurePolicy or element.featurePolicy). API JavaScript cho Chính sách về quyền chưa được triển khai.

Bạn có thể sử dụng API Chính sách tính năng cho các chính sách do Chính sách về quyền đặt ra (với một số hạn chế). Còn câu hỏi liên quan đến việc triển khai API JavaScript và một đề xuất đã được đưa ra để di chuyển logic vào API Quyền. Hãy tham gia cuộc thảo luận nếu bạn có ý kiến.

featurePolicy.allowsFeature(feature)

• Trả về true nếu tính năng này được phép sử dụng theo nguồn gốc mặc định.
• Hành vi giống nhau cho cả chính sách do Chính sách về quyền và Chính sách tính năng đặt trước đó
• Khi allowsFeature() được gọi trên phần tử iframe (iframeEl.featurePolicy.allowsFeature('geolocation')), giá trị được trả về sẽ phản ánh việc thuộc tính cho phép có được đặt trên iframe hay không

FeaturePolicy.AllowFeature(tính năng, nguồn gốc)

• Trả về true nếu đối tượng được phép cho nguồn gốc đã chỉ định.
• Nếu phương thức này được gọi trên document, thì phương thức này sẽ không còn cho bạn biết liệu tính năng này có được phép đối với nguồn đã chỉ định như Chính sách về tính năng hay không. Giờ đây, phương thức này cho bạn biết rằng có thể đối tượng này được phép truy cập vào nguồn gốc đó. Bạn phải tiến hành kiểm tra thêm để xem iframe đó đã được đặt thuộc tính allow hay chưa. Nhà phát triển phải tiến hành kiểm tra thêm cho thuộc tính allow trên phần tử iframe để xác định xem tính năng này có được cho phép đối với nguồn gốc của bên thứ ba hay không.

Kiểm tra các tính năng trong iframe với đối tượng element

Bạn có thể sử dụng element.allowsFeature(feature) để xem xét thuộc tính cho phép, khác với document.allowsFeature(feature, origin) nếu không tính thuộc tính này.

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

featurePolicy.allowedFeatures()

• Trả về danh sách các tính năng được phép sử dụng nguồn gốc mặc định.
• Hành vi này là như nhau cho cả hai chính sách do Chính sách về quyền và Chính sách tính năng đặt ra
• Khi nút được liên kết là một iframe, thuộc tính cho phép sẽ được tính đến.

featurePolicy.features()

• Trả về danh sách tính năng có trong trình duyệt.
• Hành vi này là như nhau cho cả hai chính sách do Chính sách về quyền và Chính sách tính năng đặt ra

Tích hợp Công cụ của Chrome cho nhà phát triển

Xem cách hoạt động của Chính sách về quyền trong Công cụ cho nhà phát triển.

1. Mở Công cụ của Chrome cho nhà phát triển.
2. Mở bảng điều khiển Application (Ứng dụng) để kiểm tra các tính năng được phép và tính năng không được phép trong mỗi khung.
3. Trong thanh bên, hãy chọn khung mà bạn muốn kiểm tra. Bạn sẽ thấy danh sách những tính năng mà khung đã chọn được phép sử dụng và danh sách những tính năng bị chặn trong khung đó.

Di chuyển từ Chính sách tính năng

Nếu đang sử dụng tiêu đề Feature-Policy, bạn có thể triển khai các bước sau để di chuyển sang Chính sách về quyền.

Thay thế tiêu đề Chính sách tính năng bằng tiêu đề Chính sách về quyền

Vì các tiêu đề của Chính sách tính năng chỉ được hỗ trợ trong các trình duyệt dựa trên Chromium, còn các tiêu đề Chính sách về quyền được hỗ trợ kể từ Chrome 88, nên bạn có thể yên tâm cập nhật các tiêu đề hiện có bằng Chính sách về quyền.

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=()

Cập nhật mức sử dụng document.allowsFeature(feature, origin)

Nếu bạn đang sử dụng phương thức document.allowsFeature(feature, origin) để kiểm tra các tính năng được phép đối với iframe, hãy sử dụng phương thức allowsFeature(feature) được đính kèm trên phần tử iframe, chứ không phải document chứa. Phương thức element.allowsFeature(feature) tính đến thuộc tính cho phép trong khi document.allowsFeature(feature, origin) thì không.

Đang kiểm tra quyền sử dụng tính năng với document

Để tiếp tục sử dụng document làm nút cơ sở, bạn phải tiến hành kiểm tra thêm cho thuộc tính allow trên thẻ iframe.

<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

Thay vì cập nhật mã hiện có bằng document, bạn nên gọi allowsFeature() trên đối tượng element như ví dụ trước.

API báo cáo

API Báo cáo cung cấp cơ chế báo cáo cho các ứng dụng web một cách nhất quán. Ngoài ra, API Báo cáo dành cho các trường hợp vi phạm Chính sách về quyền được cung cấp dưới dạng tính năng thử nghiệm.

Nếu bạn muốn kiểm tra tính năng thử nghiệm này, hãy làm theo hướng dẫn và bật cờ trong chrome://flags/#enable-experimental-web-platform-features. Khi bật cờ, bạn có thể quan sát các lỗi vi phạm Chính sách về quyền trong Công cụ cho nhà phát triển ở thẻ Ứng dụng:

Ví dụ sau đây cho thấy cách tạo tiêu đề API Báo cáo:

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;

Trong quá trình triển khai hiện tại, bạn có thể nhận báo cáo về lỗi vi phạm chính sách từ mọi lỗi vi phạm xảy ra trong khung đó bằng cách định cấu hình điểm cuối có tên "default" như trong ví dụ ở trên. Các khung phụ sẽ phải có cấu hình báo cáo riêng.

Tìm hiểu thêm

Để hiểu rõ hơn về Chính sách về quyền, hãy tham khảo các tài nguyên sau:

• Quy cách của chính sách về quyền
• Giải thích về chính sách về quyền
• Danh sách các tính năng chịu sự kiểm soát của chính sách.