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.

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 bắt buộc phải tách biệt nhiều nguồn gốc nếu muốn sử dụng SharedArrayBuffer, performance.measureUserAgentSpecificMemory() hoặc trình hẹn giờ có độ phân giải cao với độ chính xác tốt 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.

Nếu bạn không chắc chắn SharedArrayBuffer được sử dụng ở đâu trong trang web của mình, có hai cách để tìm hiểu:

  • 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 mình đang sử dụng SharedArrayBuffer ở đâu, hãy chuyển đến phần Phân tích tác động của tính năng 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.

  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 Console (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 https://developer.chrome.com/blog/enabling-shared-array-buffer/ 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 nguồn gốc của SharedArrayBuffer. 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 tính năng này được triển khai trong trang web của bạn, 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 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
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 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 đến một điểm cuối được chỉ định.

  1. 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ụ.
  2. 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"}]}
  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 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-OnlyCross-Origin-Embedder-Policy-Report-Only cho phép bạn làm được điều đó.

  1. Đặt Cross-Origin-Opener-Policy-Report-Only: same-origin trên tài liệu cấp cao nhất. 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ẽ gây ra đối với trang web của bạn – tiêu đề này sẽ không thực sự tắt tính năng giao tiếp với cửa sổ bật lên.
  2. 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.
  3. Đặ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.

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 đó:

  1. 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.
  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 tính năng 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 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 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.
  5. 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 bắt buộc 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).
  6. Đảm bảo không có cửa sổ bật lên trên nhiều nguồn gốc nào 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:

  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ế. 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 đó.
  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ế. 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.
  3. 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.

Tài nguyên