Hướng dẫn bật tính năng tách biệt nhiều nguồn gốc

Chế độ tách biệt nhiều nguồn gốc cho phép một trang web sử dụng các tính năng mạnh mẽ như SharedArrayBuffer. Bài viết này giải thích cách bật tính năng cách ly nhiều nguồn trên trang web của bạn.

Eiji Kitamura

Hướng dẫn này cho bạn biết cách bật tính năng cách ly nhiều nguồn. Bạn phải sử dụng tính năng cách ly nhiều nguồn nếu muốn dùng SharedArrayBuffer, performance.measureUserAgentSpecificMemory() hoặc bộ hẹn giờ có độ phân giải cao với độ chính xác cao hơn.

Nếu bạn dự định bật tính năng cách ly nhiều nguồn gốc, hãy đánh giá tác động của việc này đối với các tài nguyên khác trên nhiều nguồn gốc trên trang web của bạn, chẳng hạn như vị trí đặt quảng cáo.

Xác định vị trí sử dụng SharedArrayBuffer trên trang web của bạn

Kể từ Chrome 92, các chức năng sử dụng SharedArrayBuffer sẽ không hoạt động được nữa nếu không có tính năng tách biệt nhiều nguồn gốc. Nếu bạn truy cập vào trang này do thông báo ngừng sử dụng SharedArrayBuffer, thì có thể trang web của bạn hoặc một trong các tài nguyên được nhúng trên trang web đó đang sử dụng SharedArrayBuffer. Để đảm bảo không có vấn đề gì xảy ra trên trang web của bạn do việc ngừng sử dụng, hãy bắt đầu bằng cách xác định vị trí sử dụng.

Nếu bạn không chắc chắn về vị trí sử dụng SharedArrayBuffer trên trang web của mình, bạn có thể tìm hiểu theo hai cách:

• Sử dụng Chrome DevTools
• (Nâng cao) Sử dụng tính năng Báo cáo về việc ngừng sử dụng

Nếu bạn đã biết vị trí mà bạn đang sử dụng SharedArrayBuffer, hãy chuyển đến phần Phân tích tác động của tính năng cách ly nhiều nguồn gốc.

Sử dụng Chrome DevTools

Chrome DevTools cho phép nhà phát triển kiểm tra các trang web.

1. Mở Công cụ của Chrome cho nhà phát triển trên trang mà bạn nghi ngờ có thể đang sử dụng SharedArrayBuffer.
2. Chọn bảng điều khiển Bảng điều khiển.
3. Nếu trang đang sử dụng SharedArrayBuffer, thông báo sau sẽ xuất hiện:

   [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See  for more details. common-bundle.js:535

4. Tên tệp và số dòng ở cuối thông báo (ví dụ: common-bundle.js:535) cho biết vị trí xuất phát của SharedArrayBuffer. Nếu đó là một thư viện bên thứ ba, hãy liên hệ với nhà phát triển để khắc phục vấn đề. Nếu bạn triển khai tính năng này trong trang web của mình, hãy làm theo hướng dẫn bên dưới để bật tính năng tách biệt nhiều nguồn gốc.

(Nâng cao) Sử dụng tính năng Báo cáo về việc ngừng sử dụng

Một số trình duyệt có chức năng báo cáo về việc ngừng sử dụng API cho một điểm cuối cụ thể.

1. Thiết lập máy chủ báo cáo ngừng sử dụng và nhận URL báo cáo. Bạn có thể đạt được điều này bằng cách sử dụng dịch vụ công khai hoặc tự xây dựng dịch vụ.
2. Sử dụng URL, hãy đặt tiêu đề HTTP sau đây cho những trang có khả năng phân phát SharedArrayBuffer.

   Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}

3. Sau khi tiêu đề bắt đầu truyền tải, điểm cuối mà bạn đã đăng ký sẽ bắt đầu thu thập báo cáo ngừng sử dụng.

Hãy xem ví dụ về cách triển khai.

Phân tích tác động của tính năng tách biệt nhiều nguồn gốc

Sẽ thật tuyệt nếu bạn có thể đánh giá tác động của việc bật tính năng cách ly nhiều nguồn gốc đối với trang web của mình mà không làm hỏng bất cứ thứ gì. Tiêu đề HTTP Cross-Origin-Opener-Policy-Report-Only và Cross-Origin-Embedder-Policy-Report-Only cho phép bạn làm điều đó.

