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

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

Eiji Kitamura

Hướng dẫn này trình bày 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 có độ chính xác cao hơn.

Nếu bạn đị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í trong trang web của bạn SharedArrayBuffer được sử dụng

Kể từ Chrome 92, các chức năng sử dụng SharedArrayBuffer sẽ không còn hoạt động 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 về việc ngừng sử dụng SharedArrayBuffer, thì có thể là trang web của bạn hoặc một trong các tài nguyên nhúng trên trang đang sử dụng SharedArrayBuffer. Để đảm bảo không có vấn đề nào 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 trang web.

Nếu bạn không chắc chắn SharedArrayBuffer được sử dụng ở đâu trong trang web của mình, hãy 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 báo cáo về việc ngừng sử dụng

Nếu bạn đã biết vị trí của mình đang sử dụng SharedArrayBuffer, hãy chuyển đến phần 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 Bảng điều khiển.

Nếu trang đang sử dụng SharedArrayBuffer, thông báo sau sẽ hiển thị:

[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 của bên thứ ba, hãy liên hệ với nhà phát triển để khắc phục vấn đề. Nếu phương pháp này được triển khai dưới dạng một phần của trang web, 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.

Cảnh báo trên Bảng điều khiển DevToools khi dùng SharedArrayBuffer mà không tách biệt nhiều nguồn gốc.

(Nâng cao) Sử dụ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 là ngừng sử dụng API cho một điểm cuối đã chỉ định.

Thiết lập máy chủ báo cáo về việc ngừng sử dụng và nhận URL báo cáo. Bạn có thể thực hiện việc này bằng cách sử dụng một dịch vụ công hoặc tự xây dựng một dịch vụ công.
Bằng cách sử dụng URL này, hãy đặt tiêu đề HTTP sau đây thành 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 được truyền tải, điểm cuối mà bạn đã đăng ký sẽ bắt đầu thu thập các báo cáo về việc ngừng sử dụng.

Hãy 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 việc tách biệt nhiều nguồn gốc

Sẽ không tuyệt vời sao 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 thực sự gây ra vấn đề gì? Các tiêu đề HTTP Cross-Origin-Opener-Policy-Report-Only và Cross-Origin-Embedder-Policy-Report-Only cho phép bạn thực hiện việc đó.

Đặt Cross-Origin-Opener-Policy-Report-Only: same-origin trên tài liệu cấp cao nhất của bạn. Đúng như tên gọi, tiêu đề này chỉ gửi báo cáo về tác động mà COOP: same-origin sẽ tạo ra đối với trang web của bạn – thực sự thì tiêu đề này sẽ không tắt tính nă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 của bạn. Xin nhắc lại, tiêu đề này cho bạn thấy 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 tới chính máy chủ báo cáo mà bạn đã thiết lập ở bước trước.

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

Sau khi bạn đã xác định được tài nguyên nào sẽ bị ảnh hưởng khi tách biệt nhiều nguồn gốc, dưới đây là các nguyên tắc chung về cách bạn thực sự chọn sử dụng các tài nguyê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, 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.
Đối với những tài nguyên có thể tải bằng CORS, hãy đảm bảo bạn đã 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 iframe đã tải, hãy thêm allow="cross-origin-isolated" vào <iframe>.
Nếu tài nguyên nhiều nguồn gốc được tải vào iframe hoặc tập lệnh trình chạy liên quan đến một lớp iframe hoặc tập lệnh trình chạy khác, hãy áp dụng định kỳ 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ả các tài nguyên nhiều 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 trình chạy (bắt buộc bất kể các nguồn gốc cùng nguồn gốc hay nhiều nguồn gốc).
Hãy đả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 để tiếp tục hoạt động khi tính năng tách biệt nhiều nguồn gốc đang bật. 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 nhiều nguồn gốc, hoặc sử dụng một phương thức liên lạc khác (ví dụ: các 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, dưới đây là những 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 của bạn. Nếu bạn đã đặt Cross-Origin-Opener-Policy-Report-Only: same-origin, hãy thay thế. 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ử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 của bạn. 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 nhiều nguồn gốc chưa được chọn sử dụng.
Hãy kiểm tra để đảm bảo rằng 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 riêng trên nhiều nguồn gốc.

Bạn có thể gặp khó khăn khi bật tính năng tách biệt nhiều nguồn gốc trên máy chủ cục bộ vì các máy chủ đơn giản không hỗ trợ gửi tiêu đề. Bạn có thể chạy Chrome bằng cờ hiệu 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.