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

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 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 tách biệt nhiều nguồn gốc trên trang web.

Eiji Kitamura

Hướng dẫn này cho bạn biết cách bật tính năng tách biệt nhiều nguồn gốc. Bạn phải tách biệt nhiều nguồn gốc nếu muốn sử dụng SharedArrayBuffer, performance.measureUserAgentSpecificMemory() hoặc bộ tính 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 tách biệt 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 nhiều nguồn gốc khá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 đề nào 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 SharedArrayBuffer được sử dụng ở đâu trên trang web của mình, bạn có thể tìm hiểu theo 2 cách:

Sử dụng Công cụ của Chrome cho nhà phát triển
(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 nơi bạn đang sử dụng SharedArrayBuffer, hãy chuyển đến bài viết Phân tích tác động của việc tách biệt nhiều nguồn gốc.

Sử dụng Công cụ của Chrome cho nhà phát triển

Công cụ của Chrome cho nhà phát triển cho phép nhà phát triển kiểm tra trang web.

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.
Chọn bảng điều khiển Console (Bảng điều khiển).

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 https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details. common-bundle.js:535

Tên tệp và số dòng ở cuối thông báo (ví dụ: common-bundle.js:535) cho biết SharedArrayBuffer đến từ đâu. Nếu đó là 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 cách này được triển khai trên trang web của bạn, hãy làm theo hướng dẫn dưới đây để bật tính năng tách biệt nhiều nguồn gốc.

Cảnh báo của bảng điều khiển DevTools khi SharedArrayBuffer được sử dụng mà không có tính năng tách biệt nhiều nguồn gốc.

(Nâng cao) Sử dụng Báo cáo 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 đến một điểm cuối được chỉ định.

Thiết lập máy chủ báo cáo về việc ngừng sử dụng và lấy URL báo cáo. Bạn có thể đạt được điều này bằng cách sử dụng một dịch vụ công khai hoặc tự tạo một dịch vụ.
Sử dụng URL, hãy đặt tiêu đề HTTP sau đây cho các trang có khả năng phân phát SharedArrayBuffer.
```
Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
```
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 về việc ngừng sử dụng.

Xem ví dụ về cách triển khai tại đây: https://cross-origin-isolation.glitch.me.

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 tách biệt nhiều nguồn gốc đối với trang web của mình mà không làm hỏng bất kỳ nội dung nào. Các 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 đó.

Đặt Cross-Origin-Opener-Policy-Report-Only: same-origin trên tài liệu cấp cao nhất. Đúng như tên gọi, tiêu đề này chỉ gửi các báo cáo về tác động của COOP: same-origin sẽ đối với trang web của bạn. Tiêu đề này sẽ không thực sự tắt hoạt động giao tiếp với cửa sổ bật lên.
Thiết lập tính năng báo cáo và định cấu hình máy chủ web để nhận và lưu báo cáo.
Đặt Cross-Origin-Embedder-Policy-Report-Only: require-corp trên tài liệu cấp cao nhất. Xin nhắc lại, tiêu đề này cho phép bạn xem tác động của việc bật COEP: require-corp mà không thực sự ảnh hưởng đến hoạt độ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.

Thận trọng: Việc bật tính năng cô lập nhiều nguồn gốc sẽ chặn việc tải các tài nguyên nhiều nguồn gốc mà bạn không chọn sử dụng một cách rõ ràng, đồng thời ngăn tài liệu cấp cao nhất của bạn giao tiếp với cửa sổ bật lên. Chúng tôi đang tìm hiểu các cách triển khai Cross-Origin-Resource-Policy trên quy mô lớn, vì tính năng tách biệt nhiều nguồn gốc yêu cầu tất cả tài nguyên phụ phải chọn sử dụng một cách rõ ràng. Và chúng tôi đã nảy ra ý tưởng đi theo hướng ngược lại: chế độ COEP "không có thông tin xác thực" mới cho phép tải tài nguyên mà không cần tiêu đề CORP bằng cách loại bỏ mọi thông tin đăng nhập của chúng. Chúng tôi hy vọng điều này sẽ giúp bạn giảm bớt gánh nặng đảm bảo các tài nguyên phụ đang gửi tiêu đề Cross-Origin-Resource-Policy. Mặc dù chế độ credentialless có trên Chrome từ phiên bản 96, nhưng chưa có trình duyệt nào khác hỗ trợ chế độ này. Điều này có thể khiến một số nhà phát triển gặp khó khăn khi triển khai COOP hoặc COEP ở giai đoạn này. Ngoài ra, bạn cũng biết rằng tiêu đề Cross-Origin-Opener-Policy: same-origin sẽ phá vỡ các hoạt động tích hợp yêu cầu tương tác với cửa sổ nhiều nguồn gốc, chẳng hạn như OAuth và thanh toán. Để giảm thiểu vấn đề này, chúng tôi đang tìm cách nới lỏng điều kiện để bật tính năng tách biệt nhiều nguồn gốc cho Cross-Origin-Opener-Policy: same-origin-allow-popups. Bằng cách này, bạn có thể giao tiếp với cửa sổ tự mở. Nếu muốn bật tính năng cách ly nhiều nguồn gốc nhưng bị các vấn đề này chặn, bạn nên đăng ký dùng thử theo nguồn gốc và đợi đến khi các chế độ mới ra mắt. Chúng tôi không có kế hoạch chấm dứt bản dùng thử theo nguyên gốc cho đến khi các chế độ mới này ra mắt.

Giảm thiểu tác động của tính năng tách biệt nhiều nguồn gốc

Sau khi bạn xác định được những tài nguyên nào sẽ chịu ảnh hưởng của tính năng tách biệt tài nguyên trên nhiều 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 trên nhiều nguồn gốc đó:

Trên các tài nguyên nhiều nguồn gốc như hình ảnh, tập lệnh, tệp 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.
Đối với các tài nguyên có thể tải bằng cách sử dụng CORS, hãy nhớ bật thuộc tính này bằng cách đặt thuộc tính crossorigin trong thẻ HTML (ví dụ: <img src="example.jpg" crossorigin>). Đối với yêu cầu tìm nạp JavaScript, hãy đảm bảo request.mode được đặt thành cors.
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>.
Nếu tài nguyên trên nhiều nguồn gốc được tải vào iframe hoặc tập lệnh worker liên quan đến một lớp iframe hoặc tập lệnh worker khác, hãy áp dụng đệ quy các bước được mô tả trong phần này trước khi tiếp tục.
Sau khi bạn xác nhận rằng tất cả tài nguyên trên nhiều nguồn gốc đều được chọn, 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ể tài nguyên trên cùng nguồn gốc hay trên nhiều nguồn gốc).
Đảm bảo rằng không có cửa sổ bật lên nào trên nhiều 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 đối tượng này khi bật tính năng tách biệt nhiều nguồn gốc. Bạn có thể di chuyển thông tin giao tiếp sang một tài liệu khác không bị tách biệt giữa các 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 tách biệt nhiều nguồn gốc

Sau khi bạn giảm thiểu tác động bằng cách 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:

Đặ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ế mã đó. Thao tác này sẽ chặn việc 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 đó.
Đặ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ế. Thao tác này sẽ chặn việc tải các tài nguyên trên nhiều nguồn gốc không được chọn tham gia.
Kiểm tra để đảm bảo self.crossOriginIsolated trả về true trong bảng điều khiển để xác minh rằng trang của bạn được tách biệt giữa các nguồn gốc.

Việc bật tính năng tách biệt nhiều nguồn gốc trên máy chủ cục bộ có thể gây phiền toái vì các máy chủ đơn giản không hỗ trợ việc gửi tiêu đề. Bạn có thể chạy Chrome bằng cờ dòng lệnh --enable-features=SharedArrayBuffer để bật SharedArrayBuffer mà không cần bật tính năng tách biệt nhiều nguồn gốc. Tìm hiểu cách chạy Chrome bằng cờ dòng lệnh trên các nền tảng tương ứng.