"Tách biệt nhiều nguồn gốc" cho trang web của bạn bằng COOP và COEP

Sử dụng COOP và COEP để thiết lập một môi trường tách biệt nhiều nguồn gốc và bật các tính năng mạnh mẽ như SharedArrayBuffer, performance.measureUserAgentSpecificMemory() và bộ hẹn giờ có độ phân giải cao với độ chính xác cao hơn.

Eiji Kitamura

Xuất bản: Ngày 13 tháng 4 năm 2020, Lần cập nhật gần đây nhất: Ngày 21 tháng 6 năm 2022

Thận trọng: SharedArrayBuffer trên Chrome dành cho máy tính yêu cầu cách ly nhiều nguồn gốc bắt đầu từ Chrome 92. Tìm hiểu thêm tại bài viết Nội dung cập nhật về SharedArrayBuffer.

Tài liệu này trình bày cách sử dụng COOP và COEP. Bạn có thể đọc thêm về lý do điều này quan trọng trong bài viết Đặt trang web của bạn ở trạng thái "được cách ly trên nhiều nguồn gốc" bằng COOP và COEP.

Một số API web làm tăng nguy cơ xảy ra các cuộc tấn công qua kênh phụ như Spectre. Để giảm thiểu rủi ro đó, các trình duyệt cung cấp một môi trường tách biệt dựa trên lựa chọn tham gia, được gọi là tách biệt nhiều nguồn gốc. Với trạng thái tách biệt nhiều nguồn gốc, trang web sẽ có thể sử dụng các tính năng đặc quyền, bao gồm:

Các tính năng sẽ có sẵn ở trạng thái tách biệt nhiều nguồn gốc.

API	Mô tả
SharedArrayBuffer	Bắt buộc đối với các luồng WebAssembly. Tính năng này có trong Chrome 88 trên Android. Phiên bản dành cho máy tính được bật theo mặc định nhờ tính năng Tách biệt trang web, nhưng sẽ yêu cầu trạng thái tách biệt nhiều nguồn gốc và sẽ bị tắt theo mặc định trong Chrome 92.
performance.measureUserAgentSpecificMemory()	Có từ Chrome 89.
performance.now(), performance.timeOrigin	Có trên nhiều trình duyệt, với độ phân giải giới hạn ở mức 100 micro giây trở lên. Với tính năng cách ly nhiều nguồn gốc, độ phân giải có thể từ 5 micro giây trở lên.

Trạng thái tách biệt nhiều nguồn gốc cũng ngăn chặn việc sửa đổi document.domain. (Khả năng thay đổi document.domain cho phép giao tiếp giữa các tài liệu trên cùng một trang web và được coi là một lỗ hổng trong chính sách yêu cầu các trang web phải có cùng nguồn gốc.)

Để chọn sử dụng trạng thái tách biệt nhiều nguồn gốc, bạn cần gửi các tiêu đề HTTP sau đây trên tài liệu chính:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

Các tiêu đề này hướng dẫn trình duyệt chặn việc tải tài nguyên hoặc iframe chưa chọn tải bằng tài liệu khác nguồn gốc và ngăn các cửa sổ khác nguồn gốc tương tác trực tiếp với tài liệu của bạn. Điều này cũng có nghĩa là những tài nguyên đang được tải khác nguồn gốc yêu cầu phải chọn sử dụng.

Bạn có thể xác định xem một trang web có ở trạng thái tách biệt nhiều nguồn gốc hay không bằng cách kiểm tra self.crossOriginIsolated.

Lưu ý: Tài liệu này dành cho những người muốn chuẩn bị trang web của họ để sử dụng SharedArrayBuffer, luồng WebAssembly, performance.measureUserAgentSpecificMemory() hoặc bộ hẹn giờ có độ phân giải cao với độ chính xác cao hơn theo cách mạnh mẽ hơn trên các nền tảng trình duyệt.

Bảng thuật ngữ

Tài liệu này sử dụng nhiều thuật ngữ có tên và từ viết tắt tương tự nhau. Để làm rõ, chúng tôi đã biên soạn một bảng chú giải ngắn:

• COEP: Chính sách đối với trình nhúng trên nhiều nguồn gốc
• COOP: Chính sách đối với trình mở trên nhiều nguồn gốc
• CORP: Chính sách tài nguyên trên nhiều nguồn gốc
• CORS: Chia sẻ tài nguyên trên nhiều nguồn gốc
• CORB: Chặn đọc trên nhiều nguồn gốc

Tách biệt trang web của bạn trên nhiều nguồn gốc

Lưu ý: Tìm hiểu các bước thực tế để bật tính năng tách biệt nhiều nguồn gốc.

1. Đặt Cross-Origin-Opener-Policy: same-origin trên tài liệu cấp cao nhất