1. Đặt Cross-Origin-Opener-Policy-Report-Only: same-origin trên tài liệu cấp cao nhất của bạn. Như tên gọi cho thấy, tiêu đề này chỉ gửi báo cáo về tác động mà COOP: same-origin sẽ gây ra cho trang web của bạn, chứ không thực sự vô hiệu hoá hoạt động giao tiếp với cửa sổ bật lên.
2. Thiết lập báo cáo và định cấu hình một máy chủ web để nhận và lưu báo cáo.
3. Đặt Cross-Origin-Embedder-Policy-Report-Only: require-corp trên tài liệu cấp cao nhất của bạn. Một lần nữa, tiêu đề này cho phép bạn xem tác động của việc bật COEP: require-corp mà chưa ảnh hưởng đến chức năng của trang web. Bạn có thể định cấu hình tiêu đề này để gửi báo cáo đến cùng một máy chủ báo cáo mà bạn đã thiết lập ở bước trước.

Giảm tác động của việc tách biệt nhiều nguồn gốc

Sau khi xác định những tài nguyên sẽ chịu ảnh hưởng của tính năng cách ly khác nguồn gốc, sau đây là các nguyên tắc chung về cách bạn thực sự chọn sử dụng những tài nguyên khác nguồn gốc đó:

1. Trên các tài nguyên khác nguồn gốc, chẳng hạn như hình ảnh, tập lệnh, biểu định kiểu, iframe và các tài nguyên khác, hãy đặt tiêu đề Cross-Origin-Resource-Policy:cross-origin. Trên các tài nguyên cùng trang web, hãy đặt tiêu đề Cross-Origin-Resource-Policy:same-site.
2. Đối với các tài nguyên có thể tải bằng CORS, hãy đảm bảo rằng bạn đã bật CORS bằng cách đặt thuộc tính crossorigin trong thẻ HTML của tài nguyên đó (ví dụ: <img src="example.jpg" crossorigin>). Đối với yêu cầu tìm nạp JavaScript, hãy đảm bảo rằng bạn đã đặt request.mode thành cors.
3. Nếu bạn muốn sử dụng các tính năng mạnh mẽ như SharedArrayBuffer bên trong một iframe đã tải, hãy thêm allow="cross-origin-isolated" vào <iframe>.
4. Nếu các tài nguyên khác nguồn gốc được tải vào iframe hoặc tập lệnh worker có liên quan đến một lớp khác của iframe hoặc tập lệnh worker, hãy áp dụng đệ quy các bước được mô tả trong phần này trước khi chuyển sang bước tiếp theo.
5. Sau khi bạn xác nhận rằng tất cả tài nguyên khác nguồn gốc đều được chọn sử dụng, hãy đặt tiêu đề Cross-Origin-Embedder-Policy: require-corp trên iframe và tập lệnh worker (Bạn phải làm việc này bất kể nguồn gốc có giống nhau hay khác nhau).
6. Đảm bảo không có cửa sổ bật lên khác nguồn gốc yêu cầu giao tiếp thông qua postMessage(). Không có cách nào để duy trì hoạt động của các tiện ích này khi bạn bật tính năng cách ly nhiều nguồn gốc. Bạn có thể di chuyển thông tin liên lạc sang một tài liệu khác không được tách biệt nhiều nguồn gốc hoặc sử dụng một phương thức giao tiếp khác (ví dụ: yêu cầu HTTP).

Bật tính năng cô lập nhiều nguồn gốc

Sau khi bạn giảm thiểu tác động bằng tính năng tách biệt nhiều nguồn gốc, sau đây là các nguyên tắc chung để bật tính năng tách biệt nhiều nguồn gốc:

1. Đặt tiêu đề Cross-Origin-Opener-Policy: same-origin trên tài liệu cấp cao nhất. Nếu bạn đã đặt Cross-Origin-Opener-Policy-Report-Only: same-origin, hãy thay thế bằng mã mới. Thao tác này sẽ chặn hoạt động giao tiếp giữa tài liệu cấp cao nhất và các cửa sổ bật lên của tài liệu đó.
2. Đặt tiêu đề Cross-Origin-Embedder-Policy: require-corp trên tài liệu cấp cao nhất. Nếu bạn đã đặt Cross-Origin-Embedder-Policy-Report-Only: require-corp, hãy thay thế bằng mã mới. Thao tác này sẽ chặn việc tải các tài nguyên khác nguồn gốc không được chọn sử dụng.
3. Kiểm tra để đảm bảo self.crossOriginIsolated trả về true trong bảng điều khiển nhằm xác minh rằng trang của bạn được tách biệt nhiều nguồn gốc.

Tài nguyên

• Cách đặt trang web của bạn ở trạng thái "tách biệt nhiều nguồn gốc" bằng COOP và COEP
• Các bản cập nhật SharedArrayBuffer trong Chrome 88 trên Android và Chrome 92 trên máy tính