Bằng cách bật COOP: same-origin trên một tài liệu cấp cao nhất, các cửa sổ có cùng nguồn gốc và các cửa sổ được mở từ tài liệu đó sẽ có một nhóm bối cảnh duyệt web riêng, trừ phi chúng có cùng nguồn gốc với cùng chế độ cài đặt COOP. Do đó, chế độ cách ly được thực thi cho các cửa sổ đã mở và chế độ giao tiếp qua lại giữa cả hai cửa sổ đều bị vô hiệu hoá.

Nhóm bối cảnh duyệt web là một tập hợp các cửa sổ có thể tham chiếu lẫn nhau. Ví dụ: một tài liệu cấp cao nhất và các tài liệu con được nhúng bằng <iframe>. Nếu một trang web (https://a.example) mở một cửa sổ hộp thoại (https://b.example), thì cửa sổ mở và cửa sổ hộp thoại sẽ dùng chung một bối cảnh duyệt web. Do đó, chúng có quyền truy cập vào nhau bằng các API DOM như window.opener.

Bạn có thể kiểm tra xem trình mở cửa sổ và cửa sổ được mở có nằm trong các nhóm bối cảnh duyệt web riêng biệt hay không trong Công cụ cho nhà phát triển.

2. Bật CORP hoặc CORS trên tài nguyên

Đảm bảo rằng tất cả tài nguyên trong trang đều được tải bằng tiêu đề HTTP CORP hoặc CORS. Bạn phải thực hiện bước này để bật COEP (bước 4).

Sau đây là những việc bạn cần làm, tuỳ thuộc vào bản chất của tài nguyên:

• Nếu tài nguyên dự kiến chỉ được tải từ cùng một nguồn gốc, hãy đặt tiêu đề Cross-Origin-Resource-Policy: same-origin.
• Nếu tài nguyên dự kiến chỉ được tải từ cùng một trang web nhưng có nguồn gốc khác, hãy đặt tiêu đề Cross-Origin-Resource-Policy: same-site.
• Nếu tài nguyên được tải từ(các) nguồn gốc chéo mà bạn kiểm soát, hãy đặt tiêu đề Cross-Origin-Resource-Policy: cross-origin nếu có thể.
• Đối với các tài nguyên trên nhiều nguồn mà bạn không kiểm soát được:
  • Sử dụng thuộc tính crossorigin trong thẻ HTML tải nếu tài nguyên được phân phát bằng CORS. (Ví dụ: <img src="***" crossorigin>.)
  • Yêu cầu chủ sở hữu tài nguyên hỗ trợ CORS hoặc CORP.
• Đối với iframe, hãy tuân thủ các nguyên tắc tương tự và đặt Cross-Origin-Resource-Policy: cross-origin (hoặc same-site, same-origin tuỳ thuộc vào ngữ cảnh).
• Các tập lệnh được tải bằng WebWorker phải được phân phát từ cùng một nguồn, vì vậy bạn không cần tiêu đề CORP hoặc CORS.
• Đối với một tài liệu hoặc worker được phân phát bằng COEP: require-corp, các tài nguyên phụ khác nguồn gốc được tải mà không có CORS phải đặt tiêu đề Cross-Origin-Resource-Policy: cross-origin để chọn được nhúng. Ví dụ: điều này áp dụng cho <script>, importScripts, <link>, <video>, <iframe>, v.v.

Từ khoá chính: Cùng một trang web là những trang web có cùng lược đồ và cùng eTLD+1. Cùng nguồn gốc là những trang web có cùng tổ hợp lược đồ, tên máy chủ và cổng. Đọc thêm về sự khác biệt giữa same-site và same-origin.

Cách ly trong iframe

Bạn có thể bật chế độ cách ly nhiều nguồn gốc trên một tài liệu được nhúng trong iframe bằng cách áp dụng chính sách quyền allow="cross-origin-isolated" cho thẻ <iframe> và đáp ứng các điều kiện sau. Toàn bộ chuỗi tài liệu, bao gồm cả khung mẹ và khung con, cũng phải được tách biệt nhiều nguồn gốc.

3. Sử dụng tiêu đề HTTP COEP Report-Only để đánh giá các tài nguyên được nhúng

Trước khi bật hoàn toàn COEP, bạn có thể chạy thử bằng cách sử dụng tiêu đề Cross-Origin-Embedder-Policy-Report-Only để kiểm tra xem chính sách có thực sự hoạt động hay không. Bạn sẽ nhận được báo cáo mà không chặn nội dung được nhúng.

Áp dụng đệ quy cho tất cả tài liệu, bao gồm cả tài liệu cấp cao nhất, iframe và tập lệnh worker. Để biết thông tin về tiêu đề HTTP Report-Only, hãy xem phần Theo dõi các vấn đề bằng Reporting API.

4. Bật COEP

Bạn chỉ có thể thực hiện bước này sau khi đảm bảo tài nguyên đã bật CORP hoặc CORS.

Sau khi bạn xác nhận rằng mọi thứ đều hoạt động và tất cả tài nguyên đều có thể được tải thành công, hãy chuyển tiêu đề Cross-Origin-Embedder-Policy-Report-Only sang tiêu đề Cross-Origin-Embedder-Policy có cùng giá trị cho tất cả tài liệu, bao gồm cả những tài liệu được nhúng bằng iframe và tập lệnh worker.

Lưu ý: Squoosh, một PWA tối ưu hoá hình ảnh, sử dụng COOP / COEP để truy cập vào Wasm Threads (và Shared Array Buffer) trên Chrome dành cho Android.

Thận trọng: Chúng tôi đang tìm hiểu cách triển khai Cross-Origin-Resource-Policy ở quy mô lớn, vì chế độ 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. Một lựa chọn là chế độ không có thông tin đăng nhập COEP. Chế độ này cho phép tải tài nguyên mà không cần tiêu đề CORP bằng cách loại bỏ tất cả thông tin đăng nhập của tài nguyên. Chế độ không cần thông tin đăng nhập có trong Chrome 96 và Edge, nhưng các trình duyệt khác chưa hỗ trợ chế độ này.

Xác định xem công tác chia cách có thành công hay không

Thuộc tính self.crossOriginIsolated trả về true khi trang web ở trạng thái tách biệt nhiều nguồn gốc và tất cả tài nguyên cũng như cửa sổ đều được cách ly trong cùng một nhóm bối cảnh duyệt web. Bạn có thể sử dụng API này để xác định xem bạn đã phân lập thành công nhóm bối cảnh duyệt web và có quyền truy cập vào các tính năng như performance.measureUserAgentSpecificMemory() hay chưa.

Gỡ lỗi vấn đề

Bạn có thể gặp vấn đề với COOP và COEP. Bạn có thể sử dụng các công cụ dành cho nhà phát triển của trình duyệt hoặc API báo cáo để gỡ lỗi.

Gỡ lỗi bằng Chrome DevTools

Đối với những tài nguyên được kết xuất trên màn hình (chẳng hạn như hình ảnh), bạn có thể dễ dàng phát hiện các vấn đề về COEP vì yêu cầu bị chặn và trang sẽ cho biết hình ảnh bị thiếu. Tuy nhiên, đối với những tài nguyên không nhất thiết phải có tác động trực quan, chẳng hạn như tập lệnh hoặc kiểu, bạn có thể không nhận thấy các vấn đề về COEP. Đối với những trường hợp đó, hãy sử dụng bảng điều khiển Mạng của Công cụ cho nhà phát triển.

Nếu có vấn đề với COEP, bạn sẽ thấy (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) trong cột Trạng thái.

Sau đó, bạn có thể nhấp vào mục đó để xem thêm thông tin chi tiết.

Bạn cũng có thể xác định trạng thái của iframe và cửa sổ hộp thoại thông qua bảng Ứng dụng. Chuyển đến phần "Frames" (Khung) ở bên trái rồi mở rộng "top" (trên cùng) để xem thông tin chi tiết về cấu trúc tài nguyên.

Bạn có thể kiểm tra trạng thái của iframe, chẳng hạn như trạng thái có sẵn của SharedArrayBuffer, v.v.

Bạn cũng có thể kiểm tra trạng thái của cửa sổ hộp thoại, chẳng hạn như cửa sổ đó có bị cô lập trên nhiều nguồn gốc hay không.

Theo dõi các vấn đề bằng Reporting API

Reporting API là một cơ chế khác giúp bạn phát hiện nhiều vấn đề. Bạn có thể định cấu hình Reporting API để hướng dẫn trình duyệt của người dùng gửi báo cáo bất cứ khi nào COEP chặn việc tải một tài nguyên hoặc COOP cô lập một cửa sổ hộp thoại. Chrome đã hỗ trợ Reporting API kể từ phiên bản 69 cho nhiều mục đích sử dụng, bao gồm cả COEP và COOP.

Lưu ý: Bạn có đang sử dụng Reporting API với tiêu đề Report-To không? Chrome đang chuyển sang một phiên bản mới của Reporting API, thay thế Report-To bằng Reporting-Endpoints; hãy cân nhắc việc di chuyển sang phiên bản mới. Hãy xem bài viết Di chuyển sang Reporting API phiên bản 1 để biết thông tin chi tiết.

Tìm hiểu cách định cấu hình Reporting API và thiết lập một máy chủ để nhận báo cáo.

Ví dụ về báo cáo COEP

Sau đây là ví dụ về tải trọng báo cáo COEP khi tài nguyên khác nguồn gốc bị chặn:

[{
  "age": 25101,
  "body": {
    "blocked-url": "https://third-party-test.glitch.me/check.svg?",
    "blockedURL": "https://third-party-test.glitch.me/check.svg?",
    "destination": "image",
    "disposition": "enforce",
    "type": "corp"
  },
  "type": "coep",
  "url": "https://cross-origin-isolation.glitch.me/?coep=require-corp&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4249.0 Safari/537.36"
}]

Thận trọng: blocked-url chỉ tồn tại để đảm bảo khả năng tương thích ngược và sẽ bị xoá.

Ví dụ về báo cáo COOP

Ví dụ về tải trọng báo cáo COOP khi một hộp thoại được mở riêng biệt sẽ có dạng như sau:

[{
  "age": 7,
  "body": {
    "disposition": "enforce",
    "effectivePolicy": "same-origin",
    "nextResponseURL": "https://third-party-test.glitch.me/popup?report-only&coop=same-origin&",
    "type": "navigation-from-response"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

Khi các nhóm bối cảnh duyệt web khác nhau cố gắng truy cập vào nhau (chỉ ở chế độ "report-only"), COOP cũng sẽ gửi một báo cáo. Ví dụ: báo cáo khi postMessage() được thử sẽ có dạng như sau:

[{
  "age": 51785,
  "body": {
    "columnNumber": 18,
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "lineNumber": 83,
    "property": "postMessage",
    "sourceFile": "https://cross-origin-isolation.glitch.me/popup.js",
    "type": "access-from-coop-page-to-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
},
{
  "age": 51785,
  "body": {
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "property": "postMessage",
    "type": "access-to-coop-page-from-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

Những điểm cần nhớ

Sử dụng kết hợp các tiêu đề HTTP COOP và COEP để chọn một trang web vào trạng thái đặc biệt tách biệt nhiều nguồn gốc. Bạn có thể kiểm tra self.crossOriginIsolated để xác định xem một trang web có ở trạng thái tách biệt nhiều nguồn gốc hay không.

Chúng tôi sẽ tiếp tục cập nhật bài đăng này khi các tính năng mới được cung cấp cho trạng thái tách biệt nhiều nguồn gốc và những điểm cải tiến khác được thực hiện đối với Công cụ cho nhà phát triển liên quan đến COOP và COEP.

Tài nguyên

• Lý do bạn cần "tách biệt nhiều nguồn gốc" cho các tính năng mạnh mẽ
• Hướng dẫn bật tính năng tách biệt nhiều nguồn gốc
• Theo dõi tổng mức sử dụng bộ nhớ của trang web bằng measureUserAgentSpecificMemory()

Các bản cập nhật tài liệu

• Ngày 21 tháng 6 năm 2022: Bạn cũng cần chú ý đến tập lệnh worker khi bật tính năng cách ly nhiều nguồn. Đã thêm một số nội dung giải thích.
• Ngày 5 tháng 8 năm 2021: JS Self-Profiling API được đề cập là một trong những API yêu cầu tính năng cách ly nhiều nguồn gốc, nhưng phản ánh thay đổi gần đây về hướng, API này đã bị xoá.
• Ngày 6 tháng 5 năm 2021: Dựa trên ý kiến phản hồi và các vấn đề được báo cáo, chúng tôi quyết định điều chỉnh tiến trình sử dụng SharedArrayBuffer trong các trang web không tách biệt nhiều nguồn gốc để hạn chế trong Chrome M92.
• Ngày 16 tháng 4 năm 2021: Thêm ghi chú về chế độ không có thông tin đăng nhập COEP và COOP same-origin-allow-popups là một điều kiện thoải mái để cách ly nhiều nguồn.
• Ngày 5 tháng 3 năm 2021: Xoá các hạn chế đối với SharedArrayBuffer, performance.measureUserAgentSpecificMemory() và các chức năng gỡ lỗi. Hiện tại, các chức năng này đã được bật hoàn toàn trong Chrome 89. Đã thêm các chức năng sắp ra mắt, performance.now() và performance.timeOrigin, có độ chính xác cao hơn.
• Ngày 19 tháng 2 năm 2021: Thêm một lưu ý về chính sách tính năng allow="cross-origin-isolated" và chức năng gỡ lỗi trên Công cụ cho nhà phát triển.
• Ngày 15 tháng 10 năm 2020: self.crossOriginIsolated có trong Chrome 87. Theo đó, document.domain là bất biến khi self.crossOriginIsolated trả về true. performance.measureUserAgentSpecificMemory() đang kết thúc bản dùng thử theo nguyên gốc và được bật theo mặc định trong Chrome 89. Shared Array Buffer trên Chrome dành cho Android sẽ có từ Chrome 88